Fixed an issue in the styles minifier that caused interpolations to b…

…e sometimes included more than once in the output (#2858)

.changeset/rare-rats-tap.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue in the styles minifier that caused interpolations to be sometimes included more than once in the output.

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

@@ -45,6 +45,50 @@ const SomeComponent = /*#__PURE__*/_styled('div', process.env.NODE_ENV === "prod
 })(_templateObject());"
 `;
 
+exports[`emotion-babel-plugin styled auto-inserted-rule-in-at-rule-preceeded-by-interpolation 1`] = `
+"import styled from '@emotion/styled'
+import { css } from '@emotion/react'
+
+const fullWidth = css\`
+  width: 100%;
+\`
+
+const StyledRoot = styled.div\`
+  \${fullWidth}
+
+  button {
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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)."; }
+
+import { css } from '@emotion/react';
+const fullWidth = process.env.NODE_ENV === "production" ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : {
+  name: "329gto-fullWidth",
+  styles: "width:100%;label:fullWidth;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG8taW5zZXJ0ZWQtcnVsZS1pbi1hdC1ydWxlLXByZWNlZWRlZC1ieS1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdxQiIsImZpbGUiOiJhdXRvLWluc2VydGVkLXJ1bGUtaW4tYXQtcnVsZS1wcmVjZWVkZWQtYnktaW50ZXJwb2xhdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGZ1bGxXaWR0aCA9IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQuZGl2YFxuICAke2Z1bGxXaWR0aH1cblxuICBidXR0b24ge1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgICAgY29sb3I6IHJlZDtcbiAgICB9XG4gIH1cbmBcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+const StyledRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e10xv6gg0"
+} : {
+  target: "e10xv6gg0",
+  label: "StyledRoot"
+})(fullWidth, " button{@media (min-width: 768px){color:red;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG8taW5zZXJ0ZWQtcnVsZS1pbi1hdC1ydWxlLXByZWNlZWRlZC1ieS1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU82QiIsImZpbGUiOiJhdXRvLWluc2VydGVkLXJ1bGUtaW4tYXQtcnVsZS1wcmVjZWVkZWQtYnktaW50ZXJwb2xhdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGZ1bGxXaWR0aCA9IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQuZGl2YFxuICAke2Z1bGxXaWR0aH1cblxuICBidXR0b24ge1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgICAgY29sb3I6IHJlZDtcbiAgICB9XG4gIH1cbmBcbiJdfQ== */"));"
+`;
+
 exports[`emotion-babel-plugin styled basic 1`] = `
 "import styled from '@emotion/styled'
 

packages/babel-plugin/__tests__/styled-macro/__fixtures__/auto-inserted-rule-in-at-rule-preceeded-by-interpolation.js

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled/macro'
+import { css } from '@emotion/react'
+
+const fullWidth = css`
+  width: 100%;
+`
+
+const StyledRoot = styled.div`
+  ${fullWidth}
+
+  button {
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+`

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

@@ -45,6 +45,41 @@ const SomeComponent = /*#__PURE__*/_styled('div', process.env.NODE_ENV === "prod
 })(_templateObject());"
 `;
 
+exports[`@emotion/styled.macro auto-inserted-rule-in-at-rule-preceeded-by-interpolation 1`] = `
+"import styled from '@emotion/styled/macro'
+import { css } from '@emotion/react'
+
+const fullWidth = css\`
+  width: 100%;
+\`
+
+const StyledRoot = styled.div\`
+  \${fullWidth}
+
+  button {
+    @media (min-width: 768px) {
+      color: red;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from "@emotion/styled/base";
+import { css } from '@emotion/react';
+const fullWidth = css\`
+  width: 100%;
+\`;
+
+const StyledRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e10xv6gg0"
+} : {
+  target: "e10xv6gg0",
+  label: "StyledRoot"
+})(fullWidth, " button{@media (min-width: 768px){color:red;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG8taW5zZXJ0ZWQtcnVsZS1pbi1hdC1ydWxlLXByZWNlZWRlZC1ieS1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU82QiIsImZpbGUiOiJhdXRvLWluc2VydGVkLXJ1bGUtaW4tYXQtcnVsZS1wcmVjZWVkZWQtYnktaW50ZXJwb2xhdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5cbmNvbnN0IGZ1bGxXaWR0aCA9IGNzc2BcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQuZGl2YFxuICAke2Z1bGxXaWR0aH1cblxuICBidXR0b24ge1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgICAgY29sb3I6IHJlZDtcbiAgICB9XG4gIH1cbmBcbiJdfQ== */"));"
+`;
+
 exports[`@emotion/styled.macro basic 1`] = `
 "import styled from '@emotion/styled/macro'
 

packages/babel-plugin/src/utils/minify.js

@@ -5,18 +5,10 @@ const haveSameLocation = (element1, element2) => {
   return element1.line === element2.line && element1.column === element2.column
 }
 
-const isAutoInsertedRule = element => {
-  if (element.type !== 'rule' || !element.parent) {
-    return false
-  }
-
-  let parent = element
-  do {
-    parent = parent.parent
-  } while (parent && parent.type !== 'rule')
-
-  return !!parent && haveSameLocation(element, parent)
-}
+const isAutoInsertedRule = element =>
+  element.type === 'rule' &&
+  element.parent &&
+  haveSameLocation(element, element.parent)
 
 const toInputTree = (elements, tree) => {
   for (let i = 0; i < elements.length; i++) {