Fix autoLabel crash on css used as a computed key of an object (#…

…1485) * Guard against undefined key.name * Add a test to reflect the fail case * Add changeset * Better test file name * Add snap files from new tests * Tweak changeset description * Change condition to check if property is computed
emotion-js · Aug 31, 2019 · b22b4ca · b22b4ca
1 parent 2c443e4
commit b22b4ca
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 1 deletion.
diff --git a/.changeset/tidy-glasses-crash/changes.json b/.changeset/tidy-glasses-crash/changes.json
@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "babel-plugin-emotion", "type": "patch" }],
+  "dependents": []
+}
diff --git a/.changeset/tidy-glasses-crash/changes.md b/.changeset/tidy-glasses-crash/changes.md
@@ -0,0 +1 @@
+Fix `autoLabel` crash on `css` used as a computed key of an object
diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap
@@ -416,6 +416,36 @@ exports[`@emotion/babel-plugin-core css no-actual-import 1`] = `
 import '@emotion/css';"
 `;
 
+exports[`@emotion/babel-plugin-core css object-dynamic-property 1`] = `
+"import css from '@emotion/css'
+
+function doThing() {
+  return {
+    [css({ color: 'hotpink' })]: 'coldblue'
+  }
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _css from \\"@emotion/css\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\"
+} : {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\"
+};
+
+function doThing() {
+  return {
+    [_ref]: 'coldblue'
+  };
+}"
+`;
+
 exports[`@emotion/babel-plugin-core css other-imports 1`] = `
 "import { nonExistantImport } from '@emotion/css'
 

diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-dynamic-property.js b/packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-dynamic-property.js
@@ -0,0 +1,7 @@
+import css from '@emotion/css/macro'
+
+function doThing() {
+  return {
+    [css({ color: 'hotpink' })]: 'coldblue'
+  }
+}
diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap
@@ -416,6 +416,36 @@ exports[`@emotion/css/macro no-actual-import 1`] = `
 "
 `;
 
+exports[`@emotion/css/macro object-dynamic-property 1`] = `
+"import css from '@emotion/css/macro'
+
+function doThing() {
+  return {
+    [css({ color: 'hotpink' })]: 'coldblue'
+  }
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _css from \\"@emotion/css\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\"
+} : {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiB7XG4gICAgW2Nzcyh7IGNvbG9yOiAnaG90cGluaycgfSldOiAnY29sZGJsdWUnXG4gIH1cbn1cbiJdfQ== */\\"
+};
+
+function doThing() {
+  return {
+    [_ref]: 'coldblue'
+  };
+}"
+`;
+
 exports[`@emotion/css/macro other-imports 1`] = `
 "import { nonExistantImport } from '@emotion/css/macro'
 

diff --git a/packages/babel-plugin-emotion/src/utils/label.js b/packages/babel-plugin-emotion/src/utils/label.js
@@ -72,7 +72,7 @@ function getDeclaratorName(path, t) {
   }
 
   // we could also have an object property
-  if (parent.isObjectProperty()) {
+  if (parent.isObjectProperty() && !parent.node.computed) {
     return parent.node.key.name
   }