@emotion/babel-plugin - npm Package Compare versions

Comparing version 11.0.0-rc.0 to 11.0.0

CHANGELOG.md

 # @emotion/babel-plugin
 
+## 11.0.0
+
+### Major Changes
+
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config.
+
+* [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Removed support for the `instances` option, any usage of it should be replaced with the `importMap` option
+
+* [`c65c5d88`](https://github.com/emotion-js/emotion/commit/c65c5d887002d76557eaefcb98091d795b13f9a9) [#1622](https://github.com/emotion-js/emotion/pull/1622) Thanks [@Andarist](https://github.com/Andarist)! - Drop Babel 6 support
+
+- [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+
+  Each possible value for this option produces different output code:
+
+  - with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,
+  - with `always` we always add labels when possible,
+  - with `never` we disable this entirely and no labels are added.
+
+* [`b7d21373`](https://github.com/emotion-js/emotion/commit/b7d21373d967d0f958dd59aaaa650047e23e8e8b) [#2080](https://github.com/emotion-js/emotion/pull/2080) Thanks [@Andarist](https://github.com/Andarist)! - `cssPropOptimization` defaults now to `true` regardless of the `@emotion/react` import presence.
+
+### Minor Changes
+
+- [`c5b12d90`](https://github.com/emotion-js/emotion/commit/c5b12d90316477e95ce3680a3c745cde328a14c1) [#1220](https://github.com/emotion-js/emotion/pull/1220) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Added the `importMap` option which allows you to tell `@emotion/babel-plugin` what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
+
+- [`c672175b`](https://github.com/emotion-js/emotion/commit/c672175b52e86de43b3d4092a8fe34b2023ceae8) [#1130](https://github.com/emotion-js/emotion/pull/1130) Thanks [@jtmthf](https://github.com/jtmthf)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
+
+* [`5e803106`](https://github.com/emotion-js/emotion/commit/5e803106d391b7c036bdf634318b80337a1d9b70) [#1893](https://github.com/emotion-js/emotion/pull/1893) Thanks [@Andarist](https://github.com/Andarist)! - Added support for converting assignment expressions to labels in cases like this:
+
+  ```js
+  styles = css``
+  Timeline.Item = styled.li``
+  Timeline.Item.Anchor = styled.a``
+  ```
+
+- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+
+* [`5c7ec859`](https://github.com/emotion-js/emotion/commit/5c7ec85904633a11185066fa591dc8969f3f2ff2) [#1805](https://github.com/emotion-js/emotion/pull/1805) Thanks [@Andarist](https://github.com/Andarist)! - Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.
+
+* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.
+
+### Patch Changes
+
+- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1602](https://github.com/emotion-js/emotion/pull/1602) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
+
+* [`9e998e37`](https://github.com/emotion-js/emotion/commit/9e998e3755c217027ad1be0af4c64644fe14c6bf) [#1817](https://github.com/emotion-js/emotion/pull/1817) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like `& :hover` the whitespace before colon has a semantic meaning and needs to be preserved.
+
+* Updated dependencies [[`e3d7db87`](https://github.com/emotion-js/emotion/commit/e3d7db87deaac95817404760112417ac1fa1b56d), [`8a896a31`](https://github.com/emotion-js/emotion/commit/8a896a31434a1d2f69e1f1467c446c884c929387), [`5c55fd17`](https://github.com/emotion-js/emotion/commit/5c55fd17dcaec84d1f5d5d13ae90dd336d7e4403), [`a085003d`](https://github.com/emotion-js/emotion/commit/a085003d4c8ca284c116668d7217fb747802ed85), [`5d692a6a`](https://github.com/emotion-js/emotion/commit/5d692a6a8102b3faabefb773dd0145b123668a07), [`c6431074`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]:
+  - @emotion/serialize@1.0.0
+
 ## 11.0.0-rc.0
@@ -78,5 +127,5 @@
 
-- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config.
+- [`b8476e08`](https://github.com/emotion-js/emotion/commit/b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1) [#1675](https://github.com/emotion-js/emotion/pull/1675) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config.
 
-* [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
+* [`c7850e61`](https://github.com/emotion-js/emotion/commit/c7850e61211d6aa26a3388399889a6072ee2f1fe) [#1656](https://github.com/emotion-js/emotion/pull/1656) Thanks [@Andarist](https://github.com/Andarist)! - `autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`.
 
@@ -93,3 +142,3 @@ Each possible value for this option produces different output code:
 
-- [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Removed `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/core/macro` has been added to account for this use case and appropriate changes has been made to `babel-plugin-emotion` to facilitate those changes.
+- [`843bfb11`](https://github.com/emotion-js/emotion/commit/843bfb1153ee0dbe33d005fdd5c5be185daa5c41) [#1630](https://github.com/emotion-js/emotion/pull/1630) Thanks [@Andarist](https://github.com/Andarist)! - Removed `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/core/macro` has been added to account for this use case and appropriate changes has been made to `babel-plugin-emotion` to facilitate those changes.
 
@@ -109,5 +158,5 @@ If you have used `@emotion/css` directly (it was always reexported from `@emotion/core`) or you have been using its macro then you should update your code like this:
 
-- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
+- [`0a4a22ff`](https://github.com/emotion-js/emotion/commit/0a4a22ffcfaa49d09a88856ef2d51e0d53e31b6d) [#1651](https://github.com/emotion-js/emotion/pull/1651) Thanks [@Andarist](https://github.com/Andarist)! - Allow `labelFormat` option to be a function.
 
-* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.
+* [`828111cd`](https://github.com/emotion-js/emotion/commit/828111cd32d3fe8c984231201e518d1b6000bffd) [#1639](https://github.com/emotion-js/emotion/pull/1639) Thanks [@Andarist](https://github.com/Andarist)! - `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps.
 
@@ -153,3 +202,3 @@ ## 11.0.0-next.4
 
-- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
+- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1602](https://github.com/emotion-js/emotion/pull/1602) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
 
@@ -156,0 +205,0 @@ ## 10.0.33

package.json

 {
   "name": "@emotion/babel-plugin",
-  "version": "11.0.0-rc.0",
+  "version": "11.0.0",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
-  "main": "dist/babel-plugin.cjs.js",
-  "module": "dist/babel-plugin.esm.js",
+  "main": "dist/emotion-babel-plugin.cjs.js",
+  "module": "dist/emotion-babel-plugin.esm.js",
   "files": [
@@ -17,10 +17,10 @@ "src",
     "@babel/helper-module-imports": "^7.7.0",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
     "@babel/runtime": "^7.7.2",
     "@emotion/hash": "^0.8.0",
     "@emotion/memoize": "^0.7.4",
-    "@emotion/serialize": "^1.0.0-rc.0",
+    "@emotion/serialize": "^1.0.0",
     "babel-plugin-macros": "^2.6.1",
     "convert-source-map": "^1.5.0",
-    "escape-string-regexp": "^1.0.5",
+    "escape-string-regexp": "^4.0.0",
     "find-root": "^1.1.0",
@@ -27,0 +27,0 @@ "source-map": "^0.5.7",

src/index.js

@@ -151,3 +151,3 @@ // @flow
         let macros = {}
-        let jsxCoreImports: Array<{
+        let jsxReactImports: Array<{
           importSource: string,
@@ -159,3 +159,3 @@ export: string,
         ]
-        state.jsxCoreImport = jsxCoreImports[0]
+        state.jsxReactImport = jsxReactImports[0]
         Object.keys(state.opts.importMap || {}).forEach(importSource => {
@@ -168,3 +168,3 @@ let value = state.opts.importMap[importSource]
             if (packageName === '@emotion/react' && exportName === 'jsx') {
-              jsxCoreImports.push({
+              jsxReactImports.push({
                 importSource,
@@ -197,3 +197,5 @@ export: localExportName,
               // and let correct value to be set if coming in options
-              extraOptions = { styledBaseImport: undefined }
+              extraOptions = {
+                styledBaseImport: undefined
+              }
             }
@@ -209,3 +211,7 @@
               exportTransformer,
-              { ...defaultOptions, ...extraOptions, ...options }
+              {
+                ...defaultOptions,
+                ...extraOptions,
+                ...options
+              }
             ]
@@ -225,22 +231,24 @@ })
         }
-        if (state.opts.cssPropOptimization === undefined) {
-          for (const node of path.node.body) {
-            if (t.isImportDeclaration(node)) {
-              let jsxCoreImport = jsxCoreImports.find(
-                thing =>
-                  node.source.value === thing.importSource &&
-                  node.specifiers.some(
-                    x =>
-                      t.isImportSpecifier(x) && x.imported.name === thing.export
-                  )
-              )
-              if (jsxCoreImport) {
-                state.transformCssProp = true
-                state.jsxCoreImport = jsxCoreImport
-                break
-              }
+
+        for (const node of path.node.body) {
+          if (t.isImportDeclaration(node)) {
+            let jsxReactImport = jsxReactImports.find(
+              thing =>
+                node.source.value === thing.importSource &&
+                node.specifiers.some(
+                  x =>
+                    t.isImportSpecifier(x) && x.imported.name === thing.export
+                )
+            )
+            if (jsxReactImport) {
+              state.jsxReactImport = jsxReactImport
+              break
             }
           }
+        }
+
+        if (state.opts.cssPropOptimization === false) {
+          state.transformCssProp = false
         } else {
-          state.transformCssProp = state.opts.cssPropOptimization
+          state.transformCssProp = true
         }
@@ -271,3 +279,3 @@
               path,
-              cssImport: state.jsxCoreImport
+              cssImport: state.jsxReactImport
             })
@@ -274,0 +282,0 @@ }

src/utils/transform-expression-with-styles.js

@@ -98,28 +98,29 @@ // @flow
       ])
-      let node = prodNode
-      if (sourceMap) {
-        if (!state.emotionStringifiedCssId) {
-          const uid = state.file.scope.generateUidIdentifier(
-            '__EMOTION_STRINGIFIED_CSS_ERROR__'
-          )
-          state.emotionStringifiedCssId = uid
-          const cssObjectToString = t.functionDeclaration(
-            uid,
-            [],
-            t.blockStatement([
-              t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
-            ])
-          )
-          cssObjectToString._compact = true
-          state.file.path.unshiftContainer('body', [cssObjectToString])
-        }
 
-        if (label && autoLabel === 'dev-only') {
-          res = serializeStyles([`${cssString};label:${label};`])
-        }
+      if (!state.emotionStringifiedCssId) {
+        const uid = state.file.scope.generateUidIdentifier(
+          '__EMOTION_STRINGIFIED_CSS_ERROR__'
+        )
+        state.emotionStringifiedCssId = uid
+        const cssObjectToString = t.functionDeclaration(
+          uid,
+          [],
+          t.blockStatement([
+            t.returnStatement(t.stringLiteral(CSS_OBJECT_STRINGIFIED_ERROR))
+          ])
+        )
+        cssObjectToString._compact = true
+        state.file.path.unshiftContainer('body', [cssObjectToString])
+      }
 
-        let devNode = t.objectExpression([
+      if (label && autoLabel === 'dev-only') {
+        res = serializeStyles([`${cssString};label:${label};`])
+      }
+
+      let devNode = t.objectExpression(
+        [
           t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
           t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)),
-          t.objectProperty(t.identifier('map'), t.stringLiteral(sourceMap)),
+          sourceMap &&
+            t.objectProperty(t.identifier('map'), t.stringLiteral(sourceMap)),
           t.objectProperty(
@@ -129,7 +130,6 @@ t.identifier('toString'),
           )
-        ])
-        node = createNodeEnvConditional(t, prodNode, devNode)
-      }
+        ].filter(Boolean)
+      )
 
-      return node
+      return createNodeEnvConditional(t, prodNode, devNode)
     }
@@ -136,0 +136,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200677

increased by2.61%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Lines of code

4354

decreased by-0.16%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcaniuse-lite@1.0.30001683(transitive)

• + Addedelectron-to-chromium@1.5.64(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• - Removedcaniuse-lite@1.0.30001684(transitive)

• - Removedelectron-to-chromium@1.5.65(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• Updated@babel/plugin-syntax-jsx@^7.12.1

• Updated@emotion/serialize@^1.0.0

• Updatedescape-string-regexp@^4.0.0