Update swc & fix styled-jsx

packages/next/build/swc/Cargo.toml

@@ -23,24 +23,24 @@ retain_mut = "0.1.3"
 rustc-hash = "1.1.0"
 serde = "1"
 serde_json = "1"
-styled_components = "0.1.0"
-swc = "0.83.1"
+styled_components = "0.2.0"
+swc = "0.85.0"
 swc_atoms = "0.2.7"
-swc_bundler = { version = "0.80.0", features = ["concurrent"] }
+swc_bundler = { version = "0.82.0", features = ["concurrent"] }
 swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
-swc_css = "0.20.0"
-swc_ecma_loader = { version = "0.24.0", features = ["node", "lru"] }
-swc_ecma_preset_env = "0.64.0"
-swc_ecmascript = { version = "0.85.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_css = "0.31.0"
+swc_ecma_loader = { version = "0.24.2", features = ["node", "lru"] }
+swc_ecma_preset_env = "0.66.0"
+swc_ecmascript = { version = "0.87.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
-swc_stylis = "0.17.0"
+swc_stylis = "0.28.0"
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 
 [build-dependencies]
 napi-build = "1"
 
 [dev-dependencies]
-swc_ecma_transforms_testing = "0.44.0"
+swc_ecma_transforms_testing = "0.45.0"
 testing = "0.15.1"
 walkdir = "2.3.2"
 

packages/next/build/swc/src/bundle/mod.rs

@@ -18,7 +18,7 @@ use swc_common::{
 };
 use swc_ecma_loader::{
     resolvers::{lru::CachingResolver, node::NodeModulesResolver},
-    NODE_BUILTINS,
+    TargetEnv, NODE_BUILTINS,
 };
 use swc_ecmascript::{
     ast::*,

packages/next/build/swc/src/styled_jsx/transform_css.rs

@@ -52,7 +52,8 @@ pub fn transform_css(
         }
     };
     // ? Do we need to support optionally prefixing?
-    ss.visit_mut_with(&mut prefixer());
+    ss.visit_mut_with(&mut FixedPrefixer);
+    ss.visit_mut_with(&mut CssFixer);
     ss.visit_mut_with(&mut Namespacer {
         class_name: match class_name {
             Some(s) => s.clone(),
@@ -121,6 +122,38 @@ fn read_number(s: &str) -> (usize, usize) {
     unreachable!("read_number(`{}`) is invalid because it is empty", s)
 }
 
+/// Applies `prefixer`, but this avoids bug of `swc_stylis::prefixer()`.
+///
+/// TODO(kdy1): Remove this when we upgrade crates related to css. (The crate
+/// update is blocked by `ComplexSelectorChildren` issue)
+struct FixedPrefixer;
+
+impl VisitMut for FixedPrefixer {
+    fn visit_mut_style_rule(&mut self, n: &mut StyleRule) {
+        n.visit_mut_with(&mut prefixer());
+    }
+}
+
+/// This fixes invalid css.
+struct CssFixer;
+
+impl VisitMut for CssFixer {
+    fn visit_mut_media_query(&mut self, q: &mut MediaQuery) {
+        q.visit_mut_children_with(self);
+
+        match q {
+            MediaQuery::Text(q) => {
+                if q.raw.starts_with("__styled-jsx-placeholder-") {
+                    // TODO(kdy1): Remove this once we have CST for media query.
+                    // We need good error recovery for media queries to handle this.
+                    q.raw = format!("({})", &q.value).into();
+                }
+            }
+            _ => {}
+        }
+    }
+}
+
 struct Namespacer {
     class_name: String,
     is_global: bool,
@@ -167,7 +200,7 @@ impl Namespacer {
                     front_tokens.extend(block_tokens);
                     args.tokens = front_tokens;
                     let complex_selectors = panic::catch_unwind(|| {
-                        let x: Vec<ComplexSelector> = parse_tokens(
+                        let x: ComplexSelector = parse_tokens(
                             &args,
                             ParserConfig {
                                 parse_values: false,
@@ -182,7 +215,7 @@ impl Namespacer {
 
                     return match complex_selectors {
                         Ok(complex_selectors) => {
-                            let mut v = complex_selectors[0].selectors[1..]
+                            let mut v = complex_selectors.selectors[1..]
                                 .iter()
                                 .cloned()
                                 .collect::<Vec<_>>();
@@ -260,7 +293,7 @@ fn get_front_selector_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 2),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
     ]
 }
@@ -274,7 +307,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 1),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
         TokenAndSpan {
             span: Span {
@@ -290,7 +323,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 3),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
         TokenAndSpan {
             span: Span {
@@ -317,7 +350,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 10),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
         TokenAndSpan {
             span: Span {
@@ -344,7 +377,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 15),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
         TokenAndSpan {
             span: Span {
@@ -360,7 +393,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
                 hi: BytePos(start_pos + 17),
                 ctxt: SyntaxContext::empty(),
             },
-            token: Token::WhiteSpace,
+            token: Token::WhiteSpace { value: " ".into() },
         },
     ]
 }

packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/input.js

@@ -0,0 +1,7 @@
+
+
+export default ({ breakPoint }) => (
+  <div>
+    <style jsx>{`@media (${breakPoint}) {}`}</style>
+  </div>
+)

packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/output.js

@@ -0,0 +1,16 @@
+import _JSXStyle from "styled-jsx/style";
+export default (({ breakPoint  })=><div className={_JSXStyle.dynamic([
+        [
+            "6b843a9852a4be26",
+            [
+                breakPoint
+            ]
+        ]
+    ])}>
+
+    <_JSXStyle id={"6b843a9852a4be26"} dynamic={[
+        breakPoint
+    ]}>{`@media (${breakPoint}) {}`}</_JSXStyle>
+
+  </div>
+);

packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/input.js

@@ -0,0 +1,15 @@
+export default function IndexPage() {
+    return (
+      <div>
+        <h1>Hello World.</h1>
+
+        <style jsx global>{`
+          @supports (display: flex) {
+            h1 {
+              color: hotpink;
+            }
+          }
+        `}</style>
+      </div>
+    );
+  }

packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/output.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default function IndexPage() {
+    return <div className={"jsx-bbdada4ef17d18ef"}>
+
+        <h1 className={"jsx-bbdada4ef17d18ef"}>Hello World.</h1>
+
+
+
+        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex) {h1 {color:hotpink}}"}</_JSXStyle>
+
+      </div>;
+};

packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js

@@ -21,7 +21,8 @@ export default class {
 
           <_JSXStyle id={"8c1103276226be14"} dynamic={[
             inputSize ? "height: calc(2 * var(--a)) !important;" : ""
-        ]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""} }}`}</_JSXStyle>
+        ]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}
+                }}`}</_JSXStyle>
 
         </div>;
     }