babel-plugin-emotion: Fix autoLabel crash on css used in expression assigned to an object pattern (#1526)

* Add failing test

* babel-plugin-emotion: Fix `autoLabel` crash on `css` used in expression assigned to an object pattern

Ensure that the variable declarator's id is an identifier before using its name as the label.

* Update snapshot

* Add a changeset

Author: ahutchings

.changeset/twelve-peas-flash/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "babel-plugin-emotion", "type": "patch" }],
+  "dependents": []
+}

.changeset/twelve-peas-flash/changes.md

@@ -0,0 +1 @@
+Fix `autoLabel` crash on `css` used in expression assigned to an object pattern

packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap

@@ -446,6 +446,41 @@ function doThing() {
 }"
 `;
 
+exports[`@emotion/babel-plugin-core css object-pattern-variable-declarator 1`] = `
+"import { css } from '@emotion/core'
+import { extractCritical } from 'emotion-server'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+
+const { css: styles } = extractCritical(
+  renderToString(
+    <div
+      css={css\`
+        color: hotpink;
+      \`}
+    />
+  )
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from '@emotion/core';
+import { extractCritical } from 'emotion-server';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+const {
+  css: styles
+} = extractCritical(renderToString(<div css={process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\"
+} : {
+  name: \\"1lrxbo5\\",
+  styles: \\"color:hotpink;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1wYXR0ZXJuLXZhcmlhYmxlLWRlY2xhcmF0b3IuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUWMiLCJmaWxlIjoib2JqZWN0LXBhdHRlcm4tdmFyaWFibGUtZGVjbGFyYXRvci5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5pbXBvcnQgeyBleHRyYWN0Q3JpdGljYWwgfSBmcm9tICdlbW90aW9uLXNlcnZlcidcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHJlbmRlclRvU3RyaW5nIH0gZnJvbSAncmVhY3QtZG9tL3NlcnZlcidcblxuY29uc3QgeyBjc3M6IHN0eWxlcyB9ID0gZXh0cmFjdENyaXRpY2FsKFxuICByZW5kZXJUb1N0cmluZyhcbiAgICA8ZGl2XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgICBgfVxuICAgIC8+XG4gIClcbilcbiJdfQ== */\\"
+}} />));"
+`;
+
 exports[`@emotion/babel-plugin-core css other-imports 1`] = `
 "import { nonExistantImport } from '@emotion/css'
 

packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js

@@ -0,0 +1,14 @@
+import { css } from '@emotion/core'
+import { extractCritical } from 'emotion-server'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+
+const { css: styles } = extractCritical(
+  renderToString(
+    <div
+      css={css`
+        color: hotpink;
+      `}
+    />
+  )
+)

packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap

@@ -446,6 +446,36 @@ function doThing() {
 }"
 `;
 
+exports[`@emotion/css/macro object-pattern-variable-declarator 1`] = `
+"import { css } from '@emotion/core'
+import { extractCritical } from 'emotion-server'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+
+const { css: styles } = extractCritical(
+  renderToString(
+    <div
+      css={css\`
+        color: hotpink;
+      \`}
+    />
+  )
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import { css } from '@emotion/core';
+import { extractCritical } from 'emotion-server';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+const {
+  css: styles
+} = extractCritical(renderToString(<div css={css\`
+        color: hotpink;
+      \`} />));"
+`;
+
 exports[`@emotion/css/macro other-imports 1`] = `
 "import { nonExistantImport } from '@emotion/css/macro'
 

packages/babel-plugin-emotion/src/utils/label.js

@@ -59,7 +59,10 @@ function getDeclaratorName(path, t) {
   // we probably have a css call assigned to a variable
   // so we'll just return the variable name
   if (parent.isVariableDeclarator()) {
-    return parent.node.id.name
+    if (t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name
+    }
+    return ''
   }
 
   // we probably have an inline css prop usage