fix(styled-jsx): Fix handling of deeply nested &

packages/styled-jsx/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @swc/plugin-styled-jsx
 
+## 8.0.6
+
+### Patch Changes
+
+- 8d4f2db: Fix handling of deeply nested `&`
+
 ## 8.0.5
 
 ### Patch Changes

packages/styled-jsx/README.md

@@ -2,6 +2,12 @@
 
 # @swc/plugin-styled-jsx
 
+## 8.0.6
+
+### Patch Changes
+
+- 8d4f2db: Fix handling of deeply nested `&`
+
 ## 8.0.5
 
 ### Patch Changes

packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap

@@ -1040,6 +1040,18 @@ const Test = ()=>/*#__PURE__*/ React.createElement("div", {
 "
 `;
 
+exports[`Should load swc-confidential wasm plugin correctly > Should transform global-nested-scope-sel correctly 1`] = `
+"import _JSXStyle from "styled-jsx/style";
+const Test = ()=>/*#__PURE__*/ React.createElement("div", {
+        className: "jsx-b0a16d58836c444b"
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "jsx-b0a16d58836c444b"
+    }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "b0a16d58836c444b"
+    }, ".parent.jsx-b0a16d58836c444b{}.parent.jsx-b0a16d58836c444b div{}.parent.jsx-b0a16d58836c444b div.child{background:orange}"));
+"
+`;
+
 exports[`Should load swc-confidential wasm plugin correctly > Should transform global-redundant correctly 1`] = `
 "import _JSXStyle from "styled-jsx/style";
 export default function IndexPage() {

packages/styled-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-jsx",
-  "version": "8.0.5",
+  "version": "8.0.6",
   "description": "SWC plugin for styled-jsx",
   "main": "swc_plugin_styled_jsx.wasm",
   "scripts": {

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.93.0"
+version      = "0.93.1"
 
 
 [features]

packages/styled-jsx/transform/src/transform_css_lightningcss.rs

@@ -412,9 +412,18 @@ where
 
                 match self.prev {
                     Some(Component::Combinator(..)) => self.next(),
+                    // If the next component is a nesting selector (&), we should remove the
+                    // whitespace because we are going to remove the (&)
+                    Some(Component::Nesting) => self.next(),
                     _ => Some(Component::Combinator(Combinator::Descendant)),
                 }
             }
+            // Handle nesting selectors (&) by removing whitespaces between & and the next
+            // component
+            Some(Component::Nesting) => {
+                self.prev = self.iter.next();
+                self.next()
+            }
             Some(v) => Some(v),
             _ => {
                 self.prev = self.iter.next();

packages/styled-jsx/transform/tests/fixture/global-nested-scope-sel/input.js

@@ -0,0 +1,14 @@
+const Test = () => (
+  <div>
+    <span>test</span>
+    <style jsx>{`
+        .parent {
+          :global(div) {
+            :global(&.child) {
+              background: orange;
+            }
+          }
+        }
+      `}</style>
+  </div>
+);

packages/styled-jsx/transform/tests/fixture/global-nested-scope-sel/output.lightningcss.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-b0a16d58836c444b"}>
+    <span className={"jsx-b0a16d58836c444b"}>test</span>
+    <_JSXStyle id={"b0a16d58836c444b"}>{".parent.jsx-b0a16d58836c444b div.child{background:orange}"}</_JSXStyle>
+  </div>;

packages/styled-jsx/transform/tests/fixture/global-nested-scope-sel/output.swc.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-b0a16d58836c444b"}>
+    <span className={"jsx-b0a16d58836c444b"}>test</span>
+    <_JSXStyle id={"b0a16d58836c444b"}>{".parent.jsx-b0a16d58836c444b{}.parent.jsx-b0a16d58836c444b div{}.parent.jsx-b0a16d58836c444b div.child{background:orange}"}</_JSXStyle>
+  </div>;