babel-plugin-emotion - npm Package Compare versions

Comparing version 10.0.0-beta.5 to 10.0.0-beta.6

dist/index.dev.js

@@ -250,13 +250,18 @@ 'use strict';
   var generatorOpts = getGeneratorOpts(state.file);
-  generator.addMapping({
-    generated: {
-      line: 1,
-      column: 0
-    },
-    source: generatorOpts.sourceFileName,
-    original: offset
-  });
-  return convert.fromObject(generator).toComment({
-    multiline: true
-  });
+
+  if (generatorOpts.sourceFileName) {
+    generator.addMapping({
+      generated: {
+        line: 1,
+        column: 0
+      },
+      source: generatorOpts.sourceFileName,
+      original: offset
+    });
+    return convert.fromObject(generator).toComment({
+      multiline: true
+    });
+  }
+
+  return '';
 }
@@ -374,2 +379,6 @@
 
+function createSourceMapConditional(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);
+}
+
 var transformExpressionWithStyles = function transformExpressionWithStyles(_ref) {
@@ -379,5 +388,6 @@ var babel = _ref.babel,
       path = _ref.path,
-      shouldLabel = _ref.shouldLabel;
+      shouldLabel = _ref.shouldLabel,
+      _ref$sourceMap = _ref.sourceMap,
+      sourceMap$$1 = _ref$sourceMap === void 0 ? '' : _ref$sourceMap;
   var t = babel.types;
-  var sourceMap$$1 = '';
 
@@ -401,3 +411,2 @@ if (t.isTaggedTemplateExpression(path)) {
 
-    var node;
     var isPure = true;
@@ -415,8 +424,4 @@ path.get('arguments').forEach(function (node) {
 
-    if (state.emotionSourceMap) {
-      if (!sourceMap$$1 && path.node.loc !== undefined) {
-        sourceMap$$1 = getSourceMap(path.node.loc.start, state);
-      }
-
-      appendStringToExpressions(path.node.arguments, sourceMap$$1, t);
+    if (state.emotionSourceMap && !sourceMap$$1 && path.node.loc !== undefined) {
+      sourceMap$$1 = getSourceMap(path.node.loc.start, state);
     }
@@ -427,7 +432,30 @@
       var res = serialize.serializeStyles({}, [cssString]);
-      node = t.objectExpression([t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)), t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)), res.map && t.objectProperty(t.identifier('map'), t.stringLiteral(res.map))].filter(Boolean));
+      var prodNode = t.objectExpression([t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)), t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))]);
+      var node = prodNode;
+
+      if (sourceMap$$1) {
+        var 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$$1))]);
+        node = createSourceMapConditional(t, prodNode, devNode);
+      }
+
+      return {
+        node: node,
+        isPure: true
+      };
     }
 
+    if (sourceMap$$1) {
+      var lastIndex = path.node.arguments.length - 1;
+      var last = path.node.arguments[lastIndex];
+      var sourceMapConditional = createSourceMapConditional(t, t.stringLiteral(''), t.stringLiteral(sourceMap$$1));
+
+      if (t.isStringLiteral(last)) {
+        path.node.arguments[lastIndex] = t.binaryExpression('+', last, sourceMapConditional);
+      } else {
+        path.node.arguments.push(sourceMapConditional);
+      }
+    }
+
     return {
-      node: node,
+      node: undefined,
       isPure: isPure
@@ -471,2 +499,3 @@ };
         babel = _ref.babel;
+    state.emotionSourceMap = true;
     var t = babel.types;
