Ensure proper insert order of nested rules & atRules (#321)

* Insure proper insert order by creating an atRule queue. * Clean up code a bit * Use Set.clear * Add snapshots * Update tests for selectivity to include nested rules * Update tests for selectivity to include nested rules and mq's * Fix nested selectors in media queries * Remove unused arguments * Update snapshots * Update snapshots * Update snapshot * Fix rules without a parent selector * Fix it for real * Remove double assignment * Remove check for tag
emotion-js · Sep 22, 2017 · be6ef54 · be6ef54
1 parent 4e37dfd
commit be6ef54
Show file tree

Hide file tree

Showing 11 changed files with 396 additions and 198 deletions.
diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap
@@ -30,10 +30,6 @@ exports[`css auto px 1`] = `
 `;
 
 exports[`css composition 1`] = `
-.glamor-0:hover {
-  color: hotpink;
-}
-
 .glamor-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +41,10 @@ exports[`css composition 1`] = `
   justify-content: center;
 }
 
+.glamor-0:hover {
+  color: hotpink;
+}
+
 <div
   className="glamor-0"
 />
@@ -77,15 +77,6 @@ exports[`css composition stuff 2`] = `
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0:hover {
-  color: blue;
-}
-
-.glamor-0:after {
-  content: " ";
-  color: red;
-}
-
 .glamor-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -99,6 +90,15 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
+.glamor-0:after {
+  content: " ";
+  color: red;
+}
+
+.glamor-0:hover {
+  color: blue;
+}
+
 @media (min-width:420px) {
   .glamor-0 {
     color: green;
@@ -200,8 +200,8 @@ exports[`css handles objects 1`] = `
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 .some-class .some-other-class {
-  background-color: hotpink;
+.glamor-0 {
+  color: yellow;
 }
 
 .glamor-0 .some-class {
@@ -211,8 +211,8 @@ exports[`css nested 1`] = `
   display: flex;
 }
 
-.glamor-0 {
-  color: yellow;
+.glamor-0 .some-class .some-other-class {
+  background-color: hotpink;
 }
 
 @media (max-width:600px) {

diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap
@@ -151,17 +151,17 @@ exports[`styled component as selector 1`] = `
   font-size: 20px;
 }
 
-.glamor-3 .glamor-0 {
-  color: green;
-}
-
 .glamor-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
+.glamor-3 .glamor-0 {
+  color: green;
+}
+
 <div
   className="glamor-2 glamor-3"
 >
@@ -176,17 +176,17 @@ exports[`styled component as selector 1`] = `
 `;
 
 exports[`styled component as selector function interpolation 1`] = `
-.glamor-3 .glamor-0 {
-  color: green;
-}
-
 .glamor-3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
+.glamor-3 .glamor-0 {
+  color: green;
+}
+
 .glamor-1 {
   font-size: 20;
 }
@@ -412,19 +412,19 @@ exports[`styled nested 1`] = `
   font-size: 20px;
 }
 
-.glamor-3 div span {
-  color: red;
+.glamor-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .glamor-3 div {
   color: green;
 }
 
-.glamor-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+.glamor-3 div span {
+  color: red;
 }
 
 <div
@@ -494,12 +494,6 @@ exports[`styled object as style 1`] = `
 `;
 
 exports[`styled object composition 1`] = `
-.glamor-1:hover {
-  -webkit-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-
 .glamor-1 {
   border-radius: 50%;
   -webkit-transition: -webkit-transform 400ms ease-in-out;
@@ -512,6 +506,12 @@ exports[`styled object composition 1`] = `
   color: blue;
 }
 
+.glamor-1:hover {
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+
 <img
   className="glamor-0 glamor-1"
 />

diff --git a/packages/emotion-server/test/__snapshots__/index.test.js.snap b/packages/emotion-server/test/__snapshots__/index.test.js.snap
diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js
@@ -21,21 +21,46 @@ export function flush() {
 }
 
 let rule = ''
+let isRootSelector = false
+let queue = []
 
-function insertionPlugin(context, content, selector, parent) {
+const insertRule = sheet.insert.bind(sheet)
+
+function insertionPlugin(context, content, selectors, parent) {
   switch (context) {
-    case -2:
-      if (rule !== '') sheet.insert(rule)
-      rule = ''
+    case -2: {
+      if (rule !== '') {
+        if (isRootSelector === true) {
+          queue.push(rule)
+        } else {
+          queue.unshift(rule)
+        }
+        rule = ''
+      }
+
+      queue.forEach(insertRule)
+      queue = []
       break
+    }
+
     case 2: {
-      if (rule !== '') sheet.insert(rule)
-      rule = `${selector.join(',')}{${content}}`
+      if (rule !== '') {
+        if (isRootSelector === true) {
+          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
-      sheet.insert(`${selector.join(',')}{${content}}`)
+      queue.push(`${selectors.join(',')}{${content}}`)
       rule = ''
   }
 }

diff --git a/packages/emotion/test/__snapshots__/css-prop.test.js.snap b/packages/emotion/test/__snapshots__/css-prop.test.js.snap
@@ -50,16 +50,16 @@ exports[`css prop react kitchen sink 1`] = `
   display: inline-flex;
 }
 
-.glamor-3:hover {
-  font-weight: bold;
-  color: gray;
-}
-
 .glamor-3 {
   color: red;
   border-radius: 5;
 }
 
+.glamor-3:hover {
+  font-weight: bold;
+  color: gray;
+}
+
 <div
   className="glamor-4 css__legacy-stuff"
 >

diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -30,10 +30,6 @@ exports[`css auto px 1`] = `
 `;
 
 exports[`css composition 1`] = `
-.glamor-0:hover {
-  color: hotpink;
-}
-
 .glamor-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -45,6 +41,10 @@ exports[`css composition 1`] = `
   justify-content: center;
 }
 
+.glamor-0:hover {
+  color: hotpink;
+}
+
 <div
   className="glamor-0"
 />
@@ -77,15 +77,6 @@ exports[`css composition stuff 2`] = `
 `;
 
 exports[`css composition with objects 1`] = `
-.glamor-0:hover {
-  color: blue;
-}
-
-.glamor-0:after {
-  content: " ";
-  color: red;
-}
-
 .glamor-0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -99,6 +90,15 @@ exports[`css composition with objects 1`] = `
   justify-content: center;
 }
 
+.glamor-0:after {
+  content: " ";
+  color: red;
+}
+
+.glamor-0:hover {
+  color: blue;
+}
+
 @media (min-width:420px) {
   .glamor-0 {
     color: green;
@@ -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;
@@ -315,8 +273,8 @@ exports[`css media query specificity 2`] = `
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 .some-class .some-other-class {
-  background-color: hotpink;
+.glamor-0 {
+  color: yellow;
 }
 
 .glamor-0 .some-class {
@@ -326,8 +284,8 @@ exports[`css nested 1`] = `
   display: flex;
 }
 
-.glamor-0 {
-  color: yellow;
+.glamor-0 .some-class .some-other-class {
+  background-color: hotpink;
 }
 
 @media (max-width:600px) {