Fixed an issue with extracting labels from obj literal properties and…

… added support for extracting from object methods (#2340)

* Fixed an issue with extracting labels from obj literal properties and added support for extracting from object methods

* Stick to only extracting from string literals

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

.changeset/chilly-apricots-kiss.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed a crash when extracting labels from object properties with string literal keys in certain situations.

.changeset/green-dragons-suffer.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': minor
+---
+
+Added support for label extraction from object methods.

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

@@ -447,6 +447,78 @@ const thing = process.env.NODE_ENV === \\"production\\" ? {
 };"
 `;
 
+exports[`emotion-babel-plugin css label-obj-method 1`] = `
+"import { css } from '@emotion/react'
+
+const obj = {
+  FooBar() {
+    return (
+      <div
+        css={css\`
+          background-color: hotpink;
+        \`}
+      />
+    )
+  }
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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).\\"; }
+
+import { css } from '@emotion/react';
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"utcpyu\\",
+  styles: \\"background-color:hotpink\\"
+} : {
+  name: \\"h6ixui-FooBar\\",
+  styles: \\"background-color:hotpink;label:FooBar;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iai1tZXRob2QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWdCIiwiZmlsZSI6ImxhYmVsLW9iai1tZXRob2QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3Qgb2JqID0ge1xuICBGb29CYXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const obj = {
+  FooBar() {
+    return <div css={_ref} />;
+  }
+
+};"
+`;
+
+exports[`emotion-babel-plugin css label-obj-property-literal 1`] = `
+"import { css } from '@emotion/react'
+
+const obj = {
+  'red component': (
+    <div
+      css={css\`
+        background-color: hotpink;
+      \`}
+    />
+  )
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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).\\"; }
+
+import { css } from '@emotion/react';
+const obj = {
+  'red component': <div css={process.env.NODE_ENV === \\"production\\" ? {
+    name: \\"utcpyu\\",
+    styles: \\"background-color:hotpink\\"
+  } : {
+    name: \\"1ewo2bz-red-component\\",
+    styles: \\"background-color:hotpink;label:red-component;\\",
+    map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iai1wcm9wZXJ0eS1saXRlcmFsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtjIiwiZmlsZSI6ImxhYmVsLW9iai1wcm9wZXJ0eS1saXRlcmFsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IG9iaiA9IHtcbiAgJ3JlZCBjb21wb25lbnQnOiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IGhvdHBpbms7XG4gICAgICBgfVxuICAgIC8+XG4gIClcbn1cbiJdfQ== */\\",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }} />
+};"
+`;
+
 exports[`emotion-babel-plugin css label-object 1`] = `
 "import { css } from '@emotion/react'
 

packages/babel-plugin/__tests__/css-macro/__fixtures__/label-obj-method.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react/macro'
+
+const obj = {
+  FooBar() {
+    return (
+      <div
+        css={css`
+          background-color: hotpink;
+        `}
+      />
+    )
+  }
+}

packages/babel-plugin/__tests__/css-macro/__fixtures__/label-obj-property-literal.js

@@ -0,0 +1,11 @@
+import { css } from '@emotion/react/macro'
+
+const obj = {
+  'red component': (
+    <div
+      css={css`
+        background-color: hotpink;
+      `}
+    />
+  )
+}

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

@@ -447,6 +447,78 @@ const thing = process.env.NODE_ENV === \\"production\\" ? {
 };"
 `;
 
+exports[`@emotion/react - css macro label-obj-method 1`] = `
+"import { css } from '@emotion/react/macro'
+
+const obj = {
+  FooBar() {
+    return (
+      <div
+        css={css\`
+          background-color: hotpink;
+        \`}
+      />
+    )
+  }
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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).\\"; }
+
+import { css } from \\"@emotion/react\\";
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"utcpyu\\",
+  styles: \\"background-color:hotpink\\"
+} : {
+  name: \\"h6ixui-FooBar\\",
+  styles: \\"background-color:hotpink;label:FooBar;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iai1tZXRob2QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWdCIiwiZmlsZSI6ImxhYmVsLW9iai1tZXRob2QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3Qgb2JqID0ge1xuICBGb29CYXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const obj = {
+  FooBar() {
+    return <div css={_ref} />;
+  }
+
+};"
+`;
+
+exports[`@emotion/react - css macro label-obj-property-literal 1`] = `
+"import { css } from '@emotion/react/macro'
+
+const obj = {
+  'red component': (
+    <div
+      css={css\`
+        background-color: hotpink;
+      \`}
+    />
+  )
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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).\\"; }
+
+import { css } from \\"@emotion/react\\";
+const obj = {
+  'red component': <div css={process.env.NODE_ENV === \\"production\\" ? {
+    name: \\"utcpyu\\",
+    styles: \\"background-color:hotpink\\"
+  } : {
+    name: \\"1ewo2bz-red-component\\",
+    styles: \\"background-color:hotpink;label:red-component;\\",
+    map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iai1wcm9wZXJ0eS1saXRlcmFsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtjIiwiZmlsZSI6ImxhYmVsLW9iai1wcm9wZXJ0eS1saXRlcmFsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmNvbnN0IG9iaiA9IHtcbiAgJ3JlZCBjb21wb25lbnQnOiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IGhvdHBpbms7XG4gICAgICBgfVxuICAgIC8+XG4gIClcbn1cbiJdfQ== */\\",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }} />
+};"
+`;
+
 exports[`@emotion/react - css macro label-object 1`] = `
 "import { css } from '@emotion/react/macro'
 

packages/babel-plugin/__tests__/styled-macro/__fixtures__/label-assignment-expression.js

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import styled from '@emotion/styled/macro'
+import { jsx } from '@emotion/react'
+
+let Comp
+Comp = styled.div``

packages/babel-plugin/__tests__/styled-macro/__fixtures__/label-class-fields.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import styled from '@emotion/styled/macro'
+import { jsx } from '@emotion/react'
+
+class Thing {
+  static SomeComponent = styled.div`
+    color: hotpink;
+  `
+  BadIdeaComponent = styled.div`
+    background: hotpink;
+  `
+}

packages/babel-plugin/__tests__/styled-macro/__fixtures__/label-member-expression.js

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import styled from '@emotion/styled/macro'
+import { jsx } from '@emotion/react'
+
+const Timeline = styled.ul``
+Timeline.Item = styled.li``
+Timeline.Item.Anchor = styled.a``

packages/babel-plugin/__tests__/styled-macro/__fixtures__/label-sanitize.js

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+/* eslint-disable react/jsx-pascal-case */
+import styled from '@emotion/styled/macro'
+import { jsx } from '@emotion/react'
+
+const MiniCalWrap$ = styled.div`
+  color: red;
+`
+const Test = () => <MiniCalWrap$ />

packages/babel-plugin/__tests__/styled-macro/__fixtures__/label.js

@@ -3,30 +3,4 @@
 import styled from '@emotion/styled/macro'
 import { jsx } from '@emotion/react'
 
-class Thing {
-  static SomeComponent = styled.div`
-    color: hotpink;
-  `
-  BadIdeaComponent = styled.div`
-    background: hotpink;
-  `
-}
-
-{
-  // label should get sanitized
-  const MiniCalWrap$ = styled.div`
-    color: red;
-  `
-  const Test = () => <MiniCalWrap$ />
-}
-
-{
-  const Timeline = styled.ul``
-  Timeline.Item = styled.li``
-  Timeline.Item.Anchor = styled.a``
-}
-
-{
-  let Comp
-  Comp = styled.div``
-}
+let SomeComp = styled.div({ color: 'hotpink' })