Fix at-rules nesting (#216)

Fixes #214

lib/style-transform.js

@@ -4,7 +4,11 @@ function disableNestingPlugin(...args) {
   let [context, , , parent = [], line, column] = args
   if (context === 2) {
     parent = parent[0]
-    if (typeof parent === 'string' && parent.trim().length > 0) {
+    if (
+      typeof parent === 'string' &&
+      parent.trim().length > 0 &&
+      parent.charAt(0) !== '@'
+    ) {
       throw new Error(
         `Nesting detected at ${line}:${column}. ` +
           'Unfortunately nesting is not supported by styled-jsx.'

package.json

@@ -62,7 +62,7 @@
     "escape-string-regexp": "1.0.5",
     "source-map": "0.5.6",
     "string-hash": "1.1.1",
-    "stylis": "3.0.5"
+    "stylis": "3.0.10"
   },
   "devDependencies": {
     "ava": "0.19.1",

test/__snapshots__/index.js.snap

@@ -145,7 +145,7 @@ export default (() => <div data-jsx={1144769207} data-jsx-ext={\`\${styles3.__sc
 exports[`works with global styles 1`] = `
 "import _JSXStyle from 'styled-jsx/style';
 const Test = () => <div data-jsx={3477488769}>
-    <_JSXStyle styleId={3477488769} css={\\"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo- 1s ease-out;animation:foo- 1s ease-out}div a{display:none}[data-test]>div{color:red}\\"} />
+    <_JSXStyle styleId={3477488769} css={\\"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}\\"} />
   </div>;
 
 const Test2 = () => <_JSXStyle styleId={188072295} css={\\"p{color:red}\\"} />;"

test/__snapshots__/styles.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`transpile styles with attributes 1`] = `"p{color:blue}p{color:blue}p,a[data-jsx=\\"123\\"]{color:blue}.foo+a{color:red}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif}p[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]{color:red}*[data-jsx=\\"123\\"]{color:blue}[href=\\"woot\\"][data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"] a[data-jsx=\\"123\\"] span[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"] span{background:blue}p[data-jsx=\\"123\\"] a[title=\\"'w ' '  t'\\"][data-jsx=\\"123\\"]{margin:auto}p[data-jsx=\\"123\\"] span:not(.test){color:green}p[data-jsx=\\"123\\"],h1[data-jsx=\\"123\\"]{color:blue;-webkit-animation:hahaha-123 3s ease forwards infinite;animation:hahaha-123 3s ease forwards infinite;-webkit-animation-name:hahaha-123;animation-name:hahaha-123;-webkit-animation-delay:100ms;animation-delay:100ms}p[data-jsx=\\"123\\"]{-webkit-animation:hahaha-123 1s,hehehe-123 2s;animation:hahaha-123 1s,hehehe-123 2s}p[data-jsx=\\"123\\"]:hover{color:red}p[data-jsx=\\"123\\"]::before{color:red}[data-jsx=\\"123\\"]:hover{color:red}[data-jsx=\\"123\\"]::before{color:red}[data-jsx=\\"123\\"]:hover p[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]+a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]~a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]>a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]>>a[data-jsx=\\"123\\"]{color:red}@-webkit-keyframes hahaha-123{from{top:0}to{top:100}}@keyframes hahaha-123{from{top:0}to{top:100}}@-webkit-keyframes hehehe-123{from{left:0}to{left:100}}@keyframes hehehe-123{from{left:0}to{left:100}}@media (min-width:500px){.test[data-jsx=\\"123\\"]{color:red}}.test[data-jsx=\\"123\\"]{display:block}.inline-flex[data-jsx=\\"123\\"]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-flexbox;display:inline-flex}.flex[data-jsx=\\"123\\"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.test[data-jsx=\\"123\\"]{box-shadow:0 0 10px black, inset 0 0 5px black}.test[title=\\",\\"][data-jsx=\\"123\\"]{display:inline-block}.test.is-status[data-jsx=\\"123\\"] .test[data-jsx=\\"123\\"]{color:red}"`;
+exports[`transpile styles with attributes 1`] = `"p{color:blue}p{color:blue}p,a[data-jsx=\\"123\\"]{color:blue}.foo+a{color:red}body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif}p[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]{color:red}*[data-jsx=\\"123\\"]{color:blue}[href=\\"woot\\"][data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"] a[data-jsx=\\"123\\"] span[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"] span{background:blue}p[data-jsx=\\"123\\"] a[title=\\"'w ' '  t'\\"][data-jsx=\\"123\\"]{margin:auto}p[data-jsx=\\"123\\"] span:not(.test){color:green}p[data-jsx=\\"123\\"],h1[data-jsx=\\"123\\"]{color:blue;-webkit-animation:hahahadatajsx123 3s ease forwards infinite;animation:hahahadatajsx123 3s ease forwards infinite;-webkit-animation-name:hahahadatajsx123;animation-name:hahahadatajsx123;-webkit-animation-delay:100ms;animation-delay:100ms}p[data-jsx=\\"123\\"]{-webkit-animation:hahahadatajsx123 1s,hehehedatajsx123 2s;animation:hahahadatajsx123 1s,hehehedatajsx123 2s}p[data-jsx=\\"123\\"]:hover{color:red}p[data-jsx=\\"123\\"]::before{color:red}[data-jsx=\\"123\\"]:hover{color:red}[data-jsx=\\"123\\"]::before{color:red}[data-jsx=\\"123\\"]:hover p[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]+a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]~a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]>a[data-jsx=\\"123\\"]{color:red}p[data-jsx=\\"123\\"]>>a[data-jsx=\\"123\\"]{color:red}@-webkit-keyframes hahahadatajsx123{from{top:0}to{top:100}}@keyframes hahahadatajsx123{from{top:0}to{top:100}}@-webkit-keyframes hehehedatajsx123{from{left:0}to{left:100}}@keyframes hehehedatajsx123{from{left:0}to{left:100}}@media (min-width:500px){.test[data-jsx=\\"123\\"]{color:red}}.test[data-jsx=\\"123\\"]{display:block}.inline-flex[data-jsx=\\"123\\"]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-flexbox;display:inline-flex}.flex[data-jsx=\\"123\\"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.test[data-jsx=\\"123\\"]{box-shadow:0 0 10px black, inset 0 0 5px black}.test[title=\\",\\"][data-jsx=\\"123\\"]{display:inline-block}.test.is-status[data-jsx=\\"123\\"] .test[data-jsx=\\"123\\"]{color:red}"`;

test/styles.js

@@ -14,11 +14,69 @@ test('transpile styles with attributes', async t => {
 })
 
 test('throws when using nesting', t => {
-  t.throws(() => transform('', `div { &:hover { color: red } }`))
+  const fixtures = [
+    `div { &:hover { color: red } }`,
+
+    `div {
+      color: green;
+      &:hover { color: red } }`,
+
+    `:hover { div { color: red } }`,
+
+    `@media all {
+      div {
+        &:hover { color: red }
+      }
+    }`,
+
+    `* { div { color: red }
+      &.test {
+        color: red;
+      }
+    }`,
+
+    `span {}
+      .test {
+        color: red;
+      div& {
+        color: red;
+      }
+    }`
+  ]
+
+  fixtures.forEach(fixture => {
+    t.throws(() => transform('', fixture))
+    t.throws(() => transform('[data-jsx="123"]', fixture))
+  })
 })
 
-test("doesn't throw when using media queries", t => {
-  t.notThrows(() =>
-    transform('', '@media (min-width: 480px) { div { color: red } }')
-  )
+test("doesn't throw when using at-rules", t => {
+  const fixtures = [
+    '@media (min-width: 480px) { div { color: red } }',
+
+    `span {}
+      @media (min-width: 480px) { div { color: red } }`,
+
+    `@media (min-width: 480px) { div { color: red } }
+    span {}`,
+
+    `:hover {}
+      @media (min-width: 480px) { div { color: red } }`,
+
+    `:hover { color: green }
+      @media (min-width: 480px) { div { color: red } }`,
+
+    `@media (min-width: 480px) { div {} }`,
+
+    `@keyframes foo {
+      0% { opacity: 0 }
+      100% { opacity: 1}
+    }
+    `
+  ]
+
+  fixtures.forEach(fixture => {
+    t.notThrows(() => transform('', fixture))
+    t.notThrows(() => transform('[data-jsx="123"]', fixture))
+  })
 })

yarn.lock

@@ -4625,9 +4625,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-stylis@3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.5.tgz#debb41e029cc9ee14880cf435fbe0a0933e25d2c"
+stylis@3.0.10:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.10.tgz#9f561e8a9799c2c317c596583bcaaa52a0d27663"
 
 supports-color@^2.0.0:
   version "2.0.0"