@swc/plugin-styled-jsx 1.5.84 → 1.5.87

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

@@ -1,176 +0,0 @@
-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: #001
-      }
-      
-      :global(p){
-        color: #002;
-      }
-      
-      :global(p), a {
-        color: #003;
-      }
-      
-      :global(.foo + a) {
-        color: #004;
-      }
-      
-      :global(body) {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-      }
-      
-      p {
-        color: #005;
-      }
-      
-      p{
-        color: #006
-      }
-      
-      * {
-        color: #007;
-      }
-      
-      [href="woot"] {
-        color: #008;
-      }
-      
-      p a span {
-        color: #009;
-      }
-      
-      p :global(span) {
-        background: #00a
-      }
-      
-      p a[title="'w ' '  t'"] {
-        margin: auto
-      }
-      
-      p :global(span:not(.test)) {
-        color: #00b
-      }
-      
-      p, h1 {
-        color: #00c;
-        animation: hahaha 3s ease forwards infinite;
-        animation-name: hahaha;
-        animation-delay: 100ms;
-      }
-      
-      p {
-        animation: hahaha 1s, hehehe 2s;
-      }
-      
-      p:hover {
-        color: #00d;
-      }
-      
-      p::before {
-        color: #00e;
-      }
-      
-      :hover {
-        color: #00f;
-      }
-      
-      ::before {
-        color: #010;
-      }
-      
-      :hover p {
-        color: #011;
-      }
-      
-      p + a {
-        color: #012;
-      }
-      
-      p ~ a {
-        color: #013;
-      }
-      
-      p > a {
-        color: #014;
-      }
-      
-      @keyframes hahaha {
-        from { top: 0 }
-        to { top: 100 }
-      }
-      
-      @keyframes hehehe {
-        from { left: 0 }
-        to { left: 100 }
-      }
-      
-      @media (min-width: 500px) {
-        .test {
-          color: #015;
-        }
-      }
-      
-      .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: #016;
-      }
-      
-      .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/transform/tests/fixture/transform-css/output.lightningcss.js

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-4a27e5cf1c34b3df"}>
-
-    <p className={"jsx-4a27e5cf1c34b3df"}>test</p>
-
-    <_JSXStyle id={"4a27e5cf1c34b3df"}>{"html.jsx-4a27e5cf1c34b3df{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#002}p,a.jsx-4a27e5cf1c34b3df{color:#003}.foo+a{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 span:not(.test){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/output.swc.js

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-4a27e5cf1c34b3df"}>
-
-    <p className={"jsx-4a27e5cf1c34b3df"}>test</p>
-
-    <_JSXStyle id={"4a27e5cf1c34b3df"}>{'html.jsx-4a27e5cf1c34b3df{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:#001}p{color:#002}p,a.jsx-4a27e5cf1c34b3df{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}p.jsx-4a27e5cf1c34b3df{color:#005}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 span:not(.test){color:#00b}p.jsx-4a27e5cf1c34b3df,h1.jsx-4a27e5cf1c34b3df{color:#00c;-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-4a27e5cf1c34b3df{-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-4a27e5cf1c34b3df:hover{color:#00d}p.jsx-4a27e5cf1c34b3df::before{color:#00e}.jsx-4a27e5cf1c34b3df:hover{color:#00f}.jsx-4a27e5cf1c34b3df::before{color:#010}.jsx-4a27e5cf1c34b3df:hover p.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}@-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-4a27e5cf1c34b3df{color:#015}}.test.jsx-4a27e5cf1c34b3df{display:block}.inline-flex.jsx-4a27e5cf1c34b3df{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex}.flex.jsx-4a27e5cf1c34b3df{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.test.jsx-4a27e5cf1c34b3df{-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-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(min-width:1px)and (max-width:768px){[class*="grid__col--"].jsx-4a27e5cf1c34b3df{margin-top:12px;margin-bottom:12px}}@media(max-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/input.js

@@ -1,116 +0,0 @@
-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/transform/tests/fixture/transform-css-complex-selector/output.lightningcss.js

@@ -1,8 +0,0 @@
-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:#00f}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:#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/output.swc.js

@@ -1,8 +0,0 @@
-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/transform/tests/fixture/transform-css-complex-selector-2/input.js

@@ -1,12 +0,0 @@
-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.lightningcss.js

@@ -1,8 +0,0 @@
-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-complex-selector-2/output.swc.js

@@ -1,8 +0,0 @@
-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/input.js

@@ -1,32 +0,0 @@
-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: #001
-      }
-      
-      :global(h1){
-        color: #002;
-      }
-      
-      :global(h2), a {
-        color: #003;
-      }
-      
-      :global(.foo + a) {
-        color: #004;
-      }
-      
-      :global(body) {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-      }
-    `}</style>
-  </div>
-)

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

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-6881055ff9b1aeb6"}>
-
-    <p className={"jsx-6881055ff9b1aeb6"}>test</p>
-
-    <_JSXStyle id={"6881055ff9b1aeb6"}>{"html.jsx-6881055ff9b1aeb6{background-image:linear-gradient(#fffc,#fffc),url(/static/background.svg)}p{color:#001}h1{color:#002}h2,a.jsx-6881055ff9b1aeb6{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}"}</_JSXStyle>
-
-  </div>);

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

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-6881055ff9b1aeb6"}>
-
-    <p className={"jsx-6881055ff9b1aeb6"}>test</p>
-
-    <_JSXStyle id={"6881055ff9b1aeb6"}>{'html.jsx-6881055ff9b1aeb6{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:#001}h1{color:#002}h2,a.jsx-6881055ff9b1aeb6{color:#003}.foo+a{color:#004}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}'}</_JSXStyle>
-
-  </div>);

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

@@ -1,24 +0,0 @@
-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/transform/tests/fixture/transform-css-media-query/output.lightningcss.js

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-1f7963ae04c6466a"}>
-
-    <p className={"jsx-1f7963ae04c6466a"}>test</p>
-
-    <_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-media-query/output.swc.js

@@ -1,8 +0,0 @@
-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/transform/tests/fixture/transform-css-normal/input.js

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

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

@@ -1,8 +0,0 @@
-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}.jsx-1a19bb4817c105dd{color:#00f}[href=woot].jsx-1a19bb4817c105dd{color:red}"}</_JSXStyle>
-
-  </div>);

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

@@ -1,8 +0,0 @@
-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>);

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

@@ -1,10 +0,0 @@
-export default () => (
-    <div>
-      <p>test</p>
-      <style jsx>{`
-        li:nth-child(2) {
-          color: lime;
-        }
-      `}</style>
-    </div>
-  )

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

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-938ca197692ef624"}>
-
-      <p className={"jsx-938ca197692ef624"}>test</p>
-
-      <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:#0f0}"}</_JSXStyle>
-
-    </div>);

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

@@ -1,8 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-938ca197692ef624"}>
-
-      <p className={"jsx-938ca197692ef624"}>test</p>
-
-      <_JSXStyle id={"938ca197692ef624"}>{"li.jsx-938ca197692ef624:nth-child(2){color:lime}"}</_JSXStyle>
-
-    </div>);

package/transform/tests/fixture/whitespace/input.js

@@ -1,12 +0,0 @@
-export default () => (
-  <div>
-    <p>test</p>
-    <p>woot</p>
-    <p>woot</p>
-    <style jsx>
-      {
-        'p { color: red }'
-      }
-    </style>
-  </div>
-)

package/transform/tests/fixture/whitespace/output.lightningcss.js

@@ -1,12 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>test</p>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
-
-  </div>);

package/transform/tests/fixture/whitespace/output.swc.js

@@ -1,12 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>test</p>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-
-    <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
-
-  </div>);