@swc/plugin-styled-jsx 1.5.70 → 1.5.71

package/transform/src/visitor.rs

@@ -465,6 +465,7 @@ impl StyledJSXTransformer {
         let css_span: Span;
         let is_dynamic;
         let mut expressions = vec![];
+        let mut is_expr_property = vec![];
         match style_expr {
             StyleExpr::Str(Str { value, span, .. }) => {
                 hasher.write(value.as_ref().as_bytes());
@@ -489,12 +490,23 @@ impl StyledJSXTransformer {
                     drop_span(expr.clone()).hash(&mut hasher);
                     let mut s = String::new();
                     for i in 0..quasis.len() {
+                        // TODO: Handle comments
+
+                        let before = &*quasis[i].raw;
+                        let before = before.trim();
+
                         let placeholder = if i == quasis.len() - 1 {
+                            is_expr_property.push(false);
                             String::new()
+                        } else if before.ends_with([';', '{']) {
+                            is_expr_property.push(true);
+                            format!("__styled-jsx-placeholder-{}__: 0", i)
                         } else {
+                            is_expr_property.push(false);
                             format!("__styled-jsx-placeholder-{}__", i)
                         };
-                        s = format!("{}{}{}", s, quasis[i].raw, placeholder)
+                        s.push_str(&quasis[i].raw);
+                        s.push_str(&placeholder);
                     }
                     css = s;
                     css_span = *span;
@@ -530,6 +542,7 @@ impl StyledJSXTransformer {
             css_span,
             is_dynamic,
             expressions,
+            is_expr_property,
         })
     }
 

package/transform/tests/errors/ts-with-css-resolve/output.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
 export default {
-    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
+    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{color:#fff;background:#000;height:100px;font-weight:700}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"
 };

package/transform/tests/fixture/css-selector-after-pseudo/output.js

@@ -4,7 +4,7 @@ function NavigationItem({ active, className }) {
         active
     }, className, 'navigation-item') || "")}>
 
-      <_JSXStyle id={"2342aae4628612c6"}>{'.navigation-item.jsx-2342aae4628612c6 a::after{content:attr(data-text);content:attr(data-text)/""}'}</_JSXStyle>
+      <_JSXStyle id={"2342aae4628612c6"}>{'.navigation-item.jsx-2342aae4628612c6 a:after{content:attr(data-text);content:attr(data-text)/""}'}</_JSXStyle>
 
     </span>;
 }

package/transform/tests/fixture/fragment/output.js

@@ -28,7 +28,7 @@ export default (()=><>
 
     </>
 
-    <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297{color:cyan}.foo.jsx-6dd5f97e085c0297{font-size:18px;color:hotpink}#head.jsx-6dd5f97e085c0297{text-decoration:underline}"}</_JSXStyle>
+    <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297{color:#0ff}.foo.jsx-6dd5f97e085c0297{color:#ff69b4;font-size:18px}#head.jsx-6dd5f97e085c0297{text-decoration:underline}"}</_JSXStyle>
 
   </>);
 function Component1() {

package/transform/tests/fixture/global/output.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
 
-    <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;-moz-animation:foo 1s ease-out;-o-animation:foo 1s ease-out;animation:foo 1s ease-out}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
+    <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}:hover{color:red;animation:1s ease-out foo;display:flex}div a{display:none}[data-test]>div{color:red}"}</_JSXStyle>
 
   </div>;
 const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>;

package/transform/tests/fixture/global-redundant/output.js

@@ -4,7 +4,7 @@ export default function IndexPage() {
 
       should be blue.
 
-      <_JSXStyle id={"b6abd0684ba81871"}>{"div{color:blue}"}</_JSXStyle>
+      <_JSXStyle id={"b6abd0684ba81871"}>{"div{color:#00f}"}</_JSXStyle>
 
     </div>;
 }

package/transform/tests/fixture/issue-30480/input.js

@@ -2,6 +2,10 @@
 
 export default ({ breakPoint }) => (
   <div>
-    <style jsx>{`@media (${breakPoint}) {}`}</style>
+    <style jsx>{`@media (${breakPoint}) {
+      .test {
+        margin-bottom: 1em;
+      }
+    }`}</style>
   </div>
 )

package/transform/tests/fixture/issue-30480/output.js

@@ -1,15 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
 export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
         [
-            "5d2a0e645566ce9c",
+            "ff798a455a83a572",
             [
                 breakPoint
             ]
         ]
     ])}>
 
