@emotion/babel-plugin - npm Package Compare versions

Comparing version 11.1.2 to 11.2.0

CHANGELOG.md

 # @emotion/babel-plugin
 
+## 11.2.0
+
+### Patch Changes
+
+- [`c9b57f36`](https://github.com/emotion-js/emotion/commit/c9b57f36e99f8cfe86c971ddb29c7a5d70644bc1) [#2157](https://github.com/emotion-js/emotion/pull/2157) Thanks [@Andarist](https://github.com/Andarist)! - Fixed an issue with `styled` transformer not respecting `autoLabel: 'dev-only'` setting.
+
 ## 11.1.2
@@ -4,0 +10,0 @@

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

@@ -555,4 +555,2 @@ 'use strict';
 
-var CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-
 function createNodeEnvConditional(t, production, development) {
@@ -562,2 +560,3 @@ return t.conditionalExpression(t.binaryExpression('===', t.memberExpression(t.memberExpression(t.identifier('process'), t.identifier('env')), t.identifier('NODE_ENV')), t.stringLiteral('production')), production, development);
 
+var CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 var transformExpressionWithStyles = function transformExpressionWithStyles(_ref) {
@@ -651,2 +650,10 @@ var babel = _ref.babel,
 
+var createObjectSpreadLike = function createObjectSpreadLike(t, file) {
+  for (var _len = arguments.length, objs = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    objs[_key - 2] = arguments[_key];
+  }
+
+  return t.callExpression(file.addHelper('extends'), [t.objectExpression([])].concat(objs));
+};
+
 var getStyledOptions = function getStyledOptions(t, path, state) {
@@ -656,25 +663,42 @@ var autoLabel = state.opts.autoLabel || 'dev-only';
   var optionsArgument = args.length >= 2 ? args[1] : null;
-  var properties = [];
+  var prodProperties = [];
+  var devProperties = null;
   var knownProperties = optionsArgument && t.isObjectExpression(optionsArgument) ? getKnownProperties(t, optionsArgument) : new Set();
 
   if (!knownProperties.has('target')) {
-    properties.push(t.objectProperty(t.identifier('target'), t.stringLiteral(getTargetClassName(state))));
+    prodProperties.push(t.objectProperty(t.identifier('target'), t.stringLiteral(getTargetClassName(state))));
   }
 
-  var label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null;
+  var label = autoLabel !== 'never' && !knownProperties.has('label') ? getLabelFromPath(path, state, t) : null;
 
-  if (label && !knownProperties.has('label')) {
-    properties.push(t.objectProperty(t.identifier('label'), t.stringLiteral(label)));
+  if (label) {
+    var labelNode = t.objectProperty(t.identifier('label'), t.stringLiteral(label));
+
+    switch (autoLabel) {
+      case 'always':
+        prodProperties.push(labelNode);
+        break;
+
+      case 'dev-only':
+        devProperties = [labelNode];
+        break;
+    }
   }
 
   if (optionsArgument) {
+    // for some reason `.withComponent` transformer gets requeued
+    // so check if this has been already transpiled to avoid double wrapping
+    if (t.isConditionalExpression(optionsArgument) && t.isBinaryExpression(optionsArgument.test) && t.buildMatchMemberExpression('process.env.NODE_ENV')(optionsArgument.test.left)) {
+      return optionsArgument;
+    }
+
     if (!t.isObjectExpression(optionsArgument)) {
-      return t.callExpression(state.file.addHelper('extends'), [t.objectExpression([]), t.objectExpression(properties), optionsArgument]);
+      var prodNode = createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties), optionsArgument);
+      return devProperties ? createNodeEnvConditional(t, prodNode, t.cloneNode(createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties.concat(devProperties)), optionsArgument))) : prodNode;
     }
 
-    properties.unshift.apply(properties, optionsArgument.properties);
+    prodProperties.unshift.apply(prodProperties, optionsArgument.properties);
   }
 
-  return t.objectExpression( // $FlowFixMe
-  properties);
+  return devProperties ? createNodeEnvConditional(t, t.objectExpression(prodProperties), t.cloneNode(t.objectExpression(prodProperties.concat(devProperties)))) : t.objectExpression(prodProperties);
 };
