Fixed an issue in the minifying logic that could remove rules with th…

…e same context values as their parent rules (#2721)

.changeset/loud-dingos-divide.md

@@ -0,0 +1,17 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue in the minifying logic that could remove rules with the same context values as their parent rules. Like in the example below:
+
+```js
+styled.div`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+`
+```

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

@@ -792,6 +792,42 @@ something.View(\\"color:hotpink;\\");
 something.View(\\"\\");"
 `;
 
+exports[`emotion-babel-plugin styled same-nested-contex-value 1`] = `
+"import styled from '@emotion/styled'
+
+export const Comp = styled.div\`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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\\" ? {
+  target: \\"e1dl4grl0\\"
+} : {
+  target: \\"e1dl4grl0\\",
+  label: \\"Comp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\"
+} : {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNhbWUtbmVzdGVkLWNvbnRleC12YWx1ZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEIiLCJmaWxlIjoic2FtZS1uZXN0ZWQtY29udGV4LXZhbHVlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBDb21wID0gc3R5bGVkLmRpdmBcbiAgPiBkaXYge1xuICAgIGNvbG9yOiBibHVlO1xuXG4gICAgPiBkaXYge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICB9XG5gXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`emotion-babel-plugin styled shorthand-property 1`] = `
 "import styled from '@emotion/styled'
 

packages/babel-plugin/__tests__/styled-macro/__fixtures__/same-nested-contex-value.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled/macro'
+
+export const Comp = styled.div`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+`

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

@@ -778,6 +778,42 @@ something.View\`
 something.View({});"
 `;
 
+exports[`@emotion/styled.macro same-nested-contex-value 1`] = `
+"import styled from '@emotion/styled/macro'
+
+export const Comp = styled.div\`
+  > div {
+    color: blue;
+
+    > div {
+      color: hotpink;
+    }
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+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\\" ? {
+  target: \\"e1dl4grl0\\"
+} : {
+  target: \\"e1dl4grl0\\",
+  label: \\"Comp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\"
+} : {
+  name: \\"11tack0\\",
+  styles: \\">div{color:blue;>div{color:hotpink;}}\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNhbWUtbmVzdGVkLWNvbnRleC12YWx1ZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFOEIiLCJmaWxlIjoic2FtZS1uZXN0ZWQtY29udGV4LXZhbHVlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmV4cG9ydCBjb25zdCBDb21wID0gc3R5bGVkLmRpdmBcbiAgPiBkaXYge1xuICAgIGNvbG9yOiBibHVlO1xuXG4gICAgPiBkaXYge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICB9XG5gXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`@emotion/styled.macro shorthand-property 1`] = `
 "import styled from '@emotion/styled/macro'
 

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

@@ -1,6 +1,10 @@
 // @flow
 import { compile } from 'stylis'
 
+const haveSameLocation = (element1, element2) => {
+  return element1.line === element2.line && element1.column === element2.column
+}
+
 const isAutoInsertedRule = element => {
   if (element.type !== 'rule' || !element.parent) {
     return false
@@ -11,7 +15,7 @@ const isAutoInsertedRule = element => {
     parent = parent.parent
   } while (parent && parent.type !== 'rule')
 
-  return !!parent && element.value === parent.value
+  return !!parent && haveSameLocation(element, parent)
 }
 
 const toInputTree = (elements, tree) => {