-    <_JSXStyle id={"5d2a0e645566ce9c"} dynamic={[
+    <_JSXStyle id={"ff798a455a83a572"} dynamic={[
         breakPoint
-    ]}>{`@media(${breakPoint}){}`}</_JSXStyle>
+    ]}>{`@media (${breakPoint}){.test.__jsx-style-dynamic-selector{margin-bottom:1em}}`}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/issue-30570/output.js

@@ -6,7 +6,7 @@ export default function IndexPage() {
 
 
 
-        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports((display:flex)or (display:-webkit-box)or (display:-webkit-flex)or (display:-moz-box)or (display:-ms-flexbox)){h1{color:hotpink}}"}</_JSXStyle>
+        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex){h1{color:#ff69b4}}"}</_JSXStyle>
 
       </div>;
 }

package/transform/tests/fixture/styles/output.js

@@ -18,16 +18,16 @@ const b = {
     styles: <_JSXStyle id={"7a7480dd17e82e07"}>{`div.jsx-7a7480dd17e82e07{color:${colors.green.light}}a.jsx-7a7480dd17e82e07{color:red}`}</_JSXStyle>,
     className: "jsx-7a7480dd17e82e07"
 };
-const dynamic = (colors1)=>{
+const dynamic = (colors)=>{
     const b = {
         styles: <_JSXStyle id={"9f775f199a8dfb95"} dynamic={[
-            colors1.green.light
-        ]}>{`div.__jsx-style-dynamic-selector{color:${colors1.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
+            colors.green.light
+        ]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
         className: _JSXStyle.dynamic([
             [
                 "9f775f199a8dfb95",
                 [
-                    colors1.green.light
+                    colors.green.light
                 ]
             ]
         ])

package/transform/tests/fixture/tpl-placeholder-1-as-property/output.js

@@ -21,8 +21,7 @@ export default class {
 
           <_JSXStyle id={"fc144a5ba38f1ea7"} dynamic={[
             inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
-        ]}>{`@media only screen{a.__jsx-style-dynamic-selector{${inputSize ? 'height: calc(2 * var(--a)) !important;' : ''}
-                }}`}</_JSXStyle>
+        ]}>{`@media only screen{a.__jsx-style-dynamic-selector{${inputSize ? 'height: calc(2 * var(--a)) !important;' : ''}}`}</_JSXStyle>
 
         </div>;
     }

package/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.js

@@ -24,7 +24,7 @@ export default class {
           <_JSXStyle id={"b9b97de593829e6"} dynamic={[
             a || 'var(--c)',
             b || 'inherit'
-        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{display:inline-block;padding:0 ${a || 'var(--c)'};color:${b || 'inherit'}}`}</_JSXStyle>
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{padding:0 ${a || 'var(--c)'};color:${b || 'inherit'};display:inline-block}`}</_JSXStyle>
 
         </div>;
     }

package/transform/tests/fixture/transform-css/input.js

@@ -9,19 +9,19 @@ export default () => (
       }
       
       :global(p) {
-        color: blue
+        color: #001
       }
       
       :global(p){
-        color: blue;
+        color: #002;
       }
       
       :global(p), a {
-        color: blue;
+        color: #003;
       }
       
       :global(.foo + a) {
-        color: red;
+        color: #004;
       }
       
       :global(body) {
@@ -29,27 +29,27 @@ export default () => (
       }
       
       p {
-        color: red;
+        color: #005;
       }
       
       p{
-        color: red
+        color: #006
       }
       
       * {
-        color: blue;
+        color: #007;
       }
       
       [href="woot"] {
-        color: red;
+        color: #008;
       }
       
       p a span {
-        color: red;
+        color: #009;
       }
       
       p :global(span) {
-        background: blue
+        background: #00a
       }
       
       p a[title="'w ' '  t'"] {
@@ -57,11 +57,11 @@ export default () => (
       }
       
       p :global(span:not(.test)) {
-        color: green
+        color: #00b
       }
       
       p, h1 {
-        color: blue;
+        color: #00c;
         animation: hahaha 3s ease forwards infinite;
         animation-name: hahaha;
         animation-delay: 100ms;
@@ -72,35 +72,35 @@ export default () => (
       }
       
       p:hover {
-        color: red;
+        color: #00d;
       }
       
       p::before {
-        color: red;
+        color: #00e;
       }
       
       :hover {
-        color: red;
+        color: #00f;
       }
       
       ::before {
-        color: red;
+        color: #010;
       }
       
       :hover p {
-        color: red;
+        color: #011;
       }
       
       p + a {
-        color: red;
+        color: #012;
       }
       
       p ~ a {
-        color: red;
+        color: #013;
       }
       
       p > a {
-        color: red;
+        color: #014;
       }
       
       @keyframes hahaha {
@@ -115,7 +115,7 @@ export default () => (
       
       @media (min-width: 500px) {
         .test {
-          color: red;
+          color: #015;
         }
       }
       
@@ -145,7 +145,7 @@ export default () => (
       }
       
       .test.is-status .test {
-        color: red;
+        color: #016;
       }
       
       .a-selector:hover,

package/transform/tests/fixture/transform-css/output.js

@@ -1,8 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-768337a97aceabd1"}>
+export default (()=><div className={"jsx-4a27e5cf1c34b3df"}>
 
-    <p className={"jsx-768337a97aceabd1"}>test</p>
+    <p className={"jsx-4a27e5cf1c34b3df"}>test</p>
 
-    <_JSXStyle id={"768337a97aceabd1"}>{'html.jsx-768337a97aceabd1{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:blue}p{color:blue}p,a.jsx-768337a97aceabd1{color:blue}.foo+a{color:red}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}p.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1{color:red}*.jsx-768337a97aceabd1{color:blue}[href="woot"].jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1 a.jsx-768337a97aceabd1 span.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1 span{background:blue}p.jsx-768337a97aceabd1 a[title="\'w \' \'  t\'"].jsx-768337a97aceabd1{margin:auto}p.jsx-768337a97aceabd1 span:not(.test){color:green}p.jsx-768337a97aceabd1,h1.jsx-768337a97aceabd1{color:blue;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-768337a97aceabd1{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-768337a97aceabd1:hover{color:red}p.jsx-768337a97aceabd1::before{color:red}.jsx-768337a97aceabd1:hover{color:red}.jsx-768337a97aceabd1::before{color:red}.jsx-768337a97aceabd1:hover p.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1+a.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1~a.jsx-768337a97aceabd1{color:red}p.jsx-768337a97aceabd1>a.jsx-768337a97aceabd1{color:red}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-768337a97aceabd1{color:red}}.test.jsx-768337a97aceabd1{display:block}.inline-flex.jsx-768337a97aceabd1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-768337a97aceabd1{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-768337a97aceabd1{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=","].jsx-768337a97aceabd1{display:inline-block}.test.is-status.jsx-768337a97aceabd1 .test.jsx-768337a97aceabd1{color:red}.a-selector.jsx-768337a97aceabd1:hover,.a-selector.jsx-768337a97aceabd1:focus{outline:none}@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-768337a97aceabd1{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-768337a97aceabd1{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-768337a97aceabd1{margin-bottom:2rem}}}'}</_JSXStyle>
+    <_JSXStyle id={"4a27e5cf1c34b3df"}>{"html.jsx-4a27e5cf1c34b3df{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#002}a.jsx-4a27e5cf1c34b3df{color:#003}p{color:#003}a+.foo{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}p.jsx-4a27e5cf1c34b3df{color:#006}.jsx-4a27e5cf1c34b3df{color:#007}[href=woot].jsx-4a27e5cf1c34b3df{color:#008}p.jsx-4a27e5cf1c34b3df a.jsx-4a27e5cf1c34b3df span.jsx-4a27e5cf1c34b3df{color:#009}p.jsx-4a27e5cf1c34b3df span{background:#00a}p.jsx-4a27e5cf1c34b3df a[title=\"'w ' '  t'\"].jsx-4a27e5cf1c34b3df{margin:auto}p.jsx-4a27e5cf1c34b3df :not(.test)span{color:#00b}p.jsx-4a27e5cf1c34b3df,h1.jsx-4a27e5cf1c34b3df{color:#00c;animation:3s .1s infinite forwards hahaha}p.jsx-4a27e5cf1c34b3df{animation:1s hahaha,2s hehehe}p.jsx-4a27e5cf1c34b3df:hover{color:#00d}p.jsx-4a27e5cf1c34b3df:before{color:#00e}:hover{color:#00f}:before{color:#010}:hoverp.jsx-4a27e5cf1c34b3df{color:#011}p.jsx-4a27e5cf1c34b3df+a.jsx-4a27e5cf1c34b3df{color:#012}p.jsx-4a27e5cf1c34b3df~a.jsx-4a27e5cf1c34b3df{color:#013}p.jsx-4a27e5cf1c34b3df>a.jsx-4a27e5cf1c34b3df{color:#014}@keyframes hahaha{0%{top:0}to{top:100px}}@keyframes hehehe{0%{left:0}to{left:100px}}@media (width>=500px){.test.jsx-4a27e5cf1c34b3df{color:#015}}.test.jsx-4a27e5cf1c34b3df{display:block}.inline-flex.jsx-4a27e5cf1c34b3df{display:inline-flex}.flex.jsx-4a27e5cf1c34b3df{display:flex}.test.jsx-4a27e5cf1c34b3df{box-shadow:0 0 10px #000,inset 0 0 5px #000}.test[title=\\,].jsx-4a27e5cf1c34b3df{display:inline-block}.test.is-status.jsx-4a27e5cf1c34b3df .test.jsx-4a27e5cf1c34b3df{color:#016}.a-selector.jsx-4a27e5cf1c34b3df:hover,.a-selector.jsx-4a27e5cf1c34b3df:focus{outline:none}@media (width>=1px) and (width<=768px){[class*=grid__col--].jsx-4a27e5cf1c34b3df{margin-top:12px;margin-bottom:12px}}@media (width<=64em){.test.jsx-4a27e5cf1c34b3df{margin-bottom:1em}@supports ((-moz-appearance:none)) and (display:contents){.test.jsx-4a27e5cf1c34b3df{margin-bottom:2rem}}}"}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/transform-css-complex-selector/output.js

@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-713499aa363d6373"}>
 
     <p className={"jsx-713499aa363d6373"}>test</p>
 
-    <_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:blue}p.jsx-713499aa363d6373 a[title=\"'w ' '  t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 span:not(.test){color:green}p.jsx-713499aa363d6373,h1.jsx-713499aa363d6373{color:blue;-webkit-animation:hahaha 3s ease forwards infinite;-moz-animation:hahaha 3s ease forwards infinite;-o-animation:hahaha 3s ease forwards infinite;animation:hahaha 3s ease forwards infinite;-webkit-animation-name:hahaha;-moz-animation-name:hahaha;-o-animation-name:hahaha;animation-name:hahaha;-webkit-animation-delay:100ms;-moz-animation-delay:100ms;-o-animation-delay:100ms;animation-delay:100ms}p.jsx-713499aa363d6373{-webkit-animation:hahaha 1s,hehehe 2s;-moz-animation:hahaha 1s,hehehe 2s;-o-animation:hahaha 1s,hehehe 2s;animation:hahaha 1s,hehehe 2s}p.jsx-713499aa363d6373:hover{color:red}p.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover{color:red}.jsx-713499aa363d6373::before{color:red}.jsx-713499aa363d6373:hover p.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373+a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373~a.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373>a.jsx-713499aa363d6373{color:red}@-webkit-keyframes hahaha{from{top:0}to{top:100}}@-moz-keyframes hahaha{from{top:0}to{top:100}}@-o-keyframes hahaha{from{top:0}to{top:100}}@keyframes hahaha{from{top:0}to{top:100}}@-webkit-keyframes hehehe{from{left:0}to{left:100}}@-moz-keyframes hehehe{from{left:0}to{left:100}}@-o-keyframes hehehe{from{left:0}to{left:100}}@keyframes hehehe{from{left:0}to{left:100}}@media(min-width:500px){.test.jsx-713499aa363d6373{color:red}}.test.jsx-713499aa363d6373{display:block}.inline-flex.jsx-713499aa363d6373{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-713499aa363d6373{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-713499aa363d6373{-webkit-box-shadow:0 0 10px black,inset 0 0 5px black;-moz-box-shadow:0 0 10px black,inset 0 0 5px black;box-shadow:0 0 10px black,inset 0 0 5px black}.test[title=\",\"].jsx-713499aa363d6373{display:inline-block}.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}.a-selector.jsx-713499aa363d6373:hover,.a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
+    <_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}p.jsx-713499aa363d6373 span{background:#00f}p.jsx-713499aa363d6373 a[title=\"'w ' '  t'\"].jsx-713499aa363d6373{margin:auto}p.jsx-713499aa363d6373 :not(.test)span{color:green}p.jsx-713499aa363d6373,h1.jsx-713499aa363d6373{color:#00f;animation:3s .1s infinite forwards hahaha}p.jsx-713499aa363d6373{animation:1s hahaha,2s hehehe}p.jsx-713499aa363d6373:hover,p.jsx-713499aa363d6373:before,:hover,:before,:hoverp.jsx-713499aa363d6373,p.jsx-713499aa363d6373+a.jsx-713499aa363d6373,p.jsx-713499aa363d6373~a.jsx-713499aa363d6373,p.jsx-713499aa363d6373>a.jsx-713499aa363d6373{color:red}@keyframes hahaha{0%{top:0}to{top:100px}}@keyframes hehehe{0%{left:0}to{left:100px}}@media (width>=500px){.test.jsx-713499aa363d6373{color:red}}.test.jsx-713499aa363d6373{display:block}.inline-flex.jsx-713499aa363d6373{display:inline-flex}.flex.jsx-713499aa363d6373{display:flex}.test.jsx-713499aa363d6373{box-shadow:0 0 10px #000,inset 0 0 5px #000}.test[title=\\,].jsx-713499aa363d6373{display:inline-block}.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}.a-selector.jsx-713499aa363d6373:hover,.a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/transform-css-complex-selector-2/input.js

@@ -0,0 +1,12 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      .a-selector:hover,
+      .a-selector:focus
+      {
+        outline: none;
+      }   
+    `}</style>
+  </div>
+)

package/transform/tests/fixture/transform-css-complex-selector-2/output.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-efc590d693035654"}>
+
+    <p className={"jsx-efc590d693035654"}>test</p>
+
+    <_JSXStyle id={"efc590d693035654"}>{".a-selector.jsx-efc590d693035654:hover,.a-selector.jsx-efc590d693035654:focus{outline:none}"}</_JSXStyle>
+
+  </div>);

package/transform/tests/fixture/transform-css-global/output.js

@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-53fd644ab080300c"}>
 
     <p className={"jsx-53fd644ab080300c"}>test</p>
 
-    <_JSXStyle id={"53fd644ab080300c"}>{'html.jsx-53fd644ab080300c{background-image:-webkit-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-moz-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:-o-linear-gradient(bottom,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg);background-image:linear-gradient(0deg,rgba(255,255,255,.8),rgba(255,255,255,.8)),url(/static/background.svg)}p{color:blue}p{color:blue}p,a.jsx-53fd644ab080300c{color:blue}.foo+a{color:red}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}'}</_JSXStyle>
+    <_JSXStyle id={"53fd644ab080300c"}>{"html.jsx-53fd644ab080300c{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#00f}a.jsx-53fd644ab080300c{color:#00f}p{color:#00f}a+.foo{color:red}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}"}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/transform-css-media-query/output.js

@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-1f7963ae04c6466a"}>
 
     <p className={"jsx-1f7963ae04c6466a"}>test</p>
 
-    <_JSXStyle id={"1f7963ae04c6466a"}>{'@media(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-1f7963ae04c6466a{margin-top:12px;margin-bottom:12px}}@media(max-width:64em){.test.jsx-1f7963ae04c6466a{margin-bottom:1em}@supports(-moz-appearance:none)and (display:contents){.test.jsx-1f7963ae04c6466a{margin-bottom:2rem}}}'}</_JSXStyle>
+    <_JSXStyle id={"1f7963ae04c6466a"}>{"@media (width>=1px) and (width<=768px){[class*=grid__col--].jsx-1f7963ae04c6466a{margin-top:12px;margin-bottom:12px}}@media (width<=64em){.test.jsx-1f7963ae04c6466a{margin-bottom:1em}@supports ((-moz-appearance:none)) and (display:contents){.test.jsx-1f7963ae04c6466a{margin-bottom:2rem}}}"}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/transform-css-normal/output.js

@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-1a19bb4817c105dd"}>
 
     <p className={"jsx-1a19bb4817c105dd"}>test</p>
 
-    <_JSXStyle id={"1a19bb4817c105dd"}>{'p.jsx-1a19bb4817c105dd{color:red}p.jsx-1a19bb4817c105dd{color:red}*.jsx-1a19bb4817c105dd{color:blue}[href="woot"].jsx-1a19bb4817c105dd{color:red}'}</_JSXStyle>
+    <_JSXStyle id={"1a19bb4817c105dd"}>{"p.jsx-1a19bb4817c105dd{color:red}.jsx-1a19bb4817c105dd{color:#00f}[href=woot].jsx-1a19bb4817c105dd{color:red}"}</_JSXStyle>
 
   </div>);

package/transform/tests/fixture/transform-css-nth-1/output.js

@@ -3,6 +3,6 @@ export default (()=><div className={"jsx-938ca197692ef624"}>
 
       <p className={"jsx-938ca197692ef624"}>test</p>
 
-      <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:lime}"}</_JSXStyle>
+      <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:#0f0}"}</_JSXStyle>
 
     </div>);