@@ -681,0 +705,0 @@

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

@@ -247,3 +247,3 @@ "use strict";
   }), []);
-}, CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+};
 
@@ -254,3 +254,3 @@ function createNodeEnvConditional(t, production, development) {
 
-var transformExpressionWithStyles = function(_ref) {
+var CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).", transformExpressionWithStyles = function(_ref) {
   var babel = _ref.babel, state = _ref.state, path = _ref.path, shouldLabel = _ref.shouldLabel, _ref$sourceMap = _ref.sourceMap, sourceMap = void 0 === _ref$sourceMap ? "" : _ref$sourceMap, autoLabel = state.opts.autoLabel || "dev-only", t = babel.types;
@@ -301,12 +301,29 @@ if (t.isTaggedTemplateExpression(path) && (!sourceMap && state.emotionSourceMap && void 0 !== path.node.quasi.loc && (sourceMap = getSourceMap(path.node.quasi.loc.start, state)),
   })));
+}, createObjectSpreadLike = function(t, file) {
+  for (var _len = arguments.length, objs = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) objs[_key - 2] = arguments[_key];
+  return t.callExpression(file.addHelper("extends"), [ t.objectExpression([]) ].concat(objs));
 }, getStyledOptions = function(t, path, state) {
-  var autoLabel = state.opts.autoLabel || "dev-only", args = path.node.arguments, optionsArgument = args.length >= 2 ? args[1] : null, properties = [], knownProperties = optionsArgument && t.isObjectExpression(optionsArgument) ? getKnownProperties(t, optionsArgument) : new Set;
-  knownProperties.has("target") || properties.push(t.objectProperty(t.identifier("target"), t.stringLiteral(getTargetClassName(state))));
-  var label = "never" !== autoLabel ? getLabelFromPath(path, state, t) : null;
-  if (label && !knownProperties.has("label") && properties.push(t.objectProperty(t.identifier("label"), t.stringLiteral(label))), 
-  optionsArgument) {
-    if (!t.isObjectExpression(optionsArgument)) return t.callExpression(state.file.addHelper("extends"), [ t.objectExpression([]), t.objectExpression(properties), optionsArgument ]);
-    properties.unshift.apply(properties, optionsArgument.properties);
+  var autoLabel = state.opts.autoLabel || "dev-only", args = path.node.arguments, optionsArgument = args.length >= 2 ? args[1] : null, prodProperties = [], devProperties = null, knownProperties = optionsArgument && t.isObjectExpression(optionsArgument) ? getKnownProperties(t, optionsArgument) : new Set;
+  knownProperties.has("target") || prodProperties.push(t.objectProperty(t.identifier("target"), t.stringLiteral(getTargetClassName(state))));
+  var label = "never" === autoLabel || knownProperties.has("label") ? null : getLabelFromPath(path, state, t);
+  if (label) {
+    var labelNode = t.objectProperty(t.identifier("label"), t.stringLiteral(label));
+    switch (autoLabel) {
+     case "always":
+      prodProperties.push(labelNode);
+      break;
+
+     case "dev-only":
+      devProperties = [ labelNode ];
+    }
   }
-  return t.objectExpression(properties);
+  if (optionsArgument) {
+    if (t.isConditionalExpression(optionsArgument) && t.isBinaryExpression(optionsArgument.test) && t.buildMatchMemberExpression("process.env.NODE_ENV")(optionsArgument.test.left)) return optionsArgument;
+    if (!t.isObjectExpression(optionsArgument)) {
+      var prodNode = createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties), optionsArgument);
+      return devProperties ? createNodeEnvConditional(t, prodNode, t.cloneNode(createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties.concat(devProperties)), optionsArgument))) : prodNode;
+    }
+    prodProperties.unshift.apply(prodProperties, optionsArgument.properties);
+  }
+  return devProperties ? createNodeEnvConditional(t, t.objectExpression(prodProperties), t.cloneNode(t.objectExpression(prodProperties.concat(devProperties)))) : t.objectExpression(prodProperties);
 };
