refactor(styled-jsx): Allow legacy nesting syntax (#425)

I'm not sure if allowing non-standard stuff is a good idea. But I'm creating this PR for compatibility with the Babel version styled-jsx...

Author: kdy1

Cargo.lock

@@ -1,5 +1,11 @@
 # @swc/plugin-styled-jsx
 
+## 7.0.1
+
+### Patch Changes
+
+- 95aecbc: Allow legacy nesting syntax
+
 ## 7.0.0
 
 ### Major Changes

packages/styled-jsx/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # @swc/plugin-styled-jsx
 
+## 7.0.1
+
+### Patch Changes
+
+- 95aecbc: Allow legacy nesting syntax
+
 ## 7.0.0
 
 ### Major Changes

packages/styled-jsx/README.md

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

packages/styled-jsx/package.json

@@ -10,7 +10,7 @@ license      = { workspace = true }
 name         = "styled_jsx"
 repository   = { workspace = true }
 rust-version = { workspace = true }
-version      = "0.83.0"
+version      = "0.83.1"
 
 
 [features]

packages/styled-jsx/transform/Cargo.toml

@@ -51,6 +51,7 @@ pub fn transform_css(
     let config = ParserConfig {
         allow_wrong_line_comments: true,
         css_modules: false,
+        legacy_nesting: true,
         ..Default::default()
     };
     let lexer = Lexer::new(
@@ -264,6 +265,7 @@ impl Namespacer {
                         ParserConfig {
                             allow_wrong_line_comments: true,
                             css_modules: true,
+                            legacy_nesting: true,
                             ..Default::default()
                         },
                         // TODO(kdy1): We might be able to report syntax errors.

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

@@ -0,0 +1,17 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <p>woot</p>
+    <p>woot</p>
+    <style jsx>{`
+      .container {
+        color: blue;
+        padding: 3rem;
+
+        .inner {
+          color: yellow;
+        }
+      }
+    `}</style>
+  </div>
+);

packages/styled-jsx/transform/tests/fixture/legacy-nesting/input.js

@@ -0,0 +1,7 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-3b0234e9651851cb"}>
+    <p className={"jsx-3b0234e9651851cb"}>test</p>
+    <p className={"jsx-3b0234e9651851cb"}>woot</p>
+    <p className={"jsx-3b0234e9651851cb"}>woot</p>
+    <_JSXStyle id={"3b0234e9651851cb"}>{".container.jsx-3b0234e9651851cb{color:#00f;padding:3rem}.container.jsx-3b0234e9651851cb.jsx-3b0234e9651851cb .inner.jsx-3b0234e9651851cb{color:#ff0}"}</_JSXStyle>
+  </div>);

packages/styled-jsx/transform/tests/fixture/legacy-nesting/output.lightningcss.js

@@ -0,0 +1,7 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-3b0234e9651851cb"}>
+    <p className={"jsx-3b0234e9651851cb"}>test</p>
+    <p className={"jsx-3b0234e9651851cb"}>woot</p>
+    <p className={"jsx-3b0234e9651851cb"}>woot</p>
+    <_JSXStyle id={"3b0234e9651851cb"}>{".container.jsx-3b0234e9651851cb{color:#00f;padding:3rem}.container.jsx-3b0234e9651851cb .inner.jsx-3b0234e9651851cb{color:#ff0}"}</_JSXStyle>
+  </div>);