Fix multiple nested selectors in media queries

packages/emotion/src/index.js

@@ -20,48 +20,42 @@ export function flush() {
   sheet.inject()
 }
 
-let rule = ''
-let isRootSelector = false
 let queue = []
 
 const insertRule = sheet.insert.bind(sheet)
 
-function insertionPlugin(context, content, selectors, parent) {
+function insertionPlugin(
+  context,
+  content,
+  selectors,
+  parent,
+  line,
+  column,
+  length,
+  id
+) {
   switch (context) {
     case -2: {
-      if (rule !== '') {
-        if (isRootSelector === true) {
-          queue.push(rule)
-        } else {
-          queue.unshift(rule)
-        }
-        rule = ''
-      }
-
       queue.forEach(insertRule)
       queue = []
       break
     }
 
     case 2: {
-      if (rule !== '') {
-        if (isRootSelector === true) {
+      if (id === 0) {
+        const joinedSelectors = selectors.join(',')
+        const rule = `${joinedSelectors}{${content}}`
+        if (parent.join(',') === joinedSelectors || parent[0] === '') {
           queue.push(rule)
         } else {
           queue.unshift(rule)
         }
       }
-
-      const joinedSelectors = selectors.join(',')
-
-      isRootSelector = parent.join(',') === joinedSelectors || parent[0] === ''
-      rule = `${joinedSelectors}{${content}}`
       break
     }
     // after an at rule block
-    case 3: // eslint-disable-line no-fallthrough
+    case 3:
       queue.push(`${selectors.join(',')}{${content}}`)
-      rule = ''
   }
 }
 

packages/emotion/test/__snapshots__/css.test.js.snap

@@ -239,17 +239,17 @@ exports[`css handles objects 1`] = `
 `;
 
 exports[`css media query specificity 1`] = `
-"@media (min-width:420px) {
+".css-mfslnr {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+@media (min-width:420px) {
   .css-mfslnr {
     width: 96px;
     height: 96px;
   }
-}
-
-.css-mfslnr {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
 }"
 `;
 

packages/emotion/test/__snapshots__/selectivity.test.js.snap

@@ -1,161 +1,125 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`css complex nested media queries 1`] = `
-@media (max-width:600px) {
-  .glamor-0 h1 {
+"@media (max-width:600px) {
+  .css-acogag h1 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:400px),(max-height:420px) {
-  .glamor-0 h1 {
+  .css-acogag h1 {
     font-size: 1.1rem;
   }
-}
-
-<div
-  className="glamor-0"
-/>
+}"
 `;
 
 exports[`css complex nested styles 1`] = `
-.glamor-0 {
+".css-s7aswl {
   color: blue;
 }
 
-.glamor-0:hover {
+.css-s7aswl:hover {
   color: green;
 }
 
-.glamor-0:hover .name {
+.css-s7aswl:hover .name {
   color: amethyst;
 }
 
-.glamor-0:hover .name:focus {
+.css-s7aswl:hover .name:focus {
   color: burlywood;
 }
 
 @media (min-width:420px) {
-  .glamor-0:hover .name:focus {
+  .css-s7aswl:hover .name:focus {
     color: rebeccapurple;
   }
-}
-
-<div
-  className="glamor-0"
-/>
+}"
 `;
 
 exports[`css handles media query merges 1`] = `
-.glamor-0 {
+".css-yno01n {
   color: darkslateblue;
   color: red;
   color: purple;
 }
 
 @media (min-width:420px) {
-  .glamor-0 {
+  .css-yno01n {
     color: amethyst;
   }
 }
 
 @media (min-width:640px) {
-  .glamor-0 {
+  .css-yno01n {
     color: rebeccapurple;
   }
 }
 
 @media (min-width:960px) {
-  .glamor-0 {
+  .css-yno01n {
     color: burlywood;
   }
 }
 
 @media (min-width:640px) {
-  .glamor-0 {
+  .css-yno01n {
     color: blue;
   }
 }
 
 @media (min-width:640px) {
-  .glamor-0 {
+  .css-yno01n {
     color: aquamarine;
   }
-}
-
-<div
-  className="glamor-0"
-/>
+}"
 `;
 
-exports[`css selectivity sheet 1`] = `
-".css-s7aswl {
+exports[`css media queries with multiple nested selectors 1`] = `
+".css-17riori {
   color: blue;
 }
 
-.css-s7aswl:hover {
-  color: green;
-}
-
-.css-s7aswl:hover .name {
-  color: amethyst;
-}
-
-.css-s7aswl:hover .name:focus {
-  color: burlywood;
-}
-
-@media (min-width:420px) {
-  .css-s7aswl:hover .name:focus {
-    color: rebeccapurple;
+@media (max-width:400px) {
+  .css-17riori {
+    color: green;
   }
-}
 
-@media (max-width:600px) {
-  .css-acogag h1 {
-    font-size: 1.4rem;
+  .css-17riori h1 {
+    color: red;
   }
-}
 
-@media (max-width:400px),(max-height:420px) {
-  .css-acogag h1 {
-    font-size: 1.1rem;
+  .css-17riori span {
+    color: red;
   }
-}
-
-.css-yno01n {
-  color: darkslateblue;
-  color: red;
-  color: purple;
-}
+}"
+`;
 
-@media (min-width:420px) {
-  .css-yno01n {
-    color: amethyst;
-  }
+exports[`css media query with nested selector with nested selector on root 1`] = `
+".css-1ssiu3j span {
+  color: blue;
 }
 
-@media (min-width:640px) {
-  .css-yno01n {
-    color: rebeccapurple;
+@media (max-width:400px) {
+  .css-1ssiu3j {
+    color: green;
   }
-}
 
-@media (min-width:960px) {
-  .css-yno01n {
-    color: burlywood;
+  .css-1ssiu3j span {
+    color: red;
   }
-}
+}"
+`;
 
-@media (min-width:640px) {
-  .css-yno01n {
-    color: blue;
+exports[`css media query with nested selector without declarations on root 1`] = `
+"@media (max-width:400px) {
+  .css-18muius {
+    color: green;
   }
-}
 
-@media (min-width:640px) {
-  .css-yno01n {
-    color: aquamarine;
+  .css-18muius span {
+    color: red;
   }
 }"
 `;

packages/emotion/test/css.test.js

@@ -263,7 +263,7 @@ describe('css', () => {
     const tree2 = renderer.create(<div className={cls1} />).toJSON()
     expect(tree2).toMatchSnapshot()
   })
-  test.skip('media query specificity', () => {
+  test('media query specificity', () => {
     flush()
     const cls = css`
       width: 32px;