@@ -528,2 +557,3 @@ Object.keys(references).forEach(function (referenceKey) {
         babel = _ref2.babel;
+    state.emotionSourceMap = true;
     var t = babel.types;
@@ -575,3 +605,4 @@
       state = _ref.state,
-      path = _ref.path;
+      path = _ref.path,
+      sourceMap$$1 = _ref.sourceMap;
 
@@ -582,3 +613,4 @@ var _transformExpressionW = transformExpressionWithStyles({
     path: path,
-    shouldLabel: true
+    shouldLabel: true,
+    sourceMap: sourceMap$$1
   }),
@@ -602,2 +634,3 @@ node = _transformExpressionW.node,
       babel = _ref2.babel;
+  state.emotionSourceMap = true;
   var t = babel.types;
@@ -793,3 +826,5 @@
 
-        if (state.opts.sourceMap) {
+        if (state.opts.sourceMap === false) {
+          state.emotionSourceMap = false;
+        } else {
           state.emotionSourceMap = true;
@@ -806,16 +841,16 @@ }
 
-          if (expressionPath.isPure()) {
-            if (!state.cssIdentifier) {
-              state.cssIdentifier = helperModuleImports.addDefault(path, '@emotion/css', {
-                nameHint: 'css'
-              });
-            }
-
-            expressionPath.replaceWith(t.callExpression(t.cloneDeep(state.cssIdentifier), [path.node.value.expression, state.emotionSourceMap && path.node.loc !== undefined && t.stringLiteral(getSourceMap(path.node.loc.start, state))].filter(Boolean)));
-            transformCssCallExpression({
-              babel: babel,
-              state: state,
-              path: expressionPath
+          if (!state.cssIdentifier) {
+            state.cssIdentifier = helperModuleImports.addDefault(path, '@emotion/css', {
+              nameHint: 'css'
             });
           }
+
+          var sourceMap$$1 = state.emotionSourceMap && path.node.loc !== undefined ? getSourceMap(path.node.loc.start, state) : '';
+          expressionPath.replaceWith(t.callExpression(t.cloneDeep(state.cssIdentifier), [path.node.value.expression].filter(Boolean)));
+          transformCssCallExpression({
+            babel: babel,
+            state: state,
+            path: expressionPath,
+            sourceMap: sourceMap$$1
+          });
         }
@@ -822,0 +857,0 @@ },

dist/index.prod.js

@@ -209,10 +209,10 @@ "use strict";
     generatorOpts = getGeneratorOpts(state.file);
-  return (
-    generator.addMapping({
-      generated: { line: 1, column: 0 },
-      source: generatorOpts.sourceFileName,
-      original: offset
-    }),
-    convert.fromObject(generator).toComment({ multiline: !0 })
-  );
+  return generatorOpts.sourceFileName
+    ? (generator.addMapping({
+        generated: { line: 1, column: 0 },
+        source: generatorOpts.sourceFileName,
+        original: offset
+      }),
+      convert.fromObject(generator).toComment({ multiline: !0 }))
+    : "";
 }
@@ -299,4 +299,18 @@ var hashArray = function(arr) {
     }, []);
-  },
-  transformExpressionWithStyles = function(_ref) {
+  };
+function createSourceMapConditional(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
+  );
+}
+var transformExpressionWithStyles = function(_ref) {
     var babel = _ref.babel,
@@ -306,4 +320,5 @@ state = _ref.state,
       shouldLabel = _ref.shouldLabel,
-      t = babel.types,
-      sourceMap$$1 = "";
+      _ref$sourceMap = _ref.sourceMap,
+      sourceMap$$1 = void 0 === _ref$sourceMap ? "" : _ref$sourceMap,
+      t = babel.types;
     if (t.isTaggedTemplateExpression(path)) {
@@ -317,4 +332,3 @@ var expressions = getExpressionsFromTemplateLiteral(path.node.quasi, t);
     if (t.isCallExpression(path)) {
-      var node,
-        label = getLabelFromPath(path, state, t);
+      var label = getLabelFromPath(path, state, t);
       label &&
@@ -336,6 +350,5 @@ shouldLabel &&
         state.emotionSourceMap &&
-          (sourceMap$$1 ||
-            void 0 === path.node.loc ||
-            (sourceMap$$1 = getSourceMap(path.node.loc.start, state)),
-          appendStringToExpressions(path.node.arguments, sourceMap$$1, t)),
+          !sourceMap$$1 &&
+          void 0 !== path.node.loc &&
+          (sourceMap$$1 = getSourceMap(path.node.loc.start, state)),
         1 === path.node.arguments.length &&
@@ -345,5 +358,4 @@ t.isStringLiteral(path.node.arguments[0]))
         var cssString = path.node.arguments[0].value,
-          res = serialize.serializeStyles({}, [cssString]);
-        node = t.objectExpression(
-          [
+          res = serialize.serializeStyles({}, [cssString]),
+          prodNode = t.objectExpression([
             t.objectProperty(t.identifier("name"), t.stringLiteral(res.name)),
@@ -353,9 +365,35 @@ t.objectProperty(
               t.stringLiteral(res.styles)
+            )
+          ]),
+          node = prodNode;
+        if (sourceMap$$1) {
+          var devNode = t.objectExpression([
+            t.objectProperty(t.identifier("name"), t.stringLiteral(res.name)),
+            t.objectProperty(
+              t.identifier("styles"),
+              t.stringLiteral(res.styles)
             ),
-            res.map &&
-              t.objectProperty(t.identifier("map"), t.stringLiteral(res.map))
-          ].filter(Boolean)
-        );
+            t.objectProperty(t.identifier("map"), t.stringLiteral(sourceMap$$1))
+          ]);
+          node = createSourceMapConditional(t, prodNode, devNode);
+        }
+        return { node: node, isPure: !0 };
       }
-      return { node: node, isPure: isPure };
+      if (sourceMap$$1) {
+        var lastIndex = path.node.arguments.length - 1,
+          last = path.node.arguments[lastIndex],
+          sourceMapConditional = createSourceMapConditional(
+            t,
+            t.stringLiteral(""),
+            t.stringLiteral(sourceMap$$1)
+          );
+        t.isStringLiteral(last)
+          ? (path.node.arguments[lastIndex] = t.binaryExpression(
+              "+",
+              last,
+              sourceMapConditional
+            ))
+          : path.node.arguments.push(sourceMapConditional);
+      }
+      return { node: void 0, isPure: isPure };
     }
