Fixed an issue with the lack of /*#__PURE__*/ annotations before st…

…yled calls transformed from tagged template expressions (#2799) * Upgrade Babel-related dependencies * Fixed an issue with lack of PURE annotations on some styled nodes * Add changeset * add additional ignore line to flowconfig * try ignoring other package in flowconfig * Remove redundant code * reuse named variable in one of the calls
emotion-js · Jul 27, 2022 · 5b99a84 · 5b99a84
1 parent 1c32b04
commit 5b99a84
Show file tree

Hide file tree

Showing 28 changed files with 1,086 additions and 2,175 deletions.
diff --git a/.changeset/eighty-bulldogs-ring.md b/.changeset/eighty-bulldogs-ring.md
@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue with the lack of `/*#__PURE__*/` annotations before styled calls transformed from tagged template expressions.
diff --git a/.flowconfig b/.flowconfig
@@ -7,6 +7,7 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/@parcel/.*
+.*/node_modules/resolve/.*
 
 [untyped]
 .*/node_modules/polished/.*

diff --git a/.flowconfig-ci b/.flowconfig-ci
@@ -7,7 +7,7 @@
 .*/node_modules/graphql/.*
 .*/node_modules/metro.*
 .*/node_modules/@parcel/.*
-
+.*/node_modules/resolve/.*
 
 [untyped]
 .*/node_modules/polished/.*
@@ -20,7 +20,6 @@
 [declarations]
 .*/node_modules/react-native/.*
 
-
 [options]
 server.max_workers=1
 sharedmemory.hash_table_pow=21
diff --git a/package.json b/package.json
@@ -169,17 +169,17 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/helper-module-imports": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-syntax-jsx": "^7.12.13",
-    "@babel/plugin-transform-flow-strip-types": "^7.13.0",
-    "@babel/plugin-transform-react-jsx": "^7.12.17",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-flow": "^7.12.13",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/register": "^7.13.8",
-    "@babel/runtime": "^7.13.10",
+    "@babel/core": "^7.18.5",
+    "@babel/helper-module-imports": "^7.16.7",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-syntax-jsx": "^7.17.12",
+    "@babel/plugin-transform-flow-strip-types": "^7.17.12",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-flow": "^7.17.12",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/register": "^7.17.7",
+    "@babel/runtime": "^7.18.3",
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
     "@manypkg/cli": "^0.19.1",
@@ -192,11 +192,8 @@
     "babel-eslint": "^10.1.0",
     "babel-flow-types": "^1.2.3",
     "babel-jest": "^27.4.5",
-    "babel-plugin-add-basic-constructor-for-react-components": "^0.1.0",
-    "babel-plugin-codegen": "^3.0.0",
-    "babel-plugin-fix-dce-for-classes-with-statics": "^0.1.0",
+    "babel-plugin-codegen": "^4.1.5",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "babel-plugin-transform-define": "^1.3.0",
     "benchmark": "^2.1.4",
     "bolt-check": "^0.3.0",
     "bundlesize": "^0.13.2",

diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json
@@ -10,7 +10,7 @@
     "test:typescript": "exit 0"
   },
   "dependencies": {
-    "@babel/plugin-syntax-jsx": "^7.12.13"
+    "@babel/plugin-syntax-jsx": "^7.17.12"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"
@@ -23,6 +23,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10"
+    "@babel/core": "^7.18.5"
   }
 }
