Repository: tkh44/emotion
Pull request #228 (2017-08-04 17:45:48)

Spread out fragments earlier so that we can do redic nesting.
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->



codecov-io: # [Codecov](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=h1) Report
> Merging [#228](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=desc) into [master](https://codecov.io/gh/tkh44/emotion/commit/502b76f6d651adbdb847d0bd12f6c583bfc692be?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `91.66%`.

[![Impacted file tree graph](https://codecov.io/gh/tkh44/emotion/pull/228/graphs/tree.svg?width=650&src=pr&token=B1bWuYNE2t&height=150)](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##           master     #228   +/-   ##
=======================================
  Coverage   90.27%   90.27%           
=======================================
  Files          20       20           
  Lines         967      967           
  Branches      262      261    -1     
=======================================
  Hits          873      873           
  Misses         76       76           
  Partials       18       18
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/index.js](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=tree#diff-c3JjL2luZGV4Lmpz) | `94.09% <91.66%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=footer). Last update [502b76f...3d9f039](https://codecov.io/gh/tkh44/emotion/pull/228?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/index.js b/src/index.js
index 0ee70d57..6b3f1aca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -245,24 +245,6 @@ function deconstruct (style) {
     } else if (key.indexOf('@supports') === 0) {
       supports = supports || {}
       supports[key] = deconstruct(style[key])
-    } else if (key.indexOf('$') === 0) {
-      const fragment = style[key]
-      plain = plain || {}
-
-      if (typeof fragment === 'string') {
-        const match = emotionClassRegex.exec(fragment)
-        if (match !== null && registered[match[1]]) {
-          // replace fragments
-          const reg = registered[match[1]]
-          if (reg.type !== 'css') {
-            throw new Error('cannot merge this rule')
-          }
-          assign(plain, reg.style)
-        }
-      } else {
-        // what about arrays?
-        assign(plain, fragment)
-      }
     } else {
       plain = plain || {}
 
@@ -329,6 +311,10 @@ function toRule (spec) {
   return ret
 }
 
+function isFragment (key) {
+  return key.indexOf('$') === 0;
+}
+
 function isSelector (key) {
   const possibles = [':', '.', '[', '>', ' ']
   let found = false
@@ -413,7 +399,33 @@ function build (
     }
 
     forEach(keys(_src || {}), key => {
-      if (isSelector(key)) {
+      // replace fragments
+      if (isFragment(key)) {
+        const fragment = _src[key]
+
+        if (typeof fragment === 'string') {
+          const match = emotionClassRegex.exec(fragment)
+          if (match !== null && registered[match[1]]) {
+            const reg = registered[match[1]]
+            if (reg.type !== 'css') {
+              throw new Error('cannot merge this rule')
+            }
+            build(dest, {
+              selector,
+              mq,
+              supp,
+              src: reg.style
+            })
+          }
+        } else {
+          build(dest, {
+            selector,
+            mq,
+            supp,
+            src: fragment
+          })
+        }
+      } else if (isSelector(key)) {
         build(dest, {
           selector: joinSelectors(selector, key),
           mq,


Test patch:
diff --git a/test/__snapshots__/react.test.js.snap b/test/__snapshots__/react.test.js.snap
index ff9b0058..a27373b5 100644
--- a/test/__snapshots__/react.test.js.snap
+++ b/test/__snapshots__/react.test.js.snap
@@ -6,6 +6,18 @@ exports[`styled basic render 1`] = `
   font-size: 20px;
 }
 
+@media (min-width: 420px) {
+  .glamor-1 {
+    color: blue;
+  }
+}
+
+@media (min-width: 420px) and  (min-width: 520px) {
+  .glamor-1 {
+    color: green;
+  }
+}
+
 <h1
   className="glamor-0 glamor-1"
 >
@@ -497,6 +509,18 @@ exports[`styled random expressions 1`] = `
   color: green;
 }
 
+@media (min-width: 420px) {
+  .glamor-1 {
+    color: blue;
+  }
+}
+
+@media (min-width: 420px) and  (min-width: 520px) {
+  .glamor-1 {
+    color: green;
+  }
+}
+
 <h1
   className="glamor-0 legacy__class glamor-1"
   prop={true}
diff --git a/test/react.test.js b/test/react.test.js
index 7a1dbc07..72307b43 100644
--- a/test/react.test.js
+++ b/test/react.test.js
@@ -26,6 +26,12 @@ describe('styled', () => {
     const H1 = styled.h1`
       color: blue;
       font-size: ${fontSize};
+      @media (min-width: 420px) {
+        color: blue;
+        @media (min-width: 520px) {
+          color: green;
+        }
+      }
     `
 
     const tree = renderer.create(<H1>hello world</H1>).toJSON()
@@ -90,7 +96,18 @@ describe('styled', () => {
         margin-left: ${l};
       `
     }
+
+    const mq = css`
+      @media(min-width: 420px) {
+        color: blue;
+        @media(min-width: 520px) {
+          color: green;
+        }
+      }
+    `
+
     const H1 = styled('h1')`
+      ${mq};
       ${props => props.prop && css`font-size: 1rem`};
       ${margin(0, 'auto', 0, 'auto')};
       color: green;