@emotion/serialize - npm Package Compare versions

Comparing version 0.11.14 to 1.0.0-next.0

CHANGELOG.md

 # @emotion/serialize
 
+## 1.0.0-next.0
+
+### Major Changes
+
+- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes:
+
+  - Reduce build times when using emotion
+  - In many cases remove the need for manually specifying generic parameters for your emotion components.
+
+  If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
+
+  ## Improvements
+
+  - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
+  - Union types as props are better supported and should be inferred properly
+  - Build times should be reduced significantly in larger projects.
+
+  ## Breaking changes
+
+  - withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
+
+    **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
+
+  - `css` function has been restricted to prevent passing of invalid types
+  - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
+
+    `styled<typeof MyComponent, ExtraProps>(MyComponent)({})`
+    to
+    `styled(MyComponent)<ExtraProps>({})`
+
+  - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
+
+    `StyledComponent<Props, {}, MyTheme>`
+    to
+    `StyledComponent<Props & { theme?: MyTheme }>`
+
 ## 0.11.14
@@ -4,0 +40,0 @@

package.json

 {
   "name": "@emotion/serialize",
-  "version": "0.11.14",
+  "version": "1.0.0-next.0",
   "description": "serialization utils for emotion",
@@ -5,0 +5,0 @@ "main": "dist/serialize.cjs.js",

types/index.d.ts

@@ -7,4 +7,2 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 
-import { Equal } from './helper'
-
 export { RegisteredCache, SerializedStyles }
@@ -67,5 +65,8 @@
     CSSOthersObject<MP> {}
-export type FunctionInterpolation<MP> = (mergedProps: MP) => Interpolation<MP>
 
-export type Interpolation<MP = undefined> =
+export interface FunctionInterpolation<MergedProps> {
+  (mergedProps: MergedProps): Interpolation<MergedProps>
+}
+
+export type Interpolation<MergedProps = undefined> =
   | null
@@ -79,5 +80,5 @@ | undefined
   | SerializedStyles
-  | ArrayInterpolation<MP>
-  | ObjectInterpolation<MP>
-  | Equal<MP, undefined, never, FunctionInterpolation<MP>>
+  | ArrayInterpolation<MergedProps>
+  | ObjectInterpolation<MergedProps>
+  | FunctionInterpolation<MergedProps>
 
@@ -84,0 +85,0 @@ export function serializeStyles<MP>(

types/tests.ts

@@ -19,21 +19,17 @@ import {
 // $ExpectType SerializedStyles
-serializeStyles({}, [])
+serializeStyles([], {})
 // $ExpectType SerializedStyles
-serializeStyles(
-  {
-    'emotion-cache': 'width: 200px'
-  },
-  []
-)
+serializeStyles([], {
+  'emotion-cache': 'width: 200px'
+})
 // $ExpectType SerializedStyles
-serializeStyles({}, [], {})
+serializeStyles([], {}, {})
 // $ExpectType SerializedStyles
-serializeStyles({}, ['abc'], {})
+serializeStyles(['abc'], {}, {})
 // $ExpectType SerializedStyles
-serializeStyles({}, ['width: 200px;'], {})
+serializeStyles(['width: 200px;'], {}, {})
 // $ExpectType SerializedStyles
-serializeStyles({}, [() => 'height: 300px;'], {})
+serializeStyles([() => 'height: 300px;'], {}, {})
 // $ExpectType SerializedStyles
 serializeStyles(
-  {},
   [
@@ -46,6 +42,7 @@ 'display: block;',
   ],
+  {},
   {}
 )
 // $ExpectType SerializedStyles
-serializeStyles({}, [testTemplateStringsArray, 5, '4px'], {})
+serializeStyles([testTemplateStringsArray, 5, '4px'], {}, {})
 
@@ -52,0 +49,0 @@ // $ExpectError

types/tslint.json

@@ -8,4 +8,6 @@ {
         ],
-        "semicolon": false
+        "semicolon": false,
+        "no-null-undefined-union": false,
+        "callable-types": false
     }
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74247

increased by2.65%

Worsened metrics

Number of package files

14

decreased by-6.67%

Lines of code

1711

decreased by-0.12%

No dependency changes