Media query nested selector fix (#317)

* Start of media query selector fix * Update tests * Replace a return with break
emotion-js · Sep 21, 2017 · 30d8321 · 30d8321
1 parent 39cd424
commit 30d8321
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 25 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
@@ -200,19 +200,15 @@ exports[`css handles objects 1`] = `
 `;
 
 exports[`css nested 1`] = `
-.glamor-0 .some-class {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
 .glamor-0 .some-class .some-other-class {
   background-color: hotpink;
 }
 
 .glamor-0 .some-class {
-  background-color: pink;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .glamor-0 {

diff --git a/packages/babel-plugin-emotion/test/macro/css.test.js b/packages/babel-plugin-emotion/test/macro/css.test.js
@@ -154,7 +154,7 @@ describe('css', () => {
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test.skip('nested', () => {
+  test('nested', () => {
     const cls1 = css`
       color: yellow;
       & .some-class {
@@ -166,9 +166,6 @@ describe('css', () => {
           background-color: pink;
         }
       }
-      &.another-class {
-        display: flex;
-      }
     `
     const tree = renderer
       .create(

diff --git a/packages/emotion/src/index.js b/packages/emotion/src/index.js
@@ -20,16 +20,23 @@ export function flush() {
   sheet.inject()
 }
 
+let rule = ''
+
 function insertionPlugin(context, content, selector, parent) {
   switch (context) {
+    case -2:
+      if (rule !== '') sheet.insert(rule)
+      rule = ''
+      break
     case 2: {
-      if (parent[0] === selector[0]) {
-        break
-      }
+      if (rule !== '') sheet.insert(rule)
+      rule = `${selector.join(',')}{${content}}`
+      break
     }
     // after an at rule block
     case 3: // eslint-disable-line no-fallthrough
       sheet.insert(`${selector.join(',')}{${content}}`)
+      rule = ''
   }
 }
 

diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap
@@ -132,6 +132,21 @@ exports[`css css variables 1`] = `
 />
 `;
 
+exports[`css explicit & 1`] = `
+<div
+  className="css-16ooeb3 another-class"
+/>
+`;
+
+exports[`css explicit & 2`] = `
+".css-16ooeb3.another-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}"
+`;
+
 exports[`css falsy property value in object 1`] = `
 .glamor-0 {
   display: -webkit-box;
@@ -223,22 +238,57 @@ exports[`css handles objects 1`] = `
 />
 `;
 
-exports[`css nested 1`] = `
+exports[`css media query specificity 1`] = `
+"@media (min-width:420px) {
+  .css-mfslnr {
+    width: 96px;
+    height: 96px;
+  }
+}
+
+.css-mfslnr {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}"
+`;
+
+exports[`css media query specificity 2`] = `
 .glamor-0 {
-  color: yellow;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+@media (min-width:420px) {
+  .glamor-0 {
+    width: 96px;
+    height: 96px;
+  }
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`css nested 1`] = `
+.glamor-0 .some-class .some-other-class {
+  background-color: hotpink;
 }
 
 .glamor-0 .some-class {
   display: -webkit-box;
+  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.glamor-0 .some-class .some-other-class {
-  background-color: hotpink;
+.glamor-0 {
+  color: yellow;
 }
 
-@media (max-width: 600px) {
+@media (max-width:600px) {
   .glamor-0 .some-class {
     background-color: pink;
   }

diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import { css, flush } from 'emotion'
+import { css, flush, sheet } from 'emotion'
 
 describe('css', () => {
   test('float property', () => {
@@ -166,7 +166,7 @@ describe('css', () => {
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test.skip('nested', () => {
+  test('nested', () => {
     const cls1 = css`
       color: yellow;
       & .some-class {
@@ -178,9 +178,6 @@ describe('css', () => {
           background-color: pink;
         }
       }
-      &.another-class {
-        display: flex;
-      }
     `
     const tree = renderer
       .create(
@@ -193,6 +190,20 @@ describe('css', () => {
       .toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('explicit &', () => {
+    flush()
+    const cls1 = css`
+      &.another-class {
+        display: flex;
+      }
+    `
+    const tree = renderer
+      .create(<div className={`${cls1} another-class`} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+    expect(sheet).toMatchSnapshot()
+    flush()
+  })
   test('falsy property value in object', () => {
     const cls = css({ display: 'flex', backgroundColor: undefined })
     const tree = renderer.create(<div className={cls} />).toJSON()
@@ -252,4 +263,22 @@ describe('css', () => {
     const tree2 = renderer.create(<div className={cls1} />).toJSON()
     expect(tree2).toMatchSnapshot()
   })
+  test.skip('media query specificity', () => {
+    flush()
+    const cls = css`
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+
+      @media (min-width: 420px) {
+        width: 96px;
+        height: 96px;
+      }
+    `
+
+    const tree = renderer.create(<div className={cls} />).toJSON()
+    expect(sheet).toMatchSnapshot()
+    expect(tree).toMatchSnapshot()
+    flush()
+  })
 })