Relax requirement for label extraction - containing functions dont ha…

…ve to be PascalCased anymore (#1805)
emotion-js · Mar 16, 2020 · 5c7ec85 · 5c7ec85
1 parent 75e2f9e
commit 5c7ec85
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 64 deletions.
diff --git a/.changeset/neat-geese-knock.md b/.changeset/neat-geese-knock.md
@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': minor
+---
+
+Requirements for a label extraction have been relaxed. In certain situations it was previously required for a containing function to have a PascalCased name.
diff --git a/packages/babel-plugin/__tests__/__snapshots__/css.js.snap b/packages/babel-plugin/__tests__/__snapshots__/css.js.snap
@@ -53,8 +53,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"zjik7\\",
   styles: \\"display:flex\\"
 } : {
-  name: \\"zjik7\\",
-  styles: \\"display:flex\\",
+  name: \\"8v5aok-doThing\\",
+  styles: \\"display:flex;label:doThing;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
@@ -82,8 +82,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
-  name: \\"3sn2xs\\",
-  styles: \\"color:hotpink\\",
+  name: \\"aarqni-doThing\\",
+  styles: \\"color:hotpink;label:doThing;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
@@ -194,7 +194,7 @@ function thing() {}
 function doThing() {
   return (
     /*#__PURE__*/
-    css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
+    css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\")
   );
 }"
 `;
@@ -305,14 +305,36 @@ class SomeComponent extends Component {
 }"
 `;
 
-exports[`emotion-babel-plugin css inside-non-pascal-case-arrow-function 1`] = `
+exports[`emotion-babel-plugin css label-1 1`] = `
 "import { css } from '@emotion/react'
 
-let something = () => {
-  css\`
-    color: hotpink;
-  \`
-}
+const thing = css\`
+  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 thing = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"3sn2xs\\",
+  styles: \\"color:hotpink\\"
+} : {
+  name: \\"1hi0qos-thing\\",
+  styles: \\"color:hotpink;label:thing;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};"
+`;
+
+exports[`emotion-babel-plugin css label-arrow-function-expression 1`] = `
+"import { css } from '@emotion/react'
+
+const thing = () => css\`
+  color: hotpink;
+\`
 
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -325,38 +347,43 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
-  name: \\"3sn2xs\\",
-  styles: \\"color:hotpink\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
+  name: \\"1hi0qos-thing\\",
+  styles: \\"color:hotpink;label:thing;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-let something = () => {
-  _ref;
-};"
+const thing = () => _ref;"
 `;
 
-exports[`emotion-babel-plugin css label-1 1`] = `
+exports[`emotion-babel-plugin css label-function-expression 1`] = `
 "import { css } from '@emotion/react'
 
-const thing = css\`
-  color: hotpink;
-\`
+const thing = function() {
+  return css\`
+    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 thing = process.env.NODE_ENV === \\"production\\" ? {
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
   name: \\"1hi0qos-thing\\",
   styles: \\"color:hotpink;label:thing;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = function () {
+  return _ref;
 };"
 `;
 
@@ -685,7 +712,7 @@ function media(...args) {
     /*#__PURE__*/
     css(\\"@media (min-width:100px){\\",
     /*#__PURE__*/
-    css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
+    css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
   );
 }
 

diff --git a/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js b/packages/babel-plugin/__tests__/css-macro/__fixtures__/label-arrow-function-expression.js
@@ -0,0 +1,5 @@
+import { css } from '@emotion/react/macro'
+
+const thing = () => css`
+  color: hotpink;
+`
diff --git a/.../inside-non-pascal-case-arrow-function.js → ...__fixtures__/label-function-expression.js b/.../inside-non-pascal-case-arrow-function.js → ...__fixtures__/label-function-expression.js
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react/macro'
 
-let something = () => {
-  css`
+const thing = function() {
+  return css`
     color: hotpink;
   `
 }
diff --git a/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap
@@ -53,8 +53,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"zjik7\\",
   styles: \\"display:flex\\"
 } : {
-  name: \\"zjik7\\",
-  styles: \\"display:flex\\",
+  name: \\"8v5aok-doThing\\",
+  styles: \\"display:flex;label:doThing;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QvbWFjcm8nXG5cbmZ1bmN0aW9uIGRvVGhpbmcoKSB7XG4gIHJldHVybiBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgYFxufVxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
@@ -82,8 +82,8 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
-  name: \\"3sn2xs\\",
-  styles: \\"color:hotpink\\",
+  name: \\"aarqni-doThing\\",
+  styles: \\"color:hotpink;label:doThing;\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzcyh7IGNvbG9yOiAnaG90cGluaycgfSlcbn1cbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
@@ -194,7 +194,7 @@ function thing() {}
 function doThing() {
   return (
     /*#__PURE__*/
-    css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\"))
+    css(\\"display:\\", thing(), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:doThing;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImltcHVyZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJpbXB1cmUuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gdGhpbmcoKSB7fVxuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGRpc3BsYXk6ICR7dGhpbmcoKX07XG4gIGBcbn1cbiJdfQ== */\\")
   );
 }"
 `;
@@ -305,14 +305,36 @@ class SomeComponent extends Component {
 }"
 `;
 
-exports[`@emotion/react - css macro inside-non-pascal-case-arrow-function 1`] = `
+exports[`@emotion/react - css macro label-1 1`] = `
 "import { css } from '@emotion/react/macro'
 
-let something = () => {
-  css\`
-    color: hotpink;
-  \`
-}
+const thing = css\`
+  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 thing = process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"3sn2xs\\",
+  styles: \\"color:hotpink\\"
+} : {
+  name: \\"1hi0qos-thing\\",
+  styles: \\"color:hotpink;label:thing;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};"
+`;
+
+exports[`@emotion/react - css macro label-arrow-function-expression 1`] = `
+"import { css } from '@emotion/react/macro'
+
+const thing = () => css\`
+  color: hotpink;
+\`
 
 
       ↓ ↓ ↓ ↓ ↓ ↓
@@ -325,38 +347,43 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
-  name: \\"3sn2xs\\",
-  styles: \\"color:hotpink\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5sZXQgc29tZXRoaW5nID0gKCkgPT4ge1xuICBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbn1cbiJdfQ== */\\",
+  name: \\"1hi0qos-thing\\",
+  styles: \\"color:hotpink;label:thing;\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVCIiwiZmlsZSI6ImxhYmVsLWFycm93LWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSAoKSA9PiBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-let something = () => {
-  _ref;
-};"
+const thing = () => _ref;"
 `;
 
-exports[`@emotion/react - css macro label-1 1`] = `
+exports[`@emotion/react - css macro label-function-expression 1`] = `
 "import { css } from '@emotion/react/macro'
 
-const thing = css\`
-  color: hotpink;
-\`
+const thing = function() {
+  return css\`
+    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 thing = process.env.NODE_ENV === \\"production\\" ? {
+
+var _ref = process.env.NODE_ENV === \\"production\\" ? {
   name: \\"3sn2xs\\",
   styles: \\"color:hotpink\\"
 } : {
   name: \\"1hi0qos-thing\\",
   styles: \\"color:hotpink;label:thing;\\",
-  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuY29uc3QgdGhpbmcgPSBjc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWZ1bmN0aW9uLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1kiLCJmaWxlIjoibGFiZWwtZnVuY3Rpb24tZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0L21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGZ1bmN0aW9uKCkge1xuICByZXR1cm4gY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const thing = function () {
+  return _ref;
 };"
 `;
 
@@ -677,7 +704,7 @@ function media(...args) {
     /*#__PURE__*/
     css(\\"@media (min-width:100px){\\",
     /*#__PURE__*/
-    css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"))
+    css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
   );
 }
 

diff --git a/packages/babel-plugin/src/utils/label.js b/packages/babel-plugin/src/utils/label.js
@@ -53,8 +53,6 @@ export function getLabelFromPath(path: *, state: *, t: *) {
   )
 }
 
-let pascalCaseRegex = /^[A-Z][A-Za-z]+/
-
 function getDeclaratorName(path, t) {
   // $FlowFixMe
   const parent = path.findParent(
@@ -80,27 +78,19 @@ function getDeclaratorName(path, t) {
 
   // we probably have an inline css prop usage
   if (parent.isFunctionDeclaration()) {
-    let { name } = parent.node.id
-    if (pascalCaseRegex.test(name)) {
-      return name
-    }
-    return ''
+    return parent.node.id.name || ''
   }
 
   // we could also have an object property
   if (parent.isObjectProperty() && !parent.node.computed) {
     return parent.node.key.name
   }
 
-  let variableDeclarator = path.findParent(p => p.isVariableDeclarator())
+  let variableDeclarator = parent.findParent(p => p.isVariableDeclarator())
   if (!variableDeclarator) {
     return ''
   }
-  let { name } = variableDeclarator.node.id
-  if (pascalCaseRegex.test(name)) {
-    return name
-  }
-  return ''
+  return variableDeclarator.node.id.name
 }
 
 function getIdentifierName(path: *, t: *) {

diff --git a/packages/babel-plugin/src/utils/transform-expression-with-styles.js b/packages/babel-plugin/src/utils/transform-expression-with-styles.js
@@ -129,7 +129,7 @@ export let transformExpressionWithStyles = ({
       return node
     }
 
-    if (label) {
+    if (canAppendStrings && label) {
       const labelString = `;label:${label};`
 
       switch (autoLabel) {