@swc/plugin-styled-jsx 1.5.76 → 1.5.78

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

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

@@ -0,0 +1,8 @@
+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/output.swc.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/transform/tests/fixture/transform-css-normal/output.swc.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>);

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

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

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

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

@@ -1,16 +1,10 @@
 use std::path::PathBuf;
 
 use styled_jsx::visitor::styled_jsx;
-use swc_core::{
-    common::{chain, FileName, Mark, Span, DUMMY_SP},
-    ecma::{
-        parser::{EsConfig, Syntax},
-        transforms::{
-            base::resolver,
-            testing::{test_fixture, FixtureTestConfig},
-        },
-    },
-};
+use swc_common::{chain, FileName, Mark, Span, DUMMY_SP};
+use swc_ecma_parser::{EsConfig, Syntax};
+use swc_ecma_transforms::resolver;
+use swc_ecma_transforms_testing::{test_fixture, FixtureTestConfig};
 use testing::fixture;
 
 fn syntax() -> Syntax {
@@ -22,51 +16,60 @@ fn syntax() -> Syntax {
 
 #[fixture("tests/fixture/**/input.js")]
 fn styled_jsx_fixture(input: PathBuf) {
-    let output = input.parent().unwrap().join("output.js");
-    test_fixture(
-        syntax(),
-        &|t| {
-            chain!(
-                resolver(Mark::new(), Mark::new(), false),
-                styled_jsx(
-                    t.cm.clone(),
-                    FileName::Real(PathBuf::from("/some-project/src/some-file.js"))
+    for use_lightningcss in [true, false] {
+        let output = input.parent().unwrap().join(if use_lightningcss {
+            "output.lightningcss.js"
+        } else {
+            "output.swc.js"
+        });
+
+        test_fixture(
+            syntax(),
+            &|t| {
+                chain!(
+                    resolver(Mark::new(), Mark::new(), false),
+                    styled_jsx(
+                        t.cm.clone(),
+                        FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                        styled_jsx::visitor::Config { use_lightningcss }
+                    )
                 )
-            )
-        },
-        &input,
-        &output,
-        Default::default(),
-    );
+            },
+            &input,
+            &output,
+            Default::default(),
+        );
 
-    test_fixture(
-        syntax(),
-        &|t| {
-            // `resolver` uses `Mark` which is stored in a thread-local storage (namely
-            // swc_common::GLOBALS), and this loop will make `Mark` to be different from the
-            // invocation above.
-            //
-            // 1000 is used because in future I (kdy1) may optimize logic of resolver.
-            for _ in 0..1000 {
-                let _mark = Mark::fresh(Mark::root());
-            }
+        test_fixture(
+            syntax(),
+            &|t| {
+                // `resolver` uses `Mark` which is stored in a thread-local storage (namely
+                // swc_common::GLOBALS), and this loop will make `Mark` to be different from the
+                // invocation above.
+                //
+                // 1000 is used because in future I (kdy1) may optimize logic of resolver.
+                for _ in 0..1000 {
+                    let _mark = Mark::fresh(Mark::root());
+                }
 
-            chain!(
-                resolver(Mark::new(), Mark::new(), false),
-                styled_jsx(
-                    t.cm.clone(),
-                    FileName::Real(PathBuf::from("/some-project/src/some-file.js"))
+                chain!(
+                    resolver(Mark::new(), Mark::new(), false),
+                    styled_jsx(
+                        t.cm.clone(),
+                        FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
+                        styled_jsx::visitor::Config { use_lightningcss }
+                    )
                 )
-            )
-        },
-        &input,
-        &output,
-        Default::default(),
-    );
+            },
+            &input,
+            &output,
+            Default::default(),
+        );
+    }
 }
 
 pub struct DropSpan;
-impl swc_core::ecma::visit::VisitMut for DropSpan {
+impl swc_ecma_visit::VisitMut for DropSpan {
     fn visit_mut_span(&mut self, span: &mut Span) {
         *span = DUMMY_SP
     }
@@ -82,7 +85,15 @@ fn styled_jsx_errors(input: PathBuf) {
 
     test_fixture(
         syntax(),
-        &|t| styled_jsx(t.cm.clone(), file_name.clone()),
+        &|t| {
+            styled_jsx(
+                t.cm.clone(),
+                file_name.clone(),
+                styled_jsx::visitor::Config {
+                    use_lightningcss: false,
+                },
+            )
+        },
         &input,
         &output,
         FixtureTestConfig {

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

@@ -1,91 +0,0 @@
-import _JSXStyle from "styled-jsx/style";
-const darken = (c)=>c;
-const color = 'red';
-const otherColor = 'green';
-const mediumScreen = '680px';
-const animationDuration = '200ms';
-const animationName = 'my-cool-animation';
-const obj = {
-    display: 'block'
-};
-export default (({ display })=><div className={"jsx-b452af554142d27 " + _JSXStyle.dynamic([
-        [
-            "469c0b1cc43512b8",
-            [
-                display ? 'block' : 'none'
-            ]
-        ],
-        [
-            "d05e300c372f73ee",
-            [
-                darken(color) + 2
-            ]
-        ],
-        [
-            "72e421eb2017491a",
-            [
-                darken(color)
-            ]
-        ]
-    ])}>
-
-    <p className={"jsx-b452af554142d27 " + _JSXStyle.dynamic([
-        [
-            "469c0b1cc43512b8",
-            [
-                display ? 'block' : 'none'
-            ]
-        ],
-        [
-            "d05e300c372f73ee",
-            [
-                darken(color) + 2
-            ]
-        ],
-        [
-            "72e421eb2017491a",
-            [
-                darken(color)
-            ]
-        ]
-    ])}>test</p>
-
-    <_JSXStyle id={"cb56eab0db38d266"}>{`p.${color}.jsx-b452af554142d27{color:${otherColor};display:${obj.display}}`}</_JSXStyle>
-
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-b452af554142d27{color:red}"}</_JSXStyle>
-
-    <_JSXStyle id={"e66306ac259712aa"}>{`body{background:${color}}`}</_JSXStyle>
-
-    <_JSXStyle id={"e66306ac259712aa"}>{`body{background:${color}}`}</_JSXStyle>
-
-    // TODO: the next two should have the same hash
-
-    <_JSXStyle id={"f08108daf927b99d"}>{`p.jsx-b452af554142d27{color:${color}}`}</_JSXStyle>
-
-    <_JSXStyle id={"f08108daf927b99d"}>{`p.jsx-b452af554142d27{color:${color}}`}</_JSXStyle>
-
-    <_JSXStyle id={"72e421eb2017491a"} dynamic={[
-        darken(color)
-    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color)}}`}</_JSXStyle>
-
-    <_JSXStyle id={"d05e300c372f73ee"} dynamic={[
-        darken(color) + 2
-    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color) + 2}}`}</_JSXStyle>
-
-    <_JSXStyle id={"7c5c5bde49d6c65d"}>{`@media(min-width:${mediumScreen}){p.jsx-b452af554142d27{color:green}p.jsx-b452af554142d27{color:${`red`}}}p.jsx-b452af554142d27{color:red}`}</_JSXStyle>
-
-    <_JSXStyle id={"c5506be0b4762e0b"}>{`p.jsx-b452af554142d27{-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};-o-animation-duration:${animationDuration};animation-duration:${animationDuration}}`}</_JSXStyle>
-
-    <_JSXStyle id={"ed798aa885be9084"}>{`p.jsx-b452af554142d27{-webkit-animation:${animationDuration} forwards ${animationName};-moz-animation:${animationDuration} forwards ${animationName};-o-animation:${animationDuration} forwards ${animationName};animation:${animationDuration} forwards ${animationName}}div.jsx-b452af554142d27{background:${color}}`}</_JSXStyle>
-
-
-
-    <_JSXStyle id={"469c0b1cc43512b8"} dynamic={[
-        display ? 'block' : 'none'
-    ]}>{`span.__jsx-style-dynamic-selector{display:${display ? 'block' : 'none'}}`}</_JSXStyle>
-
-    // TODO: causes bad syntax
-
-    {}
-
-  </div>);