@swc/plugin-styled-jsx 1.5.75 → 1.5.77

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

@@ -22,47 +22,56 @@ 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;
@@ -82,7 +91,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>);