@@ -313,0 +330,0 @@

dist/emotion-babel-plugin.esm.js

@@ -539,4 +539,2 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 
-var CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-
 function createNodeEnvConditional(t, production, development) {
@@ -546,2 +544,3 @@ return t.conditionalExpression(t.binaryExpression('===', t.memberExpression(t.memberExpression(t.identifier('process'), t.identifier('env')), t.identifier('NODE_ENV')), t.stringLiteral('production')), production, development);
 
+var CSS_OBJECT_STRINGIFIED_ERROR = "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 var transformExpressionWithStyles = function transformExpressionWithStyles(_ref) {
@@ -635,2 +634,10 @@ var babel = _ref.babel,
 
+var createObjectSpreadLike = function createObjectSpreadLike(t, file) {
+  for (var _len = arguments.length, objs = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    objs[_key - 2] = arguments[_key];
+  }
+
+  return t.callExpression(file.addHelper('extends'), [t.objectExpression([])].concat(objs));
+};
+
 var getStyledOptions = function getStyledOptions(t, path, state) {
@@ -640,25 +647,42 @@ var autoLabel = state.opts.autoLabel || 'dev-only';
   var optionsArgument = args.length >= 2 ? args[1] : null;
-  var properties = [];
+  var prodProperties = [];
+  var devProperties = null;
   var knownProperties = optionsArgument && t.isObjectExpression(optionsArgument) ? getKnownProperties(t, optionsArgument) : new Set();
 
   if (!knownProperties.has('target')) {
-    properties.push(t.objectProperty(t.identifier('target'), t.stringLiteral(getTargetClassName(state))));
+    prodProperties.push(t.objectProperty(t.identifier('target'), t.stringLiteral(getTargetClassName(state))));
   }
 
-  var label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null;
+  var label = autoLabel !== 'never' && !knownProperties.has('label') ? getLabelFromPath(path, state, t) : null;
 
-  if (label && !knownProperties.has('label')) {
-    properties.push(t.objectProperty(t.identifier('label'), t.stringLiteral(label)));
+  if (label) {
+    var labelNode = t.objectProperty(t.identifier('label'), t.stringLiteral(label));
+
+    switch (autoLabel) {
+      case 'always':
+        prodProperties.push(labelNode);
+        break;
+
+      case 'dev-only':
+        devProperties = [labelNode];
+        break;
+    }
   }
 
   if (optionsArgument) {
+    // for some reason `.withComponent` transformer gets requeued
+    // so check if this has been already transpiled to avoid double wrapping
+    if (t.isConditionalExpression(optionsArgument) && t.isBinaryExpression(optionsArgument.test) && t.buildMatchMemberExpression('process.env.NODE_ENV')(optionsArgument.test.left)) {
+      return optionsArgument;
+    }
+
     if (!t.isObjectExpression(optionsArgument)) {
-      return t.callExpression(state.file.addHelper('extends'), [t.objectExpression([]), t.objectExpression(properties), optionsArgument]);
+      var prodNode = createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties), optionsArgument);
+      return devProperties ? createNodeEnvConditional(t, prodNode, t.cloneNode(createObjectSpreadLike(t, state.file, t.objectExpression(prodProperties.concat(devProperties)), optionsArgument))) : prodNode;
     }
 
-    properties.unshift.apply(properties, optionsArgument.properties);
+    prodProperties.unshift.apply(prodProperties, optionsArgument.properties);
   }
 
-  return t.objectExpression( // $FlowFixMe
-  properties);
+  return devProperties ? createNodeEnvConditional(t, t.objectExpression(prodProperties), t.cloneNode(t.objectExpression(prodProperties.concat(devProperties)))) : t.objectExpression(prodProperties);
 };
@@ -665,0 +689,0 @@

