Insertion plugin with tree

packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap

@@ -90,15 +90,15 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
+.glamor-0:hover {
+  color: blue;
+}
+
 .glamor-0:after {
   content: " ";
   color: red;
 }
 
-.glamor-0:hover {
-  color: blue;
-}
-
 @media (min-width:420px) {
   .glamor-0 {
     color: green;

packages/emotion/src/index.js

@@ -34,38 +34,74 @@ export function flush() {
 
 let currentSourceMap = ''
 let queue = []
+let orphans = {}
 
-function insertRule(rule) {
-  sheet.insert(rule, currentSourceMap)
+function insertNode(node) {
+  sheet.insert(node.ruleText, currentSourceMap)
+}
+
+function Node(selector, ruleText) {
+  this.selector = selector
+  this.ruleText = ruleText
+  this.children = []
+}
+
+function dive(node) {
+  insertNode(node)
+  if (node.children) {
+    node.children.forEach(dive)
+  }
+}
+
+function buildTree(node, parent) {
+  if (parent) {
+    if (!orphans[parent]) {
+      orphans[parent] = []
+    }
+    orphans[parent].push(node)
+  } else {
+    queue.push(node)
+  }
+
+  if (orphans[node.selector] !== undefined) {
+    orphans[node.selector].forEach(n => node.children.push(n))
+    orphans[node.selector] = undefined
+  }
 }
 
 function insertionPlugin(
   context,
   content,
   selectors,
-  parent,
+  parents,
   line,
   column,
   length,
   id
 ) {
+  let node
+  let rule = selectors.join(',')
+  let parent = parents.join(',')
   switch (context) {
     case -2: {
-      queue.forEach(insertRule)
+      queue.forEach(dive)
+      Object.keys(orphans).forEach(select => {
+        if (orphans[select]) {
+          orphans[select].forEach(dive)
+        }
+      })
       queue = []
+      orphans = {}
+
       break
     }
 
     case 2: {
-      if (id === 0) {
-        const joinedSelectors = selectors.join(',')
-        const rule = `${joinedSelectors}{${content}}`
-        if (parent.join(',') === joinedSelectors || parent[0] === '') {
-          queue.push(rule)
-        } else {
-          queue.unshift(rule)
-        }
+      if (id !== 0) {
+        break
       }
+      node = new Node(rule, `${rule}{${content}}`)
+      buildTree(node, parent)
       break
     }
     // after an at rule block
@@ -82,19 +118,24 @@ function insertionPlugin(
         // m edia
         // eslint-disable-next-line no-fallthrough
         case 109: {
-          queue.push(chars + '{' + child + '}')
+          node = new Node(rule, chars + '{' + child + '}')
+          buildTree(node, parent)
           break
         }
         // k eyframes
         case 107: {
           chars = chars.substring(1)
           child = chars + '{' + child + '}'
-          queue.push('@-webkit-' + child)
-          queue.push('@' + child)
+          node = new Node(rule, '@-webkit-' + child)
+          buildTree(node, parent)
+          node = new Node(rule, '@' + child)
+          buildTree(node, parent)
           break
         }
         default: {
-          queue.push(chars + child)
+          node = new Node(rule, chars + child)
+          buildTree(node, parent)
+          break
         }
       }
     }
@@ -238,8 +279,10 @@ if (process.env.NODE_ENV !== 'production') {
 
 export function css() {
   const styles = createStyles.apply(this, arguments)
+
   const hash = hashString(styles)
   const cls = `css-${hash}`
+
   if (registered[cls] === undefined) {
     registered[cls] = styles
   }

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

@@ -129,15 +129,15 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
+.glamor-0:hover {
+  color: blue;
+}
+
 .glamor-0:after {
   content: " ";
   color: red;
 }
 
-.glamor-0:hover {
-  color: blue;
-}
-
 @media (min-width:420px) {
   .glamor-0 {
     color: green;

packages/emotion/test/no-babel/__snapshots__/index.test.js.snap

@@ -73,15 +73,15 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
+.glamor-0:hover {
+  color: blue;
+}
+
 .glamor-0:after {
   content: " ";
   color: red;
 }
 
-.glamor-0:hover {
-  color: blue;
-}
-
 @media (min-width:420px) {
   .glamor-0 {
     color: green;

packages/react-emotion/test/__snapshots__/index.test.js.snap

@@ -204,6 +204,35 @@ exports[`styled composition based on props 2`] = `
 </h1>
 `;
 
+exports[`styled composition of nested pseudo selectors 1`] = `
+.glamor-0 {
+  font-size: 2rem;
+  padding: 16px;
+}
+
+.glamor-0:hover {
+  color: blue;
+}
+
+.glamor-0:hover:active {
+  color: red;
+}
+
+.glamor-0:hover {
+  color: pink;
+}
+
+.glamor-0:hover:active {
+  color: purple;
+}
+
+<button
+  className="glamor-0"
+>
+  Should be purple
+</button>
+`;
+
 exports[`styled composition with objects 1`] = `
 .glamor-0 {
   color: #333;

packages/react-emotion/test/index.test.js

@@ -475,6 +475,43 @@ describe('styled', () => {
     expect(tree2).toMatchSnapshot()
   })
 
+  test('composition of nested pseudo selectors', () => {
+    const defaultLinkStyles = {
+      '&:hover': {
+        color: 'blue',
+        '&:active': {
+          color: 'red'
+        }
+      }
+    }
+
+    const buttonStyles = () => ({
+      ...defaultLinkStyles,
+      fontSize: '2rem',
+      padding: 16
+    })
+
+    const Button = styled('button')(buttonStyles)
+
+    const tree = renderer
+      .create(
+        <Button
+          className={css({
+            '&:hover': {
+              color: 'pink',
+              '&:active': {
+                color: 'purple'
+              }
+            }
+          })}
+        >
+          Should be purple
+        </Button>
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
   test('objects', () => {
     const H1 = styled('h1')({ padding: 10 }, props => ({
       display: props.display