@emotion/styled - npm Package Compare versions

Comparing version 11.0.0-next.4 to 11.0.0-next.5

CHANGELOG.md

 # @emotion/styled
 
+## 11.0.0-next.5
+
+### Minor Changes
+
+- [`ad77ed24`](https://github.com/emotion-js/emotion/commit/ad77ed24b4bfe62d6c80f0498cd7e76863e2f28e) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@JakeGinnivan](https://github.com/JakeGinnivan)! - Added `CreateStyled` overload to handle when `shouldForwardProp` is a custom type guard for intrinsic props.
+
+  As an example, if you want to override the type of the `color` prop:
+
+  ```ts
+  export const Box = styled('div', {
+    shouldForwardProp: (
+      propName
+    ): propName is Exclude<keyof JSX.IntrinsicElements['div'], 'color'> =>
+      propName !== 'color'
+  })<{ color: Array<string> }>(props => ({
+    color: props.color[0]
+  }))
+  ;<Box color={['green']} />
+  ```
+
+### Patch Changes
+
+- [`99c6b7e2`](https://github.com/emotion-js/emotion/commit/99c6b7e2f65fb7eddb2863b393e2110dbc4810d8) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@JakeGinnivan](https://github.com/JakeGinnivan)! - Fix issue with one of TypeScript overloads for `styled`. It pass `StyleProps` to `Interpolation` correctly now.
+- Updated dependencies []:
+  - @emotion/core@11.0.0-next.5
+
 ## 11.0.0-next.4
@@ -4,0 +30,0 @@

package.json

 {
   "name": "@emotion/styled",
-  "version": "11.0.0-next.4",
+  "version": "11.0.0-next.5",
   "description": "styled API for emotion",
@@ -22,3 +22,3 @@ "main": "dist/styled.cjs.js",
     "@babel/core": "^7.0.0",
-    "@emotion/core": "^11.0.0-next.4",
+    "@emotion/core": "^11.0.0-next.5",
     "react": ">=16.8.0"
@@ -33,3 +33,3 @@ },
     "@babel/core": "^7.7.2",
-    "@emotion/core": "^11.0.0-next.4",
+    "@emotion/core": "^11.0.0-next.5",
     "dtslint": "^0.3.0",
@@ -36,0 +36,0 @@ "react": "^16.11.0"

types/base.d.ts

@@ -28,8 +28,18 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 
-export interface StyledOptions {
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<
+  Props,
+  ForwardedProps extends keyof Props = keyof Props
+> {
   label?: string
-  shouldForwardProp?(propName: string): boolean
+  shouldForwardProp?(propName: keyof Props): propName is ForwardedProps
   target?: string
 }
 
+export interface StyledOptions<Props> {
+  label?: string
+  shouldForwardProp?(propName: keyof Props): boolean
+  target?: string
+}
+
 /**
@@ -77,3 +87,5 @@ * @typeparam ComponentProps  Props which will be included when withComponent is called
     ...styles: Array<
-      Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps>
+      Interpolation<
+        ComponentProps & SpecificComponentProps & AdditionalProps & StyleProps
+      >
     >
@@ -93,10 +105,36 @@ ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
 export interface CreateStyled<Theme extends {} = any> {
+  <
+    C extends React.ComponentType<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<
+      C
+    > = keyof React.ComponentProps<C>
+  >(
+    component: C,
+    options: FilteringStyledOptions<PropsOf<C>, ForwardedProps>
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & { theme?: Theme },
+    {},
+    { theme: Theme }
+  >
+
   <C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
-    options?: StyledOptions
+    options?: StyledOptions<PropsOf<C>>
   ): CreateStyledComponent<PropsOf<C> & { theme?: Theme }, {}, { theme: Theme }>
 
+  <
+    Tag extends keyof JSX.IntrinsicElements,
+    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag]
+  >(
+    tag: Tag,
+    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
+  ): CreateStyledComponent<
+    { theme?: Theme },
+    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>,
+    { theme: Theme }
+  >
+
   <Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
-    options?: StyledOptions
+    options?: StyledOptions<JSX.IntrinsicElements[Tag]>
   ): CreateStyledComponent<
@@ -103,0 +141,0 @@ { theme?: Theme },

No alert changes

Improved metrics

Total package byte prevSize

176041

increased by1.99%

Lines of code

1805

increased by3.86%

No dependency changes