package.json

 {
   "name": "@emotion/babel-plugin",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
@@ -5,0 +5,0 @@ "main": "dist/emotion-babel-plugin.cjs.js",

src/utils/get-styled-options.js

 // @flow
 import { getLabelFromPath } from './label'
 import { getTargetClassName } from './get-target-class-name'
+import createNodeEnvConditional from './create-node-env-conditional'
 
@@ -12,2 +13,5 @@ const getKnownProperties = (t: *, node: *) =>
 
+const createObjectSpreadLike = (t, file, ...objs) =>
+  t.callExpression(file.addHelper('extends'), [t.objectExpression([]), ...objs])
+
 export let getStyledOptions = (t: *, path: *, state: *) => {
@@ -19,3 +23,4 @@ const autoLabel = state.opts.autoLabel || 'dev-only'
 
-  let properties = []
+  let prodProperties = []
+  let devProperties = null
   let knownProperties =
@@ -27,3 +32,3 @@ optionsArgument && t.isObjectExpression(optionsArgument)
   if (!knownProperties.has('target')) {
-    properties.push(
+    prodProperties.push(
       t.objectProperty(
@@ -36,26 +41,67 @@ t.identifier('target'),
 
-  let label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null
+  let label =
+    autoLabel !== 'never' && !knownProperties.has('label')
+      ? getLabelFromPath(path, state, t)
+      : null
 
-  if (label && !knownProperties.has('label')) {
-    properties.push(
-      t.objectProperty(t.identifier('label'), t.stringLiteral(label))
+  if (label) {
+    const labelNode = t.objectProperty(
+      t.identifier('label'),
+      t.stringLiteral(label)
     )
+    switch (autoLabel) {
+      case 'always':
+        prodProperties.push(labelNode)
+        break
+      case 'dev-only':
+        devProperties = [labelNode]
+        break
+    }
   }
 
   if (optionsArgument) {
+    // for some reason `.withComponent` transformer gets requeued
+    // so check if this has been already transpiled to avoid double wrapping
+    if (
+      t.isConditionalExpression(optionsArgument) &&
+      t.isBinaryExpression(optionsArgument.test) &&
+      t.buildMatchMemberExpression('process.env.NODE_ENV')(
+        optionsArgument.test.left
+      )
+    ) {
+      return optionsArgument
+    }
     if (!t.isObjectExpression(optionsArgument)) {
-      return t.callExpression(state.file.addHelper('extends'), [
-        t.objectExpression([]),
-        t.objectExpression(properties),
+      const prodNode = createObjectSpreadLike(
+        t,
+        state.file,
+        t.objectExpression(prodProperties),
         optionsArgument
-      ])
+      )
+      return devProperties
+        ? createNodeEnvConditional(
+            t,
+            prodNode,
+            t.cloneNode(
+              createObjectSpreadLike(
+                t,
+                state.file,
+                t.objectExpression(prodProperties.concat(devProperties)),
+                optionsArgument
+              )
+            )
+          )
+        : prodNode
     }
 
-    properties.unshift(...optionsArgument.properties)
+    prodProperties.unshift(...optionsArgument.properties)
   }
 
-  return t.objectExpression(
-    // $FlowFixMe
-    properties
-  )
+  return devProperties
+    ? createNodeEnvConditional(
+        t,
+        t.objectExpression(prodProperties),
+        t.cloneNode(t.objectExpression(prodProperties.concat(devProperties)))
+      )
+    : t.objectExpression(prodProperties)
 }

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

@@ -12,2 +12,3 @@ // @flow
 } from './strings'
+import createNodeEnvConditional from './create-node-env-conditional'
 
@@ -17,17 +18,2 @@ const CSS_OBJECT_STRINGIFIED_ERROR =
 
-function createNodeEnvConditional(t, production, development) {
-  return t.conditionalExpression(
-    t.binaryExpression(
-      '===',
-      t.memberExpression(
-        t.memberExpression(t.identifier('process'), t.identifier('env')),
-        t.identifier('NODE_ENV')
-      ),
-      t.stringLiteral('production')
-    ),
-    production,
-    development
-  )
-}
-
 export let transformExpressionWithStyles = ({
@@ -34,0 +20,0 @@ babel,

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

206514

increased by2.64%

Number of package files

26

increased by4%

Lines of code

4458

increased by2.39%

No dependency changes