@swc/plugin-styled-jsx 1.3.0 → 1.5.2

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

@@ -0,0 +1,17 @@
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx>{`
+            @media only screen {
+                a {
+                    ${inputSize ? 'height: calc(2 * var(--a)) !important;' : ''}
+                }
+            }
+          `}</style>
+        </div>
+      )
+    }
+  }
+  

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

@@ -0,0 +1,29 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "fc144a5ba38f1ea7",
+                [
+                    inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "fc144a5ba38f1ea7",
+                [
+                    inputSize ? 'height: calc(2 * var(--a)) !important;' : ''
+                ]
+            ]
+        ])}>test</p>
+
+          <_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>
+
+        </div>;
+    }
+}

package/tests/fixture/tpl-placeholder-2-as-part-of-value/input.js

@@ -0,0 +1,21 @@
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx>{`
+            :global(.a):hover .b {
+              a: ${a[b]}px !important;
+              b: translate3d(
+                  0,
+                  ${-1 * (c || 0)}px,
+                  -${d}px
+                )
+                scale(1) !important;
+            }
+          `}</style>
+        </div>
+      )
+    }
+  }
+  

package/tests/fixture/tpl-placeholder-2-as-part-of-value/output.js

@@ -0,0 +1,34 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "73606d02cbadabf",
+                [
+                    a[b],
+                    -1 * (c || 0),
+                    d
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "73606d02cbadabf",
+                [
+                    a[b],
+                    -1 * (c || 0),
+                    d
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"73606d02cbadabf"} dynamic={[
+            a[b],
+            -1 * (c || 0),
+            d
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{a:${a[b]}px!important;b:translate3d(0,${-1 * (c || 0)}px,-${d}px)scale(1)!important}`}</_JSXStyle>
+
+        </div>;
+    }
+}

package/tests/fixture/tpl-placeholder-3-as-value/input.js

@@ -0,0 +1,17 @@
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx>{`
+            @media only screen {
+                a {
+                    color: ${a};
+                }
+            }
+          `}</style>
+        </div>
+      )
+    }
+  }
+  

package/tests/fixture/tpl-placeholder-3-as-value/output.js

@@ -0,0 +1,28 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "e37942245bf0eb35",
+                [
+                    a
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "e37942245bf0eb35",
+                [
+                    a
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"e37942245bf0eb35"} dynamic={[
+            a
+        ]}>{`@media only screen{a.__jsx-style-dynamic-selector{color:${a}}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

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

@@ -0,0 +1,17 @@
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx>{`
+            :global(.a):hover .b {
+              display: inline-block;
+              padding: 0 ${a || 'var(--c)'};
+              color: ${b || 'inherit'};
+            }
+          `}</style>
+        </div>
+      )
+    }
+  }
+  

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

@@ -0,0 +1,31 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "b9b97de593829e6",
+                [
+                    a || 'var(--c)',
+                    b || 'inherit'
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "b9b97de593829e6",
+                [
+                    a || 'var(--c)',
+                    b || 'inherit'
+                ]
+            ]
+        ])}>test</p>
+
+          <_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>
+
+        </div>;
+    }
+}

package/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/input.js

@@ -0,0 +1,16 @@
+export default class {
+    render() {
+      return (
+        <div>
+          <p>test</p>
+          <style jsx>{`
+            .item {
+              max-width: ${a ? '100%' : '200px'};
+              padding: ${b ? '0' : '8px 20px'};
+            }
+          `}</style>
+        </div>
+      )
+    }
+  }
+  

package/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.js

@@ -0,0 +1,31 @@
+import _JSXStyle from "styled-jsx/style";
+export default class {
+    render() {
+        return <div className={_JSXStyle.dynamic([
+            [
+                "23692842dc904882",
+                [
+                    a ? '100%' : '200px',
+                    b ? '0' : '8px 20px'
+                ]
+            ]
+        ])}>
+
+          <p className={_JSXStyle.dynamic([
+            [
+                "23692842dc904882",
+                [
+                    a ? '100%' : '200px',
+                    b ? '0' : '8px 20px'
+                ]
+            ]
+        ])}>test</p>
+
+          <_JSXStyle id={"23692842dc904882"} dynamic={[
+            a ? '100%' : '200px',
+            b ? '0' : '8px 20px'
+        ]}>{`.item.__jsx-style-dynamic-selector{max-width:${a ? '100%' : '200px'};padding:${b ? '0' : '8px 20px'}}`}</_JSXStyle>
+
+        </div>;
+    }
+}

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