diff --git a/packages/babel-plugin/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/__snapshots__/index.js.snap
@@ -71,7 +71,7 @@ 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", process.env.NODE_ENV === "production" ? {
+const MyComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eck06en0"
 } : {
   target: "eck06en0",
@@ -327,7 +327,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import * as React from 'react';
 import { jsx } from '@emotion/react';
 const MyObject = {
-  MyProperty: _styled("div", process.env.NODE_ENV === "production" ? {
+  MyProperty: /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
     target: "erl9uiw0"
   } : {
     target: "erl9uiw0",

diff --git a/packages/babel-plugin/__tests__/__snapshots__/styled-requires-options.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled-requires-options.js.snap
@@ -12,7 +12,7 @@ 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 Foo = _styled("h1", {
+const Foo = /*#__PURE__*/_styled("h1", {
   target: "eoxfmb00"
 })(process.env.NODE_ENV === "production" ? {
   name: "3sn2xs",
@@ -37,6 +37,7 @@ 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)."; }
 
+/*#__PURE__*/
 _styled("h1", {
   target: "e8evh370"
 })(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
@@ -59,7 +59,7 @@ 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", process.env.NODE_ENV === "production" ? {
+const SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "el9tp5g0"
 } : {
   target: "el9tp5g0",
@@ -125,6 +125,7 @@ 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)."; }
 
+/*#__PURE__*/
 _styled("div", {
   target: "e1jqiiye0"
 })(process.env.NODE_ENV === "production" ? {
@@ -172,7 +173,7 @@ 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", process.env.NODE_ENV === "production" ? {
+const SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1i93zq73"
 } : {
   target: "e1i93zq73",
@@ -187,7 +188,7 @@ const SomeComponent = _styled("div", process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
-let SomeOtherComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+let SomeOtherComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1i93zq72"
 } : {
   target: "e1i93zq72",
@@ -202,14 +203,14 @@ let SomeOtherComponent = _styled("div", process.env.NODE_ENV === "production" ?
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
-let AnotherComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+let AnotherComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1i93zq71"
 } : {
   target: "e1i93zq71",
   label: "AnotherComponent"
 })(SomeComponent, "{color:green;}", SomeOtherComponent, "{color:green;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */"));
 
-let OneLastComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+let OneLastComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1i93zq70"
 } : {
   target: "e1i93zq70",
@@ -251,7 +252,7 @@ styled('button', cfg)({})
 
 import _styled from "@emotion/styled/base";
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 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)."; }
 
@@ -312,7 +313,7 @@ let Avatar = styled.img\`
 
 import _styled from "@emotion/styled/base";
 
-let Avatar = _styled("img", process.env.NODE_ENV === "production" ? {
+let Avatar = /*#__PURE__*/_styled("img", process.env.NODE_ENV === "production" ? {
   target: "e9o8e9e0"
 } : {
   target: "e9o8e9e0",
@@ -340,7 +341,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 /* eslint-disable react/jsx-pascal-case */
 import { jsx } from '@emotion/react';
 
-let SomeComp = _styled("div", process.env.NODE_ENV === "production" ? {
+let SomeComp = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e2dh5500"
 } : {
   target: "e2dh5500",
@@ -372,7 +373,7 @@ import _styled from "@emotion/styled/base";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 let Comp;
-Comp = _styled("div", process.env.NODE_ENV === "production" ? {
+Comp = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e16lswdj0"
 } : {
   target: "e16lswdj0",
@@ -405,7 +406,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { jsx } from '@emotion/react';
 
 class Thing {
-  static SomeComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+  static SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
     target: "e1s9kmbj1"
   } : {
     target: "e1s9kmbj1",
@@ -419,7 +420,7 @@ class Thing {
     map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLWNsYXNzLWZpZWxkcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLbUMiLCJmaWxlIjoibGFiZWwtY2xhc3MtZmllbGRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-  BadIdeaComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+  BadIdeaComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
     target: "e1s9kmbj0"
   } : {
     target: "e1s9kmbj0",
@@ -453,20 +454,20 @@ import _styled from "@emotion/styled/base";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 
-const Timeline = _styled("ul", process.env.NODE_ENV === "production" ? {
+const Timeline = /*#__PURE__*/_styled("ul", process.env.NODE_ENV === "production" ? {
   target: "e1djkynu2"
 } : {
   target: "e1djkynu2",
   label: "Timeline"
 })(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW1lbWJlci1leHByZXNzaW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkwQiIsImZpbGUiOiJsYWJlbC1tZW1iZXItZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG5UaW1lbGluZS5JdGVtLkFuY2hvciA9IHN0eWxlZC5hYGBcbiJdfQ== */");
 
-Timeline.Item = _styled("li", process.env.NODE_ENV === "production" ? {
+Timeline.Item = /*#__PURE__*/_styled("li", process.env.NODE_ENV === "production" ? {
   target: "e1djkynu1"
 } : {
   target: "e1djkynu1",
   label: "Timeline-Item"
 })(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW1lbWJlci1leHByZXNzaW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUt5QiIsImZpbGUiOiJsYWJlbC1tZW1iZXItZXhwcmVzc2lvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgVGltZWxpbmUgPSBzdHlsZWQudWxgYFxuVGltZWxpbmUuSXRlbSA9IHN0eWxlZC5saWBgXG5UaW1lbGluZS5JdGVtLkFuY2hvciA9IHN0eWxlZC5hYGBcbiJdfQ== */");
-Timeline.Item.Anchor = _styled("a", process.env.NODE_ENV === "production" ? {
+Timeline.Item.Anchor = /*#__PURE__*/_styled("a", process.env.NODE_ENV === "production" ? {
   target: "e1djkynu0"
 } : {
   target: "e1djkynu0",
@@ -497,7 +498,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 /* eslint-disable react/jsx-pascal-case */
 import { jsx } from '@emotion/react';
 
-const MiniCalWrap$ = _styled("div", process.env.NODE_ENV === "production" ? {
+const MiniCalWrap$ = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "elww2rn0"
 } : {
   target: "elww2rn0",
@@ -540,7 +541,7 @@ const H1 = styled.h1\`
 import _styled from "@emotion/styled/base";
 
 // yes, this was actually a bug at one point
-const H1 = _styled("h1", process.env.NODE_ENV === "production" ? {
+const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
   target: "e1nqrpma0"
 } : {
   target: "e1nqrpma0",
@@ -566,7 +567,7 @@ 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", process.env.NODE_ENV === "production" ? {
+const SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eqhyoqt1"
 } : {
   target: "eqhyoqt1",
@@ -581,7 +582,7 @@ const SomeComponent = _styled("div", process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
-const SomeOtherComponent = _styled("button", process.env.NODE_ENV === "production" ? {
+const SomeOtherComponent = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "eqhyoqt0"
 } : {
   target: "eqhyoqt0",
@@ -656,7 +657,7 @@ 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", process.env.NODE_ENV === "production" ? {
+const SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eyr3fbm0"
 } : {
   target: "eyr3fbm0",
@@ -710,7 +711,7 @@ const SomeComponent = styled.div(props => ({ color: props.color }))
 
 import _styled from "@emotion/styled/base";
 
-const SomeComponent = _styled("div", process.env.NODE_ENV === "production" ? {
+const SomeComponent = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e14okpby0"
 } : {
   target: "e14okpby0",
@@ -812,7 +813,7 @@ 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)."; }
 
-export const Comp = _styled("div", process.env.NODE_ENV === "production" ? {
+export const Comp = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1dl4grl0"
 } : {
   target: "e1dl4grl0",
@@ -841,7 +842,7 @@ const H1 = styled.h1({ fontSize })
 import _styled from "@emotion/styled/base";
 let fontSize = window.whatever;
 
-const H1 = _styled("h1", process.env.NODE_ENV === "production" ? {
+const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
   target: "e4pkhyn0"
 } : {
   target: "e4pkhyn0",
@@ -896,7 +897,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const H1 = _styled("h1", process.env.NODE_ENV === "production" ? {
+const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
   target: "e45grep0"
 } : {
   target: "e45grep0",
@@ -914,7 +915,7 @@ const H1 = styled.h1({ ...window.whatever })
 
 import _styled from "@emotion/styled/base";
 
-const H1 = _styled("h1", process.env.NODE_ENV === "production" ? {
+const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
   target: "e49hde00"
 } : {
   target: "e49hde00",

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,7 @@ 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", process.env.NODE_ENV === "production" ? {
+let Comp = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "eggnygh0"
 } : {
   target: "eggnygh0",

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,7 @@ 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", process.env.NODE_ENV === "production" ? {
+let SomeComp = /*#__PURE__*/nonDefaultStyled("div", process.env.NODE_ENV === "production" ? {
   target: "e1dq5q4a0"
 } : {
   target: "e1dq5q4a0",
@@ -111,7 +111,7 @@ let SomeComp = someAlias.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 as someAlias } from 'package-one';
-let SomeComp = someAlias("div", process.env.NODE_ENV === "production" ? {
+let SomeComp = /*#__PURE__*/someAlias("div", process.env.NODE_ENV === "production" ? {
   target: "erjjkeh0"
 } : {
   target: "erjjkeh0",
@@ -139,7 +139,7 @@ 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", process.env.NODE_ENV === "production" ? {
+let SomeComp = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e16az05m0"
 } : {
   target: "e16az05m0",