Ensure proper insert order of nested rules & atRules

packages/emotion/src/index.js

@@ -20,22 +20,33 @@ export function flush() {
   sheet.inject()
 }
 
+function insertRule(rule) {
+  return sheet.insert(rule)
+}
+
 let rule = ''
+const atRuleQueue = new Set()
 
 function insertionPlugin(context, content, selector, parent) {
   switch (context) {
     case -2:
-      if (rule !== '') sheet.insert(rule)
+      if (rule !== '') insertRule(rule)
       rule = ''
+      atRuleQueue.forEach(insertRule)
+      atRuleQueue.clear()
       break
     case 2: {
-      if (rule !== '') sheet.insert(rule)
+      if (rule !== '') insertRule(rule)
       rule = `${selector.join(',')}{${content}}`
       break
     }
     // after an at rule block
     case 3: // eslint-disable-line no-fallthrough
-      sheet.insert(`${selector.join(',')}{${content}}`)
+      if (parent.join('')) {
+        atRuleQueue.add(`${selector.join(',')}{${content}}`)
+      } else {
+        insertRule(`${selector.join(',')}{${content}}`)
+      }
       rule = ''
   }
 }

packages/emotion/src/sheet.js

@@ -23,7 +23,7 @@ styleSheet.flush()
 */
 
 function sheetForTag(tag) {
-  if (tag.sheet) {
+  if (tag && tag.sheet) {
     return tag.sheet
   }
 

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

@@ -200,48 +200,6 @@ exports[`css handles array of objects 1`] = `
 />
 `;
 
-exports[`css handles media query merges 1`] = `
-.glamor-0 {
-  color: darkslateblue;
-  color: red;
-  color: purple;
-}
-
-@media (min-width:420px) {
-  .glamor-0 {
-    color: amethyst;
-  }
-}
-
-@media (min-width:640px) {
-  .glamor-0 {
-    color: rebeccapurple;
-  }
-}
-
-@media (min-width:960px) {
-  .glamor-0 {
-    color: burlywood;
-  }
-}
-
-@media (min-width:640px) {
-  .glamor-0 {
-    color: blue;
-  }
-}
-
-@media (min-width:640px) {
-  .glamor-0 {
-    color: aquamarine;
-  }
-}
-
-<div
-  className="glamor-0"
-/>
-`;
-
 exports[`css handles more than 10 dynamic properties 1`] = `
 .glamor-0 {
   text-decoration: underline;

packages/emotion/test/__snapshots__/media-query.test.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`css handles media query merges 1`] = `
+.glamor-0 {
+  color: darkslateblue;
+  color: red;
+  color: purple;
+}
+
+@media (min-width:420px) {
+  .glamor-0 {
+    color: amethyst;
+  }
+}
+
+@media (min-width:640px) {
+  .glamor-0 {
+    color: rebeccapurple;
+  }
+}
+
+@media (min-width:960px) {
+  .glamor-0 {
+    color: burlywood;
+  }
+}
+
+@media (min-width:640px) {
+  .glamor-0 {
+    color: blue;
+  }
+}
+
+@media (min-width:640px) {
+  .glamor-0 {
+    color: aquamarine;
+  }
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`css handles media query merges 2`] = `
+".css-yno01n {
+  color: darkslateblue;
+  color: red;
+  color: purple;
+}
+
+@media (min-width:420px) {
+  .css-yno01n {
+    color: amethyst;
+  }
+}
+
+@media (min-width:640px) {
+  .css-yno01n {
+    color: rebeccapurple;
+  }
+}
+
+@media (min-width:960px) {
+  .css-yno01n {
+    color: burlywood;
+  }
+}
+
+@media (min-width:640px) {
+  .css-yno01n {
+    color: blue;
+  }
+}
+
+@media (min-width:640px) {
+  .css-yno01n {
+    color: aquamarine;
+  }
+}"
+`;

packages/emotion/test/css.test.js

@@ -101,46 +101,6 @@ describe('css', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles media query merges', () => {
-    const mq = [
-      '@media(min-width: 420px)',
-      '@media(min-width: 640px)',
-      '@media(min-width: 960px)'
-    ]
-    const buttonCSS = [
-      {
-        color: 'red',
-        [mq[1]]: {
-          color: 'blue'
-        }
-      },
-      {
-        color: 'purple',
-        [mq[1]]: {
-          color: 'aquamarine'
-        }
-      }
-    ]
-
-    const cls1 = css([
-      {
-        color: 'darkslateblue',
-        [mq[0]]: {
-          color: 'amethyst'
-        },
-        [mq[1]]: {
-          color: 'rebeccapurple'
-        },
-        [mq[2]]: {
-          color: 'burlywood'
-        }
-      },
-      buttonCSS
-    ])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-
   test('computed key is only dynamic', () => {
     const cls1 = css({
       fontSize: 10,

packages/emotion/test/media-query.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { css, sheet } from 'emotion'
+
+describe('css', () => {
+  test('handles media query merges', () => {
+    const mq = [
+      '@media(min-width: 420px)',
+      '@media(min-width: 640px)',
+      '@media(min-width: 960px)'
+    ]
+    const buttonCSS = [
+      {
+        color: 'red',
+        [mq[1]]: {
+          color: 'blue'
+        }
+      },
+      {
+        color: 'purple',
+        [mq[1]]: {
+          color: 'aquamarine'
+        }
+      }
+    ]
+
+    const cls1 = css([
+      {
+        color: 'darkslateblue',
+        [mq[0]]: {
+          color: 'amethyst'
+        },
+        [mq[1]]: {
+          color: 'rebeccapurple'
+        },
+        [mq[2]]: {
+          color: 'burlywood'
+        }
+      },
+      buttonCSS
+    ])
+    const tree = renderer.create(<div className={cls1}/>).toJSON()
+    expect(tree).toMatchSnapshot()
+    expect(sheet).toMatchSnapshot()
+  })
+})