babel-plugin-emotion - npm Package Compare versions

Comparing version 11.0.0-next.6 to 11.0.0-next.8

CHANGELOG.md

 # babel-plugin-emotion
 
+## 11.0.0-next.8
+
+### Minor Changes
+
+- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime.
+
+### Patch Changes
+
+- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]:
+  - @emotion/serialize@0.12.0-next.3
+
 ## 11.0.0-next.6
@@ -4,0 +15,0 @@

dist/babel-plugin-emotion.cjs.dev.js

@@ -878,3 +878,5 @@ 'use strict';
       path = _ref.path,
-      sourceMap = _ref.sourceMap;
+      sourceMap = _ref.sourceMap,
+      _ref$annotateAsPure = _ref.annotateAsPure,
+      annotateAsPure = _ref$annotateAsPure === void 0 ? true : _ref$annotateAsPure;
 
@@ -897,11 +899,10 @@ var _transformExpressionW = transformExpressionWithStyles({
     }
-  } else {
+  } else if (annotateAsPure) {
     path.addComment('leading', '#__PURE__');
   }
 };
-var transformInlineCsslessExpression = function transformInlineCsslessExpression(_ref2) {
+var transformCsslessArrayExpression = function transformCsslessArrayExpression(_ref2) {
   var state = _ref2.state,
       babel = _ref2.babel,
-      path = _ref2.path,
-      cssImport = _ref2.cssImport;
+      path = _ref2.path;
   var t = babel.types;
@@ -912,2 +913,25 @@ var expressionPath = path.get('value.expression');
   // it'll never appear in generated code
+  t.identifier('___shouldNeverAppearCSS'), path.node.value.expression.elements));
+  transformCssCallExpression({
+    babel: babel,
+    state: state,
+    path: expressionPath,
+    sourceMap: sourceMap,
+    annotateAsPure: false
+  });
+
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments));
+  }
+};
+var transformCsslessObjectExpression = function transformCsslessObjectExpression(_ref3) {
+  var state = _ref3.state,
+      babel = _ref3.babel,
+      path = _ref3.path,
+      cssImport = _ref3.cssImport;
+  var t = babel.types;
+  var expressionPath = path.get('value.expression');
+  var sourceMap = state.emotionSourceMap && path.node.loc !== undefined ? getSourceMap(path.node.loc.start, state) : '';
+  expressionPath.replaceWith(t.callExpression( // the name of this identifier doesn't really matter at all
+  // it'll never appear in generated code
   t.identifier('___shouldNeverAppearCSS'), [path.node.value.expression]));
@@ -926,6 +950,6 @@ transformCssCallExpression({
 
-var cssTransformer = function cssTransformer(_ref3) {
-  var state = _ref3.state,
-      babel = _ref3.babel,
-      reference = _ref3.reference;
+var cssTransformer = function cssTransformer(_ref4) {
+  var state = _ref4.state,
+      babel = _ref4.babel,
+      reference = _ref4.reference;
   transformCssCallExpression({
@@ -938,8 +962,8 @@ babel: babel,
 
-var globalTransformer = function globalTransformer(_ref4) {
-  var state = _ref4.state,
-      babel = _ref4.babel,
-      reference = _ref4.reference,
-      importSource = _ref4.importSource,
-      options = _ref4.options;
+var globalTransformer = function globalTransformer(_ref5) {
+  var state = _ref5.state,
+      babel = _ref5.babel,
+      reference = _ref5.reference,
+      importSource = _ref5.importSource,
+      options = _ref5.options;
   var t = babel.types;
@@ -959,15 +983,23 @@
 
-  if (t.isJSXExpressionContainer(stylesPropPath.node.value) && (t.isObjectExpression(stylesPropPath.node.value.expression) || t.isArrayExpression(stylesPropPath.node.value.expression))) {
-    transformInlineCsslessExpression({
-      state: state,
-      babel: babel,
-      path: stylesPropPath,
-      cssImport: options.cssExport !== undefined ? {
-        importSource: importSource,
-        cssExport: options.cssExport
-      } : {
-        importSource: '@emotion/core',
-        cssExport: 'css'
-      }
-    });
+  if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+    if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessArrayExpression({
+        state: state,
+        babel: babel,
+        path: stylesPropPath
+      });
+    } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessObjectExpression({
+        state: state,
+        babel: babel,
+        path: stylesPropPath,
+        cssImport: options.cssExport !== undefined ? {
+          importSource: importSource,
+          cssExport: options.cssExport
+        } : {
+          importSource: '@emotion/core',
+          cssExport: 'css'
+        }
+      });
+    }
   }
@@ -1229,9 +1261,17 @@ };
 
-        if (t.isJSXExpressionContainer(path.node.value) && (t.isObjectExpression(path.node.value.expression) || t.isArrayExpression(path.node.value.expression))) {
-          transformInlineCsslessExpression({
-            state: state,
-            babel: babel,
-            path: path,
-            cssImport: state.jsxCoreImport
-          });
+        if (t.isJSXExpressionContainer(path.node.value)) {
+          if (t.isArrayExpression(path.node.value.expression)) {
+            transformCsslessArrayExpression({
+              state: state,
+              babel: babel,
+              path: path
+            });
+          } else if (t.isObjectExpression(path.node.value.expression)) {
+            transformCsslessObjectExpression({
+              state: state,
+              babel: babel,
+              path: path,
+              cssImport: state.jsxCoreImport
+            });
+          }
         }
@@ -1238,0 +1278,0 @@ },

dist/babel-plugin-emotion.cjs.prod.js

@@ -411,3 +411,3 @@ "use strict";
 }, transformCssCallExpression = function(_ref) {
-  var state = _ref.state, babel = _ref.babel, path = _ref.path, sourceMap = _ref.sourceMap, _transformExpressionW = transformExpressionWithStyles({
+  var state = _ref.state, babel = _ref.babel, path = _ref.path, sourceMap = _ref.sourceMap, _ref$annotateAsPure = _ref.annotateAsPure, annotateAsPure = void 0 === _ref$annotateAsPure || _ref$annotateAsPure, _transformExpressionW = transformExpressionWithStyles({
     babel: babel,
@@ -419,5 +419,15 @@ state: state,
   }), node = _transformExpressionW.node, isPure = _transformExpressionW.isPure;
-  node ? (path.replaceWith(node), isPure && path.hoist()) : path.addComment("leading", "#__PURE__");
-}, transformInlineCsslessExpression = function(_ref2) {
-  var state = _ref2.state, babel = _ref2.babel, path = _ref2.path, cssImport = _ref2.cssImport, t = babel.types, expressionPath = path.get("value.expression"), sourceMap = state.emotionSourceMap && void 0 !== path.node.loc ? getSourceMap(path.node.loc.start, state) : "";
+  node ? (path.replaceWith(node), isPure && path.hoist()) : annotateAsPure && path.addComment("leading", "#__PURE__");
+}, transformCsslessArrayExpression = function(_ref2) {
+  var state = _ref2.state, babel = _ref2.babel, path = _ref2.path, t = babel.types, expressionPath = path.get("value.expression"), sourceMap = state.emotionSourceMap && void 0 !== path.node.loc ? getSourceMap(path.node.loc.start, state) : "";
+  expressionPath.replaceWith(t.callExpression(t.identifier("___shouldNeverAppearCSS"), path.node.value.expression.elements)), 
+  transformCssCallExpression({
+    babel: babel,
+    state: state,
+    path: expressionPath,
+    sourceMap: sourceMap,
+    annotateAsPure: !1
+  }), t.isCallExpression(expressionPath) && expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments));
+}, transformCsslessObjectExpression = function(_ref3) {
+  var state = _ref3.state, babel = _ref3.babel, path = _ref3.path, cssImport = _ref3.cssImport, t = babel.types, expressionPath = path.get("value.expression"), sourceMap = state.emotionSourceMap && void 0 !== path.node.loc ? getSourceMap(path.node.loc.start, state) : "";
   expressionPath.replaceWith(t.callExpression(t.identifier("___shouldNeverAppearCSS"), [ path.node.value.expression ])), 
@@ -430,4 +440,4 @@ transformCssCallExpression({
   }), t.isCallExpression(expressionPath) && expressionPath.get("callee").replaceWith(addImport(state, cssImport.importSource, cssImport.cssExport, "css"));
-}, cssTransformer = function(_ref3) {
-  var state = _ref3.state, babel = _ref3.babel, reference = _ref3.reference;
+}, cssTransformer = function(_ref4) {
+  var state = _ref4.state, babel = _ref4.babel, reference = _ref4.reference;
   transformCssCallExpression({
@@ -438,4 +448,4 @@ babel: babel,
   });
-}, globalTransformer = function(_ref4) {
-  var state = _ref4.state, babel = _ref4.babel, reference = _ref4.reference, importSource = _ref4.importSource, options = _ref4.options, t = babel.types;
+}, globalTransformer = function(_ref5) {
+  var state = _ref5.state, babel = _ref5.babel, reference = _ref5.reference, importSource = _ref5.importSource, options = _ref5.options, t = babel.types;
   if (t.isJSXIdentifier(reference.node) && t.isJSXOpeningElement(reference.parentPath.node)) {
@@ -445,5 +455,9 @@ var stylesPropPath = reference.parentPath.get("attributes").find((function(p) {
     }));
-    stylesPropPath && t.isJSXExpressionContainer(stylesPropPath.node.value) && (t.isObjectExpression(stylesPropPath.node.value.expression) || t.isArrayExpression(stylesPropPath.node.value.expression)) && transformInlineCsslessExpression({
+    stylesPropPath && t.isJSXExpressionContainer(stylesPropPath.node.value) && (t.isArrayExpression(stylesPropPath.node.value.expression) ? transformCsslessArrayExpression({
       state: state,
       babel: babel,
+      path: stylesPropPath
+    }) : t.isObjectExpression(stylesPropPath.node.value.expression) && transformCsslessObjectExpression({
+      state: state,
+      babel: babel,
       path: stylesPropPath,
@@ -457,3 +471,3 @@ cssImport: void 0 !== options.cssExport ? {
       }
-    });
+    }));
   }
@@ -605,8 +619,12 @@ }, transformers$1 = {
       JSXAttribute: function(path, state) {
-        "css" === path.node.name.name && state.transformCssProp && t.isJSXExpressionContainer(path.node.value) && (t.isObjectExpression(path.node.value.expression) || t.isArrayExpression(path.node.value.expression)) && transformInlineCsslessExpression({
+        "css" === path.node.name.name && state.transformCssProp && t.isJSXExpressionContainer(path.node.value) && (t.isArrayExpression(path.node.value.expression) ? transformCsslessArrayExpression({
           state: state,
           babel: babel,
+          path: path
+        }) : t.isObjectExpression(path.node.value.expression) && transformCsslessObjectExpression({
+          state: state,
+          babel: babel,
           path: path,
           cssImport: state.jsxCoreImport
-        });
+        }));
       },
@@ -613,0 +631,0 @@ CallExpression: {

dist/babel-plugin-emotion.esm.js

@@ -872,3 +872,5 @@ import _extends from '@babel/runtime/helpers/esm/extends';
       path = _ref.path,
-      sourceMap = _ref.sourceMap;
+      sourceMap = _ref.sourceMap,
+      _ref$annotateAsPure = _ref.annotateAsPure,
+      annotateAsPure = _ref$annotateAsPure === void 0 ? true : _ref$annotateAsPure;
 
@@ -891,11 +893,10 @@ var _transformExpressionW = transformExpressionWithStyles({
     }
-  } else {
+  } else if (annotateAsPure) {
     path.addComment('leading', '#__PURE__');
   }
 };
-var transformInlineCsslessExpression = function transformInlineCsslessExpression(_ref2) {
+var transformCsslessArrayExpression = function transformCsslessArrayExpression(_ref2) {
   var state = _ref2.state,
       babel = _ref2.babel,
-      path = _ref2.path,
-      cssImport = _ref2.cssImport;
+      path = _ref2.path;
   var t = babel.types;
@@ -906,2 +907,25 @@ var expressionPath = path.get('value.expression');
   // it'll never appear in generated code
+  t.identifier('___shouldNeverAppearCSS'), path.node.value.expression.elements));
+  transformCssCallExpression({
+    babel: babel,
+    state: state,
+    path: expressionPath,
+    sourceMap: sourceMap,
+    annotateAsPure: false
+  });
+
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments));
+  }
+};
+var transformCsslessObjectExpression = function transformCsslessObjectExpression(_ref3) {
+  var state = _ref3.state,
+      babel = _ref3.babel,
+      path = _ref3.path,
+      cssImport = _ref3.cssImport;
+  var t = babel.types;
+  var expressionPath = path.get('value.expression');
+  var sourceMap = state.emotionSourceMap && path.node.loc !== undefined ? getSourceMap(path.node.loc.start, state) : '';
+  expressionPath.replaceWith(t.callExpression( // the name of this identifier doesn't really matter at all
+  // it'll never appear in generated code
   t.identifier('___shouldNeverAppearCSS'), [path.node.value.expression]));
@@ -920,6 +944,6 @@ transformCssCallExpression({
 
-var cssTransformer = function cssTransformer(_ref3) {
-  var state = _ref3.state,
-      babel = _ref3.babel,
-      reference = _ref3.reference;
+var cssTransformer = function cssTransformer(_ref4) {
+  var state = _ref4.state,
+      babel = _ref4.babel,
+      reference = _ref4.reference;
   transformCssCallExpression({
@@ -932,8 +956,8 @@ babel: babel,
 
-var globalTransformer = function globalTransformer(_ref4) {
-  var state = _ref4.state,
-      babel = _ref4.babel,
-      reference = _ref4.reference,
-      importSource = _ref4.importSource,
-      options = _ref4.options;
+var globalTransformer = function globalTransformer(_ref5) {
+  var state = _ref5.state,
+      babel = _ref5.babel,
+      reference = _ref5.reference,
+      importSource = _ref5.importSource,
+      options = _ref5.options;
   var t = babel.types;
@@ -953,15 +977,23 @@
 
-  if (t.isJSXExpressionContainer(stylesPropPath.node.value) && (t.isObjectExpression(stylesPropPath.node.value.expression) || t.isArrayExpression(stylesPropPath.node.value.expression))) {
-    transformInlineCsslessExpression({
-      state: state,
-      babel: babel,
-      path: stylesPropPath,
-      cssImport: options.cssExport !== undefined ? {
-        importSource: importSource,
-        cssExport: options.cssExport
-      } : {
-        importSource: '@emotion/core',
-        cssExport: 'css'
-      }
-    });
+  if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+    if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessArrayExpression({
+        state: state,
+        babel: babel,
+        path: stylesPropPath
+      });
+    } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessObjectExpression({
+        state: state,
+        babel: babel,
+        path: stylesPropPath,
+        cssImport: options.cssExport !== undefined ? {
+          importSource: importSource,
+          cssExport: options.cssExport
+        } : {
+          importSource: '@emotion/core',
+          cssExport: 'css'
+        }
+      });
+    }
   }
@@ -1223,9 +1255,17 @@ };
 
-        if (t.isJSXExpressionContainer(path.node.value) && (t.isObjectExpression(path.node.value.expression) || t.isArrayExpression(path.node.value.expression))) {
-          transformInlineCsslessExpression({
-            state: state,
-            babel: babel,
-            path: path,
-            cssImport: state.jsxCoreImport
-          });
+        if (t.isJSXExpressionContainer(path.node.value)) {
+          if (t.isArrayExpression(path.node.value.expression)) {
+            transformCsslessArrayExpression({
+              state: state,
+              babel: babel,
+              path: path
+            });
+          } else if (t.isObjectExpression(path.node.value.expression)) {
+            transformCsslessObjectExpression({
+              state: state,
+              babel: babel,
+              path: path,
+              cssImport: state.jsxCoreImport
+            });
+          }
         }
@@ -1232,0 +1272,0 @@ },

package.json

 {
   "name": "babel-plugin-emotion",
-  "version": "11.0.0-next.6",
+  "version": "11.0.0-next.8",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
@@ -21,3 +21,3 @@ "main": "dist/babel-plugin-emotion.cjs.js",
     "@emotion/memoize": "0.7.3",
-    "@emotion/serialize": "^0.11.15-next.1",
+    "@emotion/serialize": "^0.12.0-next.3",
     "babel-plugin-macros": "^2.6.1",
@@ -24,0 +24,0 @@ "convert-source-map": "^1.5.0",

src/core-macro.js

@@ -13,3 +13,4 @@ // @flow
   path,
-  sourceMap
+  sourceMap,
+  annotateAsPure = true
 }: {
@@ -19,3 +20,4 @@ state: *,
   path: *,
-  sourceMap?: string
+  sourceMap?: string,
+  annotateAsPure?: boolean
 }) => {
@@ -34,3 +36,3 @@ let { node, isPure } = transformExpressionWithStyles({
     }
-  } else {
+  } else if (annotateAsPure) {
     path.addComment('leading', '#__PURE__')
@@ -40,5 +42,43 @@ }
 
-export const transformInlineCsslessExpression = ({
+export const transformCsslessArrayExpression = ({
   state,
   babel,
+  path
+}: {
+  babel: *,
+  state: *,
+  path: *
+}) => {
+  let t = babel.types
+  let expressionPath = path.get('value.expression')
+  let sourceMap =
+    state.emotionSourceMap && path.node.loc !== undefined
+      ? getSourceMap(path.node.loc.start, state)
+      : ''
+
+  expressionPath.replaceWith(
+    t.callExpression(
+      // the name of this identifier doesn't really matter at all
+      // it'll never appear in generated code
+      t.identifier('___shouldNeverAppearCSS'),
+      path.node.value.expression.elements
+    )
+  )
+
+  transformCssCallExpression({
+    babel,
+    state,
+    path: expressionPath,
+    sourceMap,
+    annotateAsPure: false
+  })
+
+  if (t.isCallExpression(expressionPath)) {
+    expressionPath.replaceWith(t.arrayExpression(expressionPath.node.arguments))
+  }
+}
+
+export const transformCsslessObjectExpression = ({
+  state,
+  babel,
   path,
@@ -126,22 +166,26 @@ cssImport
 
-  if (
-    t.isJSXExpressionContainer(stylesPropPath.node.value) &&
-    (t.isObjectExpression(stylesPropPath.node.value.expression) ||
-      t.isArrayExpression(stylesPropPath.node.value.expression))
-  ) {
-    transformInlineCsslessExpression({
-      state,
-      babel,
-      path: stylesPropPath,
-      cssImport:
-        options.cssExport !== undefined
-          ? {
-              importSource,
-              cssExport: options.cssExport
-            }
-          : {
-              importSource: '@emotion/core',
-              cssExport: 'css'
-            }
-    })
+  if (t.isJSXExpressionContainer(stylesPropPath.node.value)) {
+    if (t.isArrayExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessArrayExpression({
+        state,
+        babel,
+        path: stylesPropPath
+      })
+    } else if (t.isObjectExpression(stylesPropPath.node.value.expression)) {
+      transformCsslessObjectExpression({
+        state,
+        babel,
+        path: stylesPropPath,
+        cssImport:
+          options.cssExport !== undefined
+            ? {
+                importSource,
+                cssExport: options.cssExport
+              }
+            : {
+                importSource: '@emotion/core',
+                cssExport: 'css'
+              }
+      })
+    }
   }
@@ -148,0 +192,0 @@ }

src/index.js

@@ -10,3 +10,4 @@ // @flow
   transformers as coreTransformers,
-  transformInlineCsslessExpression
+  transformCsslessArrayExpression,
+  transformCsslessObjectExpression
 } from './core-macro'
@@ -240,13 +241,17 @@ import { getStyledOptions, createTransformerMacro } from './utils'
 
-        if (
-          t.isJSXExpressionContainer(path.node.value) &&
-          (t.isObjectExpression(path.node.value.expression) ||
-            t.isArrayExpression(path.node.value.expression))
-        ) {
-          transformInlineCsslessExpression({
-            state,
-            babel,
-            path,
-            cssImport: state.jsxCoreImport
-          })
+        if (t.isJSXExpressionContainer(path.node.value)) {
+          if (t.isArrayExpression(path.node.value.expression)) {
+            transformCsslessArrayExpression({
+              state,
+              babel,
+              path
+            })
+          } else if (t.isObjectExpression(path.node.value.expression)) {
+            transformCsslessObjectExpression({
+              state,
+              babel,
+              path,
+              cssImport: state.jsxCoreImport
+            })
+          }
         }
@@ -253,0 +258,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

179992

increased by3.23%

Lines of code

4164

increased by3.5%

Dependency changes

• + Added@emotion/serialize@0.12.0-next.3(transitive)

• + Added@emotion/unitless@0.7.4(transitive)

• + Added@emotion/utils@0.11.2(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• Updated@emotion/serialize@^0.12.0-next.3