@@ -392,4 +430,5 @@ return { node: void 0, isPure: !1 };
         state = _ref.state,
-        babel = _ref.babel,
-        t = babel.types;
+        babel = _ref.babel;
+      state.emotionSourceMap = !0;
+      var t = babel.types;
       Object.keys(references).forEach(function(referenceKey) {
@@ -434,4 +473,5 @@ var isPure = !0,
         state = _ref2.state,
-        babel = _ref2.babel,
-        t = babel.types;
+        babel = _ref2.babel;
+      state.emotionSourceMap = !0;
+      var t = babel.types;
       if (references.default.length) {
@@ -480,2 +520,3 @@ var styledIdentifier = helperModuleImports.addDefault(
       path = _ref.path,
+      sourceMap$$1 = _ref.sourceMap,
       _transformExpressionW = transformExpressionWithStyles({
@@ -485,3 +526,4 @@ babel: babel,
         path: path,
-        shouldLabel: !0
+        shouldLabel: !0,
+        sourceMap: sourceMap$$1
       }),
@@ -497,4 +539,5 @@ node = _transformExpressionW.node,
       state = _ref2.state,
-      babel = _ref2.babel,
-      t = babel.types;
+      babel = _ref2.babel;
+    state.emotionSourceMap = !0;
+    var t = babel.types;
     references.default.length &&
@@ -669,3 +712,5 @@ references.default.reverse().forEach(function(reference) {
         } else state.transformCssProp = state.opts.cssPropOptimization;
-        state.opts.sourceMap && (state.emotionSourceMap = !0);
+        !1 === state.opts.sourceMap
+          ? (state.emotionSourceMap = !1)
+          : (state.emotionSourceMap = !0);
       },
@@ -681,25 +726,24 @@ JSXAttribute: function(path, state) {
           var expressionPath = path.get("value.expression");
-          expressionPath.isPure() &&
-            (state.cssIdentifier ||
-              (state.cssIdentifier = helperModuleImports.addDefault(
-                path,
-                "@emotion/css",
-                { nameHint: "css" }
-              )),
-            expressionPath.replaceWith(
-              t.callExpression(
-                t.cloneDeep(state.cssIdentifier),
-                [
-                  path.node.value.expression,
-                  state.emotionSourceMap &&
-                    void 0 !== path.node.loc &&
-                    t.stringLiteral(getSourceMap(path.node.loc.start, state))
-                ].filter(Boolean)
-              )
-            ),
+          state.cssIdentifier ||
+            (state.cssIdentifier = helperModuleImports.addDefault(
+              path,
+              "@emotion/css",
+              { nameHint: "css" }
+            ));
+          var sourceMap$$1 =
+            state.emotionSourceMap && void 0 !== path.node.loc
+              ? getSourceMap(path.node.loc.start, state)
+              : "";
+          expressionPath.replaceWith(
+            t.callExpression(
+              t.cloneDeep(state.cssIdentifier),
+              [path.node.value.expression].filter(Boolean)
+            )
+          ),
             transformCssCallExpression({
               babel: babel,
               state: state,
-              path: expressionPath
-            }));
+              path: expressionPath,
+              sourceMap: sourceMap$$1
+            });
         }
@@ -706,0 +750,0 @@ },

package.json

 {
   "name": "babel-plugin-emotion",
-  "version": "10.0.0-beta.5",
+  "version": "10.0.0-beta.6",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
@@ -15,4 +15,3 @@ "main": "dist/index.js",
     "@emotion/memoize": "^0.7.0",
-    "@emotion/serialize": "^0.10.0",
-    "@emotion/stylis": "^0.8.0",
+    "@emotion/serialize": "^0.10.1",
     "babel-plugin-macros": "^2.0.0",
@@ -19,0 +18,0 @@ "babel-plugin-syntax-jsx": "^6.18.0",

README.md

@@ -133,3 +133,4 @@ # babel-plugin-emotion
       {
-        "sourceMap": false,
+        // sourceMap is on by default but source maps are dead code eliminated in production
+        "sourceMap": true,
         "autoLabel": process.env.NODE_ENV !== 'production',
@@ -146,4 +147,2 @@ "labelFormat": "[local]",
 
-Use [Babel's `env` property](https://babeljs.io/docs/usage/babelrc/#env-option)
-
 **.babelrc**
@@ -153,10 +152,3 @@
 {
-  "env": {
-    "production": {
-      "plugins": [["emotion", { "hoist": true }]]
-    },
-    "development": {
-      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true }]]
-    }
-  }
+  "plugins": ["emotion"]
 }
@@ -183,3 +175,3 @@ ```
 
-`boolean`, defaults to `false`.
+`boolean`, defaults to `true`.
 
@@ -192,2 +184,6 @@ This option enables the following:
 
+> Note:
+>
+> Source maps are on by default in babel-plugin-emotion but they will be removed in production builds
+
 ### `autoLabel`
@@ -320,3 +316,3 @@
 
-Instead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config and use the imports/packages shown below.
+Instead of using `babel-plugin-emotion`, you can use emotion with [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros). Add `babel-plugin-macros` to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.
 
@@ -326,6 +322,4 @@ ```jsx
 import { css, keyframes, injectGlobal, flush, hydrate } from 'emotion/macro'
-import css from '@emotion/css.macro'
-import styled from '@emotion/styled.macro'
+import css from '@emotion/css/macro'
+import styled from '@emotion/styled/macro'
 ```
-
-[create-react-app issue discussing macros](https://github.com/facebookincubator/create-react-app/issues/2730).

src/css-macro.js

@@ -6,3 +6,13 @@ // @flow
 
-export const transformCssCallExpression = ({ babel, state, path }: *) => {
+export const transformCssCallExpression = ({
+  babel,
+  state,
+  path,
+  sourceMap
+}: {
+  babel: *,
+  state: *,
+  path: *,
+  sourceMap?: string
+}) => {
   let { node, isPure } = transformExpressionWithStyles({
@@ -12,3 +22,4 @@ babel,
     path,
-    shouldLabel: true
+    shouldLabel: true,
+    sourceMap
   })
@@ -26,2 +37,3 @@ if (node) {
 export default createMacro(({ references, state, babel }) => {
+  state.emotionSourceMap = true
   const t = babel.types
@@ -28,0 +40,0 @@ if (references.default.length) {

src/index.js

@@ -167,3 +167,5 @@ // @flow
 
-        if (state.opts.sourceMap) {
+        if (state.opts.sourceMap === false) {
+          state.emotionSourceMap = false
+        } else {
           state.emotionSourceMap = true
@@ -183,25 +185,23 @@ }
           let expressionPath = path.get('value.expression')
-          if (expressionPath.isPure()) {
-            if (!state.cssIdentifier) {
-              state.cssIdentifier = addDefault(path, '@emotion/css', {
-                nameHint: 'css'
-              })
-            }
-            expressionPath.replaceWith(
-              t.callExpression(
-                t.cloneDeep(state.cssIdentifier),
-                [
-                  path.node.value.expression,
-                  state.emotionSourceMap &&
-                    path.node.loc !== undefined &&
-                    t.stringLiteral(getSourceMap(path.node.loc.start, state))
-                ].filter(Boolean)
-              )
-            )
-            transformCssCallExpression({
-              babel,
-              state,
-              path: expressionPath
+          if (!state.cssIdentifier) {
+            state.cssIdentifier = addDefault(path, '@emotion/css', {
+              nameHint: 'css'
             })
           }
+          let sourceMap =
+            state.emotionSourceMap && path.node.loc !== undefined
+              ? getSourceMap(path.node.loc.start, state)
+              : ''
+          expressionPath.replaceWith(
+            t.callExpression(
+              t.cloneDeep(state.cssIdentifier),
+              [path.node.value.expression].filter(Boolean)
+            )
+          )
+          transformCssCallExpression({
+            babel,
+            state,
+            path: expressionPath,
+            sourceMap
+          })
         }
@@ -208,0 +208,0 @@ },

src/macro.js

@@ -8,2 +8,4 @@ // @flow
   createMacro(function macro({ references, state, babel }) {
+    state.emotionSourceMap = true
+
     let t = babel.types
@@ -10,0 +12,0 @@ Object.keys(references).forEach(referenceKey => {

src/styled-macro.js

@@ -14,2 +14,4 @@ // @flow
   createMacro(({ references, state, babel }) => {
+    state.emotionSourceMap = true
+
     const t = babel.types
@@ -16,0 +18,0 @@ if (references.default.length) {

src/utils/source-maps.js

@@ -27,14 +27,17 @@ // @flow
   state: *
-) {
+): string {
   const generator = makeSourceMapGenerator(state.file)
   const generatorOpts = getGeneratorOpts(state.file)
-  generator.addMapping({
-    generated: {
-      line: 1,
-      column: 0
-    },
-    source: generatorOpts.sourceFileName,
-    original: offset
-  })
-  return convert.fromObject(generator).toComment({ multiline: true })
+  if (generatorOpts.sourceFileName) {
+    generator.addMapping({
+      generated: {
+        line: 1,
+        column: 0
+      },
+      source: generatorOpts.sourceFileName,
+      original: offset
+    })
+    return convert.fromObject(generator).toComment({ multiline: true })
+  }
+  return ''
 }

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

@@ -10,2 +10,17 @@ // @flow
 
+function createSourceMapConditional(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 = ({
@@ -15,3 +30,4 @@ babel,
   path,
-  shouldLabel
+  shouldLabel,
+  sourceMap = ''
 }: {
@@ -21,6 +37,6 @@ babel: *,
   path: *,
-  shouldLabel: boolean
+  shouldLabel: boolean,
+  sourceMap?: string
 }): { node?: *, isPure: boolean } => {
   let t = babel.types
-  let sourceMap = ''
   if (t.isTaggedTemplateExpression(path)) {
@@ -39,3 +55,2 @@ const expressions = getExpressionsFromTemplateLiteral(path.node.quasi, t)
     }
-    let node
 
@@ -55,7 +70,4 @@ let isPure = true
 
-    if (state.emotionSourceMap) {
-      if (!sourceMap && path.node.loc !== undefined) {
-        sourceMap = getSourceMap(path.node.loc.start, state)
-      }
-      appendStringToExpressions(path.node.arguments, sourceMap, t)
+    if (state.emotionSourceMap && !sourceMap && path.node.loc !== undefined) {
+      sourceMap = getSourceMap(path.node.loc.start, state)
     }
@@ -69,14 +81,40 @@
       let res = serializeStyles({}, [cssString])
-      node = t.objectExpression(
-        [
+      let prodNode = t.objectExpression([
+        t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
+        t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))
+      ])
+      let node = prodNode
+      if (sourceMap) {
+        let devNode = t.objectExpression([
           t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
           t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)),
-          res.map &&
-            t.objectProperty(t.identifier('map'), t.stringLiteral(res.map))
-        ].filter(Boolean)
+          t.objectProperty(t.identifier('map'), t.stringLiteral(sourceMap))
+        ])
+        node = createSourceMapConditional(t, prodNode, devNode)
+      }
+
+      return { node, isPure: true }
+    }
+    if (sourceMap) {
+      let lastIndex = path.node.arguments.length - 1
+      let last = path.node.arguments[lastIndex]
+      let sourceMapConditional = createSourceMapConditional(
+        t,
+        t.stringLiteral(''),
+        t.stringLiteral(sourceMap)
       )
+      if (t.isStringLiteral(last)) {
+        path.node.arguments[lastIndex] = t.binaryExpression(
+          '+',
+          last,
+          sourceMapConditional
+        )
+      } else {
+        path.node.arguments.push(sourceMapConditional)
+      }
     }
-    return { node, isPure }
+
+    return { node: undefined, isPure }
   }
   return { node: undefined, isPure: false }
 }

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90787

increased by4.77%

Dependency count

10

decreased by-9.09%

Lines of code

2350

increased by5.62%

Number of low supply chain risk alerts

6

decreased by-14.29%

Worsened metrics

Number of lines in readme file

319

decreased by-1.85%

Dependency changes

• - Removed@emotion/stylis@^0.8.0

• - Removed@emotion/stylis@0.8.5(transitive)

• Updated@emotion/serialize@^0.10.1