fix(styled-jsx): Visit attributes (#292)

swc-project · Apr 29, 2024 · 85a2fa8 · 85a2fa8
1 parent de9fbcd
commit 85a2fa8
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 3 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/packages/styled-jsx/CHANGELOG.md b/packages/styled-jsx/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @swc/plugin-styled-jsx
 
+## 2.0.1
+
+### Patch Changes
+
+- c88bd51: Visit attributes
+
 ## 2.0.0
 
 ### Major Changes

diff --git a/packages/styled-jsx/README.md b/packages/styled-jsx/README.md
@@ -2,6 +2,12 @@
 
 # @swc/plugin-styled-jsx
 
+## 2.0.1
+
+### Patch Changes
+
+- c88bd51: Visit attributes
+
 ## 2.0.0
 
 ### Major Changes

diff --git a/packages/styled-jsx/package.json b/packages/styled-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-jsx",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "SWC plugin for styled-jsx",
   "main": "swc_plugin_styled_jsx.wasm",
   "scripts": {

diff --git a/packages/styled-jsx/transform/Cargo.toml b/packages/styled-jsx/transform/Cargo.toml
@@ -10,7 +10,7 @@ license      = { workspace = true }
 name         = "styled_jsx"
 repository   = { workspace = true }
 rust-version = { workspace = true }
-version      = "0.73.14"
+version      = "0.73.15"
 
 
 [features]

diff --git a/packages/styled-jsx/transform/src/visitor.rs b/packages/styled-jsx/transform/src/visitor.rs
@@ -194,6 +194,7 @@ impl Fold for StyledJSXTransformer<'_> {
 
     fn fold_jsx_opening_element(&mut self, mut el: JSXOpeningElement) -> JSXOpeningElement {
         if !self.has_styled_jsx {
+            el = el.fold_children_with(self);
             return el;
         }
 

diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/1/input.js b/packages/styled-jsx/transform/tests/fixture/next-65064/1/input.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+
+export default function SimplePage() {
+    return (
+        <ComponentWithChildAsProp
+            trigger={
+                <>
+                    <div className={"text animated"}>Text</div>
+
+                    <style jsx>{`
+            .text {
+              color: blue;
+
+              // This should either get transpiled by SWC
+              // or should cause a build error about
+              // nested styled jsx tags.
+              // https://nextjs.org/docs/messages/nested-styled-jsx-tags
+              //
+              // Instead, it causes a hydration error,
+              // because & gets replaced with an &amp;
+              // *Remove* to fix the hydration error.
+              &:hover {
+                color: red;
+              }
+            }
+          `}</style>
+                </>
+            }
+        />
+    );
+}
+
+const ComponentWithChildAsProp = ({
+    trigger,
+}) => {
+    return <div>{trigger}</div>;
+};
diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/1/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/next-65064/1/output.lightningcss.js
@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+export default function SimplePage() {
+    return <ComponentWithChildAsProp trigger={<>
+
+                    <div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
+
+
+
+                    <_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
+
+                </>}/>;
+}
+const ComponentWithChildAsProp = ({ trigger })=>{
+    return <div>{trigger}</div>;
+};
diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/1/output.swc.js b/packages/styled-jsx/transform/tests/fixture/next-65064/1/output.swc.js
@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+export default function SimplePage() {
+    return <ComponentWithChildAsProp trigger={<>
+
+                    <div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
+
+
+
+                    <_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
+
+                </>}/>;
+}
+const ComponentWithChildAsProp = ({ trigger })=>{
+    return <div>{trigger}</div>;
+};
diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/2/input.js b/packages/styled-jsx/transform/tests/fixture/next-65064/2/input.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+
+export default function SimplePage() {
+    return (
+        <ComponentWithChildAsProp
+            trigger={
+                <div>
+                    <div className={"text animated"}>Text</div>
+
+                    <style jsx>{`
+            .text {
+              color: blue;
+
+              // This should either get transpiled by SWC
+              // or should cause a build error about
+              // nested styled jsx tags.
+              // https://nextjs.org/docs/messages/nested-styled-jsx-tags
+              //
+              // Instead, it causes a hydration error,
+              // because & gets replaced with an &amp;
+              // *Remove* to fix the hydration error.
+              &:hover {
+                color: red;
+              }
+            }
+          `}</style>
+                </div>
+            }
+        />
+    );
+}
+
+const ComponentWithChildAsProp = ({
+    trigger,
+}) => {
+    return <div>{trigger}</div>;
+};
diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/2/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/next-65064/2/output.lightningcss.js
@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+export default function SimplePage() {
+    return <ComponentWithChildAsProp trigger={<div className={"jsx-68234eda9c798fae"}>
+
+                    <div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
+
+
+
+                    <_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
+
+                </div>}/>;
+}
+const ComponentWithChildAsProp = ({ trigger })=>{
+    return <div>{trigger}</div>;
+};
diff --git a/packages/styled-jsx/transform/tests/fixture/next-65064/2/output.swc.js b/packages/styled-jsx/transform/tests/fixture/next-65064/2/output.swc.js
@@ -0,0 +1,18 @@
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+// This should error with https://nextjs.org/docs/messages/nested-styled-jsx-tags
+// but does not.
+export default function SimplePage() {
+    return <ComponentWithChildAsProp trigger={<div className={"jsx-68234eda9c798fae"}>
+
+                    <div className={"jsx-68234eda9c798fae" + " " + "text animated"}>Text</div>
+
+
+
+                    <_JSXStyle id={"68234eda9c798fae"}>{".text.jsx-68234eda9c798fae{color:#00f}.text.jsx-68234eda9c798fae.jsx-68234eda9c798fae:hover{color:red}"}</_JSXStyle>
+
+                </div>}/>;
+}
+const ComponentWithChildAsProp = ({ trigger })=>{
+    return <div>{trigger}</div>;
+};