Avoid transpiling vanilla emotion calls in already transpiled code to…

… avoid double labels and such (#1602)
emotion-js · Nov 3, 2019 · b0ad4f0 · b0ad4f0
1 parent 4b313e4
commit b0ad4f0
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 0 deletions.
diff --git a/.changeset/light-mice-relate.md b/.changeset/light-mice-relate.md
@@ -0,0 +1,5 @@
+---
+'babel-plugin-emotion': patch
+---
+
+Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`babel css inline babel 6 code already transpiled by emotion plugin (avoid double transpilation) 1`] = `
+"import { css as _css2 } from \\"emotion\\";
+import { keyframes as _keyframes2 } from \\"emotion\\";
+
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return \\"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).\\";
+}
+
+let someCls =
+/*#__PURE__*/
+_css(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1jwq1yt-someCls\\",
+  styles: \\"color:hotpink;;label:someCls;\\"
+} : {
+  name: \\"1jwq1yt-someCls\\",
+  styles: \\"color:hotpink;;label:someCls;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+let rotate360 =
+/*#__PURE__*/
+_keyframes(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1k98dea-rotate360\\",
+  styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
+} : {
+  name: \\"1k98dea-rotate360\\",
+  styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`babel css inline babel 6 custom instance 1`] = `
 "import { css as _css } from 'my-emotion-instance';
 
@@ -122,6 +156,39 @@ var templateObject_1;
 const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n;label:someVar;'], ['\\\\n  color: hotpink;\\\\n;label:someVar;'])));"
 `;
 
+exports[`babel css inline babel 7 code already transpiled by emotion plugin (avoid double transpilation) 1`] = `
+"import { css as _css2 } from \\"emotion\\";
+import { keyframes as _keyframes2 } from \\"emotion\\";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return \\"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).\\";
+}
+
+let someCls =
+/*#__PURE__*/
+_css(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1jwq1yt-someCls\\",
+  styles: \\"color:hotpink;;label:someCls;\\"
+} : {
+  name: \\"1jwq1yt-someCls\\",
+  styles: \\"color:hotpink;;label:someCls;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+let rotate360 =
+/*#__PURE__*/
+_keyframes(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1k98dea-rotate360\\",
+  styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\"
+} : {
+  name: \\"1k98dea-rotate360\\",
+  styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`babel css inline babel 7 custom instance 1`] = `
 "import { css as _css } from \\"my-emotion-instance\\";
 

diff --git a/packages/babel-plugin-emotion/__tests__/css-requires-options.js b/packages/babel-plugin-emotion/__tests__/css-requires-options.js
@@ -74,6 +74,40 @@ const inline = {
     filename: __filename
   },
 
+  'code already transpiled by emotion plugin (avoid double transpilation)': {
+    code: `
+    import { keyframes as _keyframes } from "emotion";
+    import { css as _css } from "emotion";
+
+    function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "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)."; }
+
+    let someCls =
+    /*#__PURE__*/
+    _css(process.env.NODE_ENV === "production" ? {
+      name: "1jwq1yt-someCls",
+      styles: "color:hotpink;;label:someCls;"
+    } : {
+      name: "1jwq1yt-someCls",
+      styles: "color:hotpink;;label:someCls;",
+      map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
+
+    let rotate360 =
+    /*#__PURE__*/
+    _keyframes(process.env.NODE_ENV === "production" ? {
+      name: "1k98dea-rotate360",
+      styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;"
+    } : {
+      name: "1k98dea-rotate360",
+      styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;",
+      map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
+    `,
+    filename: __filename
+  },
+
   'custom instance': {
     code: `
     import {css as lol} from 'my-emotion-instance'

diff --git a/packages/babel-plugin-emotion/src/emotion-macro.js b/packages/babel-plugin-emotion/src/emotion-macro.js
@@ -3,6 +3,34 @@ import { transformExpressionWithStyles } from './utils'
 import { addNamed } from '@babel/helper-module-imports'
 import { createMacro } from 'babel-plugin-macros'
 
+const isAlreadyTranspiled = path => {
+  if (!path.isCallExpression()) {
+    return false
+  }
+
+  const firstArgPath = path.get('arguments.0')
+
+  if (!firstArgPath) {
+    return false
+  }
+
+  if (!firstArgPath.isConditionalExpression()) {
+    return false
+  }
+
+  const alternatePath = firstArgPath.get('alternate')
+
+  if (!alternatePath.isObjectExpression()) {
+    return false
+  }
+
+  const properties = new Set(
+    alternatePath.get('properties').map(p => p.node.key.name)
+  )
+
+  return ['name', 'styles'].every(p => properties.has(p))
+}
+
 export let createEmotionMacro = (instancePath: string) =>
   createMacro(function macro({ references, state, babel, isEmotionCall }) {
     if (!isEmotionCall) {
@@ -24,6 +52,10 @@ export let createEmotionMacro = (instancePath: string) =>
           references[referenceKey].reverse().forEach(reference => {
             const path = reference.parentPath
 
+            if (isAlreadyTranspiled(path)) {
+              return
+            }
+
             reference.replaceWith(t.cloneDeep(runtimeNode))
             if (isPure) {
               path.addComment('leading', '#__PURE__')