Fixed an issue with styled transformer not respecting `autoLabel: '…

…dev-only'` setting (#2157)
emotion-js · Feb 8, 2021 · c9b57f3 · c9b57f3
1 parent bfaa1b5
commit c9b57f3
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 86 deletions.
diff --git a/.changeset/ninety-trainers-agree.md b/.changeset/ninety-trainers-agree.md
@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue with `styled` transformer not respecting `autoLabel: 'dev-only'` setting.
diff --git a/packages/babel-plugin/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/__snapshots__/index.js.snap
@@ -16,7 +16,9 @@ import _styled from \\"@emotion/styled/base\\";
 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).\\"; }
 
 // @flow
-const MyComponent = _styled(\\"div\\", {
+const MyComponent = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"eck06en0\\"
+} : {
   target: \\"eck06en0\\",
   label: \\"MyComponent\\"
 })(process.env.NODE_ENV === \\"production\\" ? {
@@ -29,7 +31,9 @@ const MyComponent = _styled(\\"div\\", {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
-const OtherComponent = MyComponent.withComponent('section', {
+const OtherComponent = MyComponent.withComponent('section', process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"eck06en1\\"
+} : {
   target: \\"eck06en1\\",
   label: \\"OtherComponent\\"
 });"
@@ -268,7 +272,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
 import * as React from 'react';
 import { jsx } from '@emotion/react';
 const MyObject = {
-  MyProperty: _styled(\\"div\\", {
+  MyProperty: _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+    target: \\"erl9uiw0\\"
+  } : {
     target: \\"erl9uiw0\\",
     label: \\"MyProperty\\"
   })(process.env.NODE_ENV === \\"production\\" ? {

diff --git a/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
diff --git a/packages/babel-plugin/__tests__/disable-source-map/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/disable-source-map/__snapshots__/index.js.snap
@@ -33,7 +33,9 @@ import _styled from \\"@emotion/styled/base\\";
 
 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 Comp = _styled(\\"div\\", {
+let Comp = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"eggnygh0\\"
+} : {
   target: \\"eggnygh0\\",
   label: \\"Comp\\"
 })(process.env.NODE_ENV === \\"production\\" ? {

diff --git a/packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap
@@ -84,7 +84,9 @@ let SomeComp = nonDefaultStyled.div({ 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 { nonDefaultStyled } from 'package-one';
-let SomeComp = nonDefaultStyled(\\"div\\", {
+let SomeComp = nonDefaultStyled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"e1dq5q4a0\\"
+} : {
   target: \\"e1dq5q4a0\\",
   label: \\"SomeComp\\"
 })(process.env.NODE_ENV === \\"production\\" ? {
@@ -110,7 +112,9 @@ import { something as _styled } from \\"package-four/base\\";
 
 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 SomeComp = _styled(\\"div\\", {
+let SomeComp = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"e16az05m0\\"
+} : {
   target: \\"e16az05m0\\",
   label: \\"SomeComp\\"
 })(process.env.NODE_ENV === \\"production\\" ? {

diff --git a/packages/babel-plugin/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/source-maps/__snapshots__/index.js.snap
@@ -193,7 +193,9 @@ import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
-const SomeComponent = _styled(\\"div\\", {
+const SomeComponent = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"eb28ebz0\\"
+} : {
   target: \\"eb28ebz0\\",
   label: \\"SomeComponent\\"
 })(process.env.NODE_ENV === \\"production\\" ? {
@@ -221,7 +223,9 @@ import _styled from \\"@emotion/styled/base\\";
 
 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).\\"; }
 
-const SomeComponent = _styled(\\"div\\", {
+const SomeComponent = _styled(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"eb28ebz0\\"
+} : {
   target: \\"eb28ebz0\\",
   label: \\"SomeComponent\\"
 })(process.env.NODE_ENV === \\"production\\" ? {