@@ -0,0 +1,176 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      html {
+        background-image:
+          linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
+          url(/static/background.svg);
+      }
+      
+      :global(p) {
+        color: blue
+      }
+      
+      :global(p){
+        color: blue;
+      }
+      
+      :global(p), a {
+        color: blue;
+      }
+      
+      :global(.foo + a) {
+        color: red;
+      }
+      
+      :global(body) {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      }
+      
+      p {
+        color: red;
+      }
+      
+      p{
+        color: red
+      }
+      
+      * {
+        color: blue;
+      }
+      
+      [href="woot"] {
+        color: red;
+      }
+      
+      p a span {
+        color: red;
+      }
+      
+      p :global(span) {
+        background: blue
+      }
+      
+      p a[title="'w ' '  t'"] {
+        margin: auto
+      }
+      
+      p :global(span:not(.test)) {
+        color: green
+      }
+      
+      p, h1 {
+        color: blue;
+        animation: hahaha 3s ease forwards infinite;
+        animation-name: hahaha;
+        animation-delay: 100ms;
+      }
+      
+      p {
+        animation: hahaha 1s, hehehe 2s;
+      }
+      
+      p:hover {
+        color: red;
+      }
+      
+      p::before {
+        color: red;
+      }
+      
+      :hover {
+        color: red;
+      }
+      
+      ::before {
+        color: red;
+      }
+      
+      :hover p {
+        color: red;
+      }
+      
+      p + a {
+        color: red;
+      }
+      
+      p ~ a {
+        color: red;
+      }
+      
+      p > a {
+        color: red;
+      }
+      
+      @keyframes hahaha {
+        from { top: 0 }
+        to { top: 100 }
+      }
+      
+      @keyframes hehehe {
+        from { left: 0 }
+        to { left: 100 }
+      }
+      
+      @media (min-width: 500px) {
+        .test {
+          color: red;
+        }
+      }
+      
+      .test {
+        /* test, test */
+        display: block;
+        /*
+      
+        test
+        */
+      }
+      
+      .inline-flex {
+        display: inline-flex;
+      }
+      
+      .flex {
+        display: flex;
+      }
+      
+      .test {
+        box-shadow: 0 0 10px black, inset 0 0 5px black
+      }
+      
+      .test[title=","] {
+        display: inline-block;
+      }
+      
+      .test.is-status .test {
+        color: red;
+      }
+      
+      .a-selector:hover,
+      .a-selector:focus
+      {
+        outline: none;
+      }
+      
+      @media (min-width: 1px) and (max-width: 768px) {
+        [class*='grid__col--'] {
+          margin-top: 12px;
+          margin-bottom: 12px;
+        }
+      }
+      
+      @media (max-width: 64em) {
+        .test {
+          margin-bottom: 1em;
+        }
+        @supports (-moz-appearance: none) and (display: contents) {
+          .test {
+            margin-bottom: 2rem;
+          }
+        }
+      }      
+    `}</style>
+  </div>
+)

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

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-768337a97aceabd1"}>
+
+    <p className={"jsx-768337a97aceabd1"}>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>
+
+  </div>);

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

@@ -0,0 +1,116 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      p a span {
+        color: red;
+      }
+      
+      p :global(span) {
+        background: blue
+      }
+      
+      p a[title="'w ' '  t'"] {
+        margin: auto
+      }
+      
+      p :global(span:not(.test)) {
+        color: green
+      }
+      
+      p, h1 {
+        color: blue;
+        animation: hahaha 3s ease forwards infinite;
+        animation-name: hahaha;
+        animation-delay: 100ms;
+      }
+      
+      p {
+        animation: hahaha 1s, hehehe 2s;
+      }
+      
+      p:hover {
+        color: red;
+      }
+      
+      p::before {
+        color: red;
+      }
+      
+      :hover {
+        color: red;
+      }
+      
+      ::before {
+        color: red;
+      }
+      
+      :hover p {
+        color: red;
+      }
+      
+      p + a {
+        color: red;
+      }
+      
+      p ~ a {
+        color: red;
+      }
+      
+      p > a {
+        color: red;
+      }
+      
+      @keyframes hahaha {
+        from { top: 0 }
+        to { top: 100 }
+      }
+      
+      @keyframes hehehe {
+        from { left: 0 }
+        to { left: 100 }
+      }
+      
+      @media (min-width: 500px) {
+        .test {
+          color: red;
+        }
+      }
+      
+      .test {
+        /* test, test */
+        display: block;
+        /*
+      
+        test
+        */
+      }
+      
+      .inline-flex {
+        display: inline-flex;
+      }
+      
+      .flex {
+        display: flex;
+      }
+      
+      .test {
+        box-shadow: 0 0 10px black, inset 0 0 5px black
+      }
+      
+      .test[title=","] {
+        display: inline-block;
+      }
+      
+      .test.is-status .test {
+        color: red;
+      }
+      
+      .a-selector:hover,
+      .a-selector:focus
+      {
+        outline: none;
+      }   
+    `}</style>
+  </div>
+)

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

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+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>
+
+  </div>);

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

@@ -0,0 +1,32 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      html {
+        background-image:
+          linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
+          url(/static/background.svg);
+      }
+      
+      :global(p) {
+        color: blue
+      }
+      
+      :global(p){
+        color: blue;
+      }
+      
+      :global(p), a {
+        color: blue;
+      }
+      
+      :global(.foo + a) {
+        color: red;
+      }
+      
+      :global(body) {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      }
+    `}</style>
+  </div>
+)

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

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+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>
+
+  </div>);

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

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

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

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+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>
+
+  </div>);

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

@@ -0,0 +1,22 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+      
+      p{
+        color: red
+      }
+      
+      * {
+        color: blue;
+      }
+      
+      [href="woot"] {
+        color: red;
+      }
+    `}</style>
+  </div>
+)

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

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+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>
+
+  </div>);