diff --git a/packages/next/build/swc/Cargo.lock b/packages/next/build/swc/Cargo.lock
index 9da496f7a9..c9d4b04be2 100644
--- a/packages/next/build/swc/Cargo.lock
+++ b/packages/next/build/swc/Cargo.lock
@@ -1612,9 +1612,9 @@ checksum = "6446ced80d6c486436db5c078dde11a9f73d42b57fb273121e160b84f63d894c"
 
 [[package]]
 name = "swc"
-version = "0.68.1"
+version = "0.69.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f6dd80aa3787665ab1560af56722140b1a1435b56b240dc4253b57491cb3a9a"
+checksum = "ca659f79ccbbd34a002fccb5e8b05f45de9972647949b010c40a8ca53d33c875"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1659,9 +1659,9 @@ dependencies = [
 
 [[package]]
 name = "swc_bundler"
-version = "0.69.0"
+version = "0.70.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c50bc804d8803271352cf3455e797cc88b24f52f78618b0a8cb4b39dd705685e"
+checksum = "5875c9ff8b4855310c6212063be0b1c376964c1621de2ec63430dc4bfa63bc19"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1718,9 +1718,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css"
-version = "0.11.0"
+version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44967aa0845d1b12af3c84a34b6438b262d1d7b3930ae6cf8e073ba9a549b2a7"
+checksum = "39ff3f4812b44b7d2e1f0ef4903289abf1c03f037ed90e36238f241a33f211ee"
 dependencies = [
  "swc_css_ast",
  "swc_css_codegen",
@@ -1731,9 +1731,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_ast"
-version = "0.10.0"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2e225c4a80640e7f697cca77af12f9f19df733d8aed50d928f8b6d29d8a17484"
+checksum = "bd46b291be83b48510699b4a64fe5e49a3ed1d4bfeb584523bee7e33e882412b"
 dependencies = [
  "is-macro",
  "serde",
@@ -1744,9 +1744,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_codegen"
-version = "0.9.0"
+version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c7db7a27d9d0fffe6f046abdf527e64fc7d04bf1436ee3f1b214f13f341e1ca0"
+checksum = "93ec9f83da8a62e9c66ae74f484308a7f8117a189cfc27110391f6569f5f2c35"
 dependencies = [
  "auto_impl",
  "bitflags",
@@ -1771,9 +1771,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_parser"
-version = "0.11.0"
+version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3415927537486923196b8698bdf8b11fbc37a671448601ea0236f5497072c891"
+checksum = "d8ded0bb1f4e9ee1dfff2cd0d9a0eeb23310347f9ce8198f3581baac1ee21344"
 dependencies = [
  "bitflags",
  "lexical",
@@ -1785,9 +1785,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_utils"
-version = "0.7.0"
+version = "0.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "58e7bddaae2b35a0bca2035529e5d3ab7dcab4c1519f36229ab34019520765c6"
+checksum = "12dbf49076432f3c03829404627c291fcdbfd7c1f91fb445a44f95819881c62e"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1797,9 +1797,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_visit"
-version = "0.9.0"
+version = "0.14.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "93a4b8f84c50a3e1394990e7352b45c2cb147f956f4fb4002d42c49cdc9ab711"
+checksum = "7b9e18aeb12759c0974bb7e7bc5421b070e8b562701a80f99f8dbc23c27f83b9"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1823,9 +1823,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_codegen"
-version = "0.74.4"
+version = "0.75.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e2f84ab8cdd0395372a9b94d2938ee787d18e4d6805b5e11d26756c8410ef78d"
+checksum = "5f1e753868b75da17edfb44de0825933cdeef4e93ad8ee4b192722ba62182b3f"
 dependencies = [
  "bitflags",
  "memchr",
@@ -1837,6 +1837,7 @@ dependencies = [
  "swc_ecma_ast",
  "swc_ecma_codegen_macros",
  "swc_ecma_parser",
+ "tracing",
 ]
 
 [[package]]
@@ -1892,9 +1893,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_minifier"
-version = "0.38.1"
+version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cb48d4a35d61c06c0a43ed6bc9f277145aaa160aa08079ef75bdd70c6475d6e0"
+checksum = "88e5eea1dc94e1d1a6ce715aae6533c56f79ad550ba3bf0bc7fed4d42cf66f92"
 dependencies = [
  "indexmap",
  "once_cell",
@@ -1939,9 +1940,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_preset_env"
-version = "0.53.0"
+version = "0.54.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c426165f8d9ffca67be17caeb17629aa8ac861caa3020ae1fdc28b4fdd06be9"
+checksum = "463275dfe6d536ef67fdaccc0fa03b4843c1381bcd90e54e586eba4308169b06"
 dependencies = [
  "ahash",
  "dashmap",
@@ -1963,9 +1964,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms"
-version = "0.82.0"
+version = "0.83.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b1f6a99c2827dc3f18c534ea18f96054b37880c71a0ff2d08b66065f99c04e3"
+checksum = "0e7566d4e2da296c2ce397eb94e9c53ad62f599409bc0308e4c2aad774456b82"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1985,9 +1986,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_base"
-version = "0.37.5"
+version = "0.38.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42433d575f4923d59e4dc28cd9ecc659fccceea9e03c3550edee0719c697e792"
+checksum = "ce2937a415e5aaeb584cf3228c045a5fb66241a5d08a5799545e7172e7aba30e"
 dependencies = [
  "once_cell",
  "phf",
@@ -2003,9 +2004,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_classes"
-version = "0.23.0"
+version = "0.24.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cafd0ad50aedf503cd640c0a3b5a9e9c0a8a279c1772c523f78ee707f30d3423"
+checksum = "35d0b7a3130cf28220fa20bd6b14158ae2938f60bc5f70af06a096e1377ea9d1"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2017,9 +2018,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_compat"
-version = "0.42.0"
+version = "0.43.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "797a230b7ca461cf0f12a7082d2bc4240ab4038dfc5921289e2d432953e3ecc6"
+checksum = "9fb6f6e12949c310359c453e6b5f2b2ca47a4c547f2b7592d5fe79a8e5276e0d"
 dependencies = [
  "ahash",
  "arrayvec",
@@ -2054,9 +2055,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_module"
-version = "0.46.0"
+version = "0.47.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "11cafe30abeafaa83b24461b884394c9421f104f06630709bb95161b57723e01"
+checksum = "5ff03116edf68426e24bc5295384efb59464ea2f4e0a46b2a9eb03affd82f604"
 dependencies = [
  "Inflector",
  "ahash",
@@ -2076,9 +2077,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_optimization"
-version = "0.52.0"
+version = "0.53.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e206010aa586dd5fc84501bbd0a3a34a872c9d6453f10b8cea7f1894219dbe2a"
+checksum = "3b74b5f3eae7296639fb34f850c3f28d6a3e9d35f045ca59e3271c9d36de7f67"
 dependencies = [
  "ahash",
  "dashmap",
@@ -2098,9 +2099,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_proposal"
-version = "0.46.1"
+version = "0.47.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1ebdbf1f050e1d551f295668a47eb7ab0cbcb41e4e8318ffabc3d9935be00fbd"
+checksum = "5c9981d2e57baace689838cc7e35faae81cd7760851aaab46cc9feaee0287af7"
 dependencies = [
  "either",
  "serde",
@@ -2118,9 +2119,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_react"
-version = "0.48.3"
+version = "0.49.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a62a83db000d585fdba44479c7d2c6de452d8fc0ee86145b614cddc422399aee"
+checksum = "eb5d95f1c08ce2a998f77b50bc9fc6e2edfae958de0afccecbcdfcc3dbf186d9"
 dependencies = [
  "ahash",
  "base64 0.13.0",
@@ -2142,9 +2143,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_testing"
-version = "0.38.1"
+version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a53824975fbb8a412555802ee419e9f2ce24c9063b321ee98a9e574bc6125e3"
+checksum = "bfecf68543c25858c33ac82872fbcd81e1b77af9ea3dcadadf4712a477af1e42"
 dependencies = [
  "ansi_term",
  "anyhow",
@@ -2163,9 +2164,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_typescript"
-version = "0.49.1"
+version = "0.50.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf92d054c7f5c4d8e26143ad04a60329afb8d7cf3111578ce0433d60be78b88f"
+checksum = "3f9be57eb16a442a9a459994274a5184c07a139f0c1fc9c09c881eb33e2f0dc7"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -2208,9 +2209,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecmascript"
-version = "0.74.0"
+version = "0.75.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8bfe741d922d0a091cfc84d7d32c5aac021780c787a71636248f84e5b5fd94a"
+checksum = "c9706c91f3ff56a65e6510284939e34f6b9193f142496741c25eb361f83eae4c"
 dependencies = [
  "swc_ecma_ast",
  "swc_ecma_codegen",
@@ -2258,9 +2259,9 @@ dependencies = [
 
 [[package]]
 name = "swc_stylis"
-version = "0.8.0"
+version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "82274d8d98926c8b9a6beef64eb9a83505a2bb0c7fd1af2454b623b4d805af78"
+checksum = "c2dc8f250db60512a41496d7a613e6fb35021db0f37c19f9718f3e9a9c22aedd"
 dependencies = [
  "swc_atoms",
  "swc_common",
diff --git a/packages/next/build/swc/Cargo.toml b/packages/next/build/swc/Cargo.toml
index 7a62eb8449..93d6198543 100644
--- a/packages/next/build/swc/Cargo.toml
+++ b/packages/next/build/swc/Cargo.toml
@@ -16,14 +16,14 @@ path-clean = "0.1"
 regex = "1.5"
 serde = "1"
 serde_json = "1"
-swc = "0.68.0"
+swc = "0.69.0"
 swc_atoms = "0.2.7"
 swc_common = { version = "0.13.5", features = ["concurrent", "sourcemap"] }
-swc_css = "0.11.0"
-swc_ecmascript = { version = "0.74.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
-swc_ecma_preset_env = "0.53.0"
+swc_css = "0.16.0"
+swc_ecmascript = { version = "0.75.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_ecma_preset_env = "0.54.0"
 swc_node_base = "0.4.0"
-swc_stylis = "0.8.0"
+swc_stylis = "0.13.0"
 fxhash = "0.2.1"
 retain_mut = "0.1.3"
 pathdiff = "0.2.0"
@@ -35,7 +35,7 @@ tracing = { version = "0.1.28", features = ["release_max_level_off"] }
 napi-build = "1"
 
 [dev-dependencies]
-swc_ecma_transforms_testing = "0.38.1"
+swc_ecma_transforms_testing = "0.39.0"
 testing = "0.14.1"
 walkdir = "2.3.2"
 
diff --git a/packages/next/build/swc/src/styled_jsx/transform_css.rs b/packages/next/build/swc/src/styled_jsx/transform_css.rs
index e056349445..73052ac5f1 100644
--- a/packages/next/build/swc/src/styled_jsx/transform_css.rs
+++ b/packages/next/build/swc/src/styled_jsx/transform_css.rs
@@ -84,16 +84,18 @@ pub fn transform_css(
     Ok(Expr::Tpl(Tpl {
         quasis: parts
             .iter()
-            .map(|quasi| TplElement {
-                cooked: None, // ? Do we need cooked as well
-                raw: Str {
-                    value: quasi.replace('`', "\\`").into(),
+            .map(|quasi| {
+                TplElement {
+                    cooked: None, // ? Do we need cooked as well
+                    raw: Str {
+                        value: (*quasi).into(),
+                        span: DUMMY_SP,
+                        has_escape: false,
+                        kind: StrKind::Synthesized {},
+                    },
                     span: DUMMY_SP,
-                    has_escape: false,
-                    kind: StrKind::Synthesized {},
-                },
-                span: DUMMY_SP,
-                tail: false,
+                    tail: false,
+                }
             })
             .collect(),
         exprs: final_expressions,
diff --git a/packages/next/build/swc/src/styled_jsx/utils.rs b/packages/next/build/swc/src/styled_jsx/utils.rs
index 6090641609..efa9345c9c 100644
--- a/packages/next/build/swc/src/styled_jsx/utils.rs
+++ b/packages/next/build/swc/src/styled_jsx/utils.rs
@@ -6,366 +6,369 @@ use swc_ecmascript::ast::*;
 use super::{ExternalStyle, JSXStyle, LocalStyle};
 
 fn tpl_element(value: &str) -> TplElement {
-  TplElement {
-    raw: Str {
-      value: value.into(),
-      span: DUMMY_SP,
-      kind: StrKind::Synthesized,
-      has_escape: false,
-    },
-    cooked: None,
-    span: DUMMY_SP,
-    tail: false,
-  }
+    TplElement {
+        raw: Str {
+            value: value.into(),
+            span: DUMMY_SP,
+            kind: StrKind::Synthesized,
+            has_escape: false,
+        },
+        cooked: None,
+        span: DUMMY_SP,
+        tail: false,
+    }
 }
 
 pub fn compute_class_names(
-  styles: &Vec<JSXStyle>,
-  style_import_name: &str,
+    styles: &Vec<JSXStyle>,
+    style_import_name: &str,
 ) -> (Option<String>, Option<Expr>) {
-  let mut static_class_name = None;
-  let mut external_jsx_id = None;
-  let mut static_hashes = vec![];
-  let mut dynamic_styles = vec![];
-  let mut external_styles = vec![];
-  for style_info in styles {
-    match style_info {
-      JSXStyle::Local(style_info) => {
-        if !style_info.is_dynamic {
-          static_hashes.push(style_info.hash.clone());
-        } else {
-          dynamic_styles.push(style_info);
+    let mut static_class_name = None;
+    let mut external_jsx_id = None;
+    let mut static_hashes = vec![];
+    let mut dynamic_styles = vec![];
+    let mut external_styles = vec![];
+    for style_info in styles {
+        match style_info {
+            JSXStyle::Local(style_info) => {
+                if !style_info.is_dynamic {
+                    static_hashes.push(style_info.hash.clone());
+                } else {
+                    dynamic_styles.push(style_info);
+                }
+            }
+            JSXStyle::External(external) => {
+                if !external.is_global {
+                    external_styles.push(external.expr.clone());
+                }
+            }
         }
-      }
-      JSXStyle::External(external) => {
-        if !external.is_global {
-          external_styles.push(external.expr.clone());
+    }
+
+    if external_styles.len() > 0 {
+        let mut quasis = vec![tpl_element("jsx-")];
+        for _i in 1..external_styles.len() {
+            quasis.push(tpl_element(" jsx-"))
         }
-      }
+        quasis.push(tpl_element(""));
+        external_jsx_id = Some(Expr::Tpl(Tpl {
+            quasis,
+            exprs: external_styles
+                .iter()
+                .map(|external| Box::new(external.clone()))
+                .collect(),
+            span: DUMMY_SP,
+        }));
     }
-  }
 
-  if external_styles.len() > 0 {
-    let mut quasis = vec![tpl_element("jsx-")];
-    for _i in 1..external_styles.len() {
-      quasis.push(tpl_element(" jsx-"))
+    if static_hashes.len() > 0 {
+        static_class_name = Some(format!("jsx-{}", hash_string(&static_hashes.join(","))));
     }
-    quasis.push(tpl_element(""));
-    external_jsx_id = Some(Expr::Tpl(Tpl {
-      quasis,
-      exprs: external_styles
-        .iter()
-        .map(|external| Box::new(external.clone()))
-        .collect(),
-      span: DUMMY_SP,
-    }));
-  }
 
-  if static_hashes.len() > 0 {
-    static_class_name = Some(format!("jsx-{}", hash_string(&static_hashes.join(","))));
-  }
-
-  let dynamic_class_name = match dynamic_styles.len() {
-    0 => None,
-    _ => Some(Expr::Call(CallExpr {
-      callee: ExprOrSuper::Expr(Box::new(Expr::Member(MemberExpr {
-        obj: ExprOrSuper::Expr(Box::new(Expr::Ident(Ident {
-          sym: style_import_name.into(),
-          span: DUMMY_SP,
-          optional: false,
-        }))),
-        prop: Box::new(Expr::Ident(Ident {
-          sym: "dynamic".into(),
-          span: DUMMY_SP,
-          optional: false,
-        })),
-        span: DUMMY_SP,
-        computed: false,
-      }))),
-      args: vec![ExprOrSpread {
-        expr: Box::new(Expr::Array(ArrayLit {
-          elems: dynamic_styles
-            .iter()
-            .map(|style_info| {
-              let hash_input = match &static_class_name {
-                Some(class_name) => format!("{}{}", style_info.hash, class_name),
-                None => style_info.hash.clone(),
-              };
-              Some(ExprOrSpread {
+    let dynamic_class_name = match dynamic_styles.len() {
+        0 => None,
+        _ => Some(Expr::Call(CallExpr {
+            callee: ExprOrSuper::Expr(Box::new(Expr::Member(MemberExpr {
+                obj: ExprOrSuper::Expr(Box::new(Expr::Ident(Ident {
+                    sym: style_import_name.into(),
+                    span: DUMMY_SP,
+                    optional: false,
+                }))),
+                prop: Box::new(Expr::Ident(Ident {
+                    sym: "dynamic".into(),
+                    span: DUMMY_SP,
+                    optional: false,
+                })),
+                span: DUMMY_SP,
+                computed: false,
+            }))),
+            args: vec![ExprOrSpread {
                 expr: Box::new(Expr::Array(ArrayLit {
-                  elems: vec![
-                    Some(ExprOrSpread {
-                      expr: Box::new(string_literal_expr(&hash_string(&hash_input))),
-                      spread: None,
-                    }),
-                    Some(ExprOrSpread {
-                      expr: Box::new(Expr::Array(ArrayLit {
-                        elems: style_info
-                          .expressions
-                          .iter()
-                          .map(|expression| {
+                    elems: dynamic_styles
+                        .iter()
+                        .map(|style_info| {
+                            let hash_input = match &static_class_name {
+                                Some(class_name) => format!("{}{}", style_info.hash, class_name),
+                                None => style_info.hash.clone(),
+                            };
                             Some(ExprOrSpread {
-                              expr: expression.clone(),
-                              spread: None,
+                                expr: Box::new(Expr::Array(ArrayLit {
+                                    elems: vec![
+                                        Some(ExprOrSpread {
+                                            expr: Box::new(string_literal_expr(&hash_string(
+                                                &hash_input,
+                                            ))),
+                                            spread: None,
+                                        }),
+                                        Some(ExprOrSpread {
+                                            expr: Box::new(Expr::Array(ArrayLit {
+                                                elems: style_info
+                                                    .expressions
+                                                    .iter()
+                                                    .map(|expression| {
+                                                        Some(ExprOrSpread {
+                                                            expr: expression.clone(),
+                                                            spread: None,
+                                                        })
+                                                    })
+                                                    .collect(),
+                                                span: DUMMY_SP,
+                                            })),
+                                            spread: None,
+                                        }),
+                                    ],
+                                    span: DUMMY_SP,
+                                })),
+                                spread: None,
                             })
-                          })
-                          .collect(),
-                        span: DUMMY_SP,
-                      })),
-                      spread: None,
-                    }),
-                  ],
-                  span: DUMMY_SP,
+                        })
+                        .collect(),
+                    span: DUMMY_SP,
                 })),
                 spread: None,
-              })
-            })
-            .collect(),
-          span: DUMMY_SP,
+            }],
+            span: DUMMY_SP,
+            type_args: None,
         })),
-        spread: None,
-      }],
-      span: DUMMY_SP,
-      type_args: None,
-    })),
-  };
+    };
 
-  let class_name_expr = match (
-    static_class_name.clone(),
-    dynamic_class_name,
-    external_jsx_id,
-  ) {
-    (Some(static_class_name), Some(dynamic_class_name), Some(external_jsx_id)) => Some(add(
-      add(
+    let class_name_expr = match (
+        static_class_name.clone(),
+        dynamic_class_name,
         external_jsx_id,
-        string_literal_expr(&format!(" {} ", static_class_name)),
-      ),
-      dynamic_class_name,
-    )),
-    (Some(static_class_name), Some(dynamic_class_name), None) => Some(add(
-      string_literal_expr(&format!("{} ", static_class_name)),
-      dynamic_class_name,
-    )),
-    (Some(static_class_name), None, Some(external_jsx_id)) => Some(add(
-      string_literal_expr(&format!("{} ", static_class_name)),
-      external_jsx_id,
-    )),
-    (None, Some(dynamic_class_name), Some(external_jsx_id)) => Some(add(
-      add(external_jsx_id, string_literal_expr(" ")),
-      dynamic_class_name,
-    )),
-    (Some(static_class_name), None, None) => Some(string_literal_expr(&static_class_name)),
-    (None, Some(dynamic_class_name), None) => Some(dynamic_class_name),
-    (None, None, Some(external_jsx_id)) => Some(external_jsx_id),
-    _ => None,
-  };
+    ) {
+        (Some(static_class_name), Some(dynamic_class_name), Some(external_jsx_id)) => Some(add(
+            add(
+                external_jsx_id,
+                string_literal_expr(&format!(" {} ", static_class_name)),
+            ),
+            dynamic_class_name,
+        )),
+        (Some(static_class_name), Some(dynamic_class_name), None) => Some(add(
+            string_literal_expr(&format!("{} ", static_class_name)),
+            dynamic_class_name,
+        )),
+        (Some(static_class_name), None, Some(external_jsx_id)) => Some(add(
+            string_literal_expr(&format!("{} ", static_class_name)),
+            external_jsx_id,
+        )),
+        (None, Some(dynamic_class_name), Some(external_jsx_id)) => Some(add(
+            add(external_jsx_id, string_literal_expr(" ")),
+            dynamic_class_name,
+        )),
+        (Some(static_class_name), None, None) => Some(string_literal_expr(&static_class_name)),
+        (None, Some(dynamic_class_name), None) => Some(dynamic_class_name),
+        (None, None, Some(external_jsx_id)) => Some(external_jsx_id),
+        _ => None,
+    };
 
-  (static_class_name, class_name_expr)
+    (static_class_name, class_name_expr)
 }
 
 pub fn make_external_styled_jsx_el(style: &ExternalStyle, style_import_name: &str) -> JSXElement {
-  let attrs = vec![JSXAttrOrSpread::JSXAttr(JSXAttr {
-    name: JSXAttrName::Ident(Ident {
-      sym: "id".into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
-      expr: JSXExpr::Expr(Box::new(style.expr.clone())),
-      span: DUMMY_SP,
-    })),
-    span: DUMMY_SP,
-  })];
-  let opening = JSXOpeningElement {
-    name: JSXElementName::Ident(Ident {
-      sym: style_import_name.into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    attrs,
-    span: DUMMY_SP,
-    self_closing: false,
-    type_args: None,
-  };
+    let attrs = vec![JSXAttrOrSpread::JSXAttr(JSXAttr {
+        name: JSXAttrName::Ident(Ident {
+            sym: "id".into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
+            expr: JSXExpr::Expr(Box::new(style.expr.clone())),
+            span: DUMMY_SP,
+        })),
+        span: DUMMY_SP,
+    })];
+    let opening = JSXOpeningElement {
+        name: JSXElementName::Ident(Ident {
+            sym: style_import_name.into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        attrs,
+        span: DUMMY_SP,
+        self_closing: false,
+        type_args: None,
+    };
 
-  let closing = Some(JSXClosingElement {
-    name: JSXElementName::Ident(Ident {
-      sym: style_import_name.into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    span: DUMMY_SP,
-  });
+    let closing = Some(JSXClosingElement {
+        name: JSXElementName::Ident(Ident {
+            sym: style_import_name.into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        span: DUMMY_SP,
+    });
 
-  let children = vec![JSXElementChild::JSXExprContainer(JSXExprContainer {
-    expr: JSXExpr::Expr(Box::new(Expr::Ident(style.identifier.clone()))),
-    span: DUMMY_SP,
-  })];
-  JSXElement {
-    opening,
-    closing,
-    children,
-    span: DUMMY_SP,
-  }
+    let children = vec![JSXElementChild::JSXExprContainer(JSXExprContainer {
+        expr: JSXExpr::Expr(Box::new(Expr::Ident(style.identifier.clone()))),
+        span: DUMMY_SP,
+    })];
+    JSXElement {
+        opening,
+        closing,
+        children,
+        span: DUMMY_SP,
+    }
 }
 
 pub fn make_local_styled_jsx_el(
-  style_info: &LocalStyle,
-  css_expr: Expr,
-  style_import_name: &str,
+    style_info: &LocalStyle,
+    css_expr: Expr,
+    style_import_name: &str,
 ) -> JSXElement {
-  let mut attrs = vec![JSXAttrOrSpread::JSXAttr(JSXAttr {
-    name: JSXAttrName::Ident(Ident {
-      sym: "id".into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
-      expr: JSXExpr::Expr(Box::new(string_literal_expr(
-        hash_string(&style_info.hash).as_str(),
-      ))),
-      span: DUMMY_SP,
-    })),
-    span: DUMMY_SP,
-  })];
-
-  if style_info.is_dynamic {
-    attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
-      name: JSXAttrName::Ident(Ident {
-        sym: "dynamic".into(),
+    let mut attrs = vec![JSXAttrOrSpread::JSXAttr(JSXAttr {
+        name: JSXAttrName::Ident(Ident {
+            sym: "id".into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
+            expr: JSXExpr::Expr(Box::new(string_literal_expr(
+                hash_string(&style_info.hash).as_str(),
+            ))),
+            span: DUMMY_SP,
+        })),
         span: DUMMY_SP,
-        optional: false,
-      }),
-      value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
-        expr: JSXExpr::Expr(Box::new(Expr::Array(ArrayLit {
-          elems: style_info
-            .expressions
-            .iter()
-            .map(|expression| {
-              Some(ExprOrSpread {
-                expr: expression.clone(),
-                spread: None,
-              })
-            })
-            .collect(),
-          span: DUMMY_SP,
-        }))),
+    })];
+
+    if style_info.is_dynamic {
+        attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+            name: JSXAttrName::Ident(Ident {
+                sym: "dynamic".into(),
+                span: DUMMY_SP,
+                optional: false,
+            }),
+            value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
+                expr: JSXExpr::Expr(Box::new(Expr::Array(ArrayLit {
+                    elems: style_info
+                        .expressions
+                        .iter()
+                        .map(|expression| {
+                            Some(ExprOrSpread {
+                                expr: expression.clone(),
+                                spread: None,
+                            })
+                        })
+                        .collect(),
+                    span: DUMMY_SP,
+                }))),
+                span: DUMMY_SP,
+            })),
+            span: DUMMY_SP,
+        }));
+    }
+
+    let opening = JSXOpeningElement {
+        name: JSXElementName::Ident(Ident {
+            sym: style_import_name.into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        attrs,
         span: DUMMY_SP,
-      })),
-      span: DUMMY_SP,
-    }));
-  }
+        self_closing: false,
+        type_args: None,
+    };
 
-  let opening = JSXOpeningElement {
-    name: JSXElementName::Ident(Ident {
-      sym: style_import_name.into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    attrs,
-    span: DUMMY_SP,
-    self_closing: false,
-    type_args: None,
-  };
+    let closing = Some(JSXClosingElement {
+        name: JSXElementName::Ident(Ident {
+            sym: style_import_name.into(),
+            span: DUMMY_SP,
+            optional: false,
+        }),
+        span: DUMMY_SP,
+    });
 
-  let closing = Some(JSXClosingElement {
-    name: JSXElementName::Ident(Ident {
-      sym: style_import_name.into(),
-      span: DUMMY_SP,
-      optional: false,
-    }),
-    span: DUMMY_SP,
-  });
-
-  let children = vec![JSXElementChild::JSXExprContainer(JSXExprContainer {
-    expr: JSXExpr::Expr(Box::new(css_expr)),
-    span: DUMMY_SP,
-  })];
-  JSXElement {
-    opening,
-    closing,
-    children,
-    span: DUMMY_SP,
-  }
+    let children = vec![JSXElementChild::JSXExprContainer(JSXExprContainer {
+        expr: JSXExpr::Expr(Box::new(css_expr)),
+        span: DUMMY_SP,
+    })];
+    JSXElement {
+        opening,
+        closing,
+        children,
+        span: DUMMY_SP,
+    }
 }
 
 pub fn get_usable_import_specifier(_items: &Vec<ModuleItem>) -> String {
-  // TODO
-  String::from("_JSXStyle")
+    // TODO
+    String::from("_JSXStyle")
 }
 
 pub fn styled_jsx_import_decl(style_import_name: &str) -> ModuleItem {
-  ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
-    asserts: None,
-    span: DUMMY_SP,
-    type_only: false,
-    specifiers: vec![ImportSpecifier::Default(ImportDefaultSpecifier {
-      local: Ident {
-        sym: style_import_name.into(),
+    ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+        asserts: None,
         span: DUMMY_SP,
-        optional: false,
-      },
-      span: DUMMY_SP,
-    })],
-    src: Str {
-      has_escape: false,
-      kind: StrKind::Synthesized {},
-      span: DUMMY_SP,
-      value: "styled-jsx/style".into(),
-    },
-  }))
+        type_only: false,
+        specifiers: vec![ImportSpecifier::Default(ImportDefaultSpecifier {
+            local: Ident {
+                sym: style_import_name.into(),
+                span: DUMMY_SP,
+                optional: false,
+            },
+            span: DUMMY_SP,
+        })],
+        src: Str {
+            has_escape: false,
+            kind: StrKind::Synthesized {},
+            span: DUMMY_SP,
+            value: "styled-jsx/style".into(),
+        },
+    }))
 }
 
 // TODO: maybe use DJBHasher (need to implement)
 pub fn hash_string(str: &String) -> String {
-  let mut hasher = DefaultHasher::new();
-  hasher.write(str.as_bytes());
-  let hash_result = hasher.finish();
-  format!("{:x}", hash_result)
+    let mut hasher = DefaultHasher::new();
+    hasher.write(str.as_bytes());
+    let hash_result = hasher.finish();
+    format!("{:x}", hash_result)
 }
 
 pub fn string_literal_expr(str: &str) -> Expr {
-  Expr::Lit(Lit::Str(Str {
-    value: str.into(),
-    span: DUMMY_SP,
-    has_escape: false,
-    kind: StrKind::Synthesized {},
-  }))
+    let str = str.replace("\\`", "`");
+    Expr::Lit(Lit::Str(Str {
+        value: str.into(),
+        span: DUMMY_SP,
+        has_escape: false,
+        kind: StrKind::Synthesized {},
+    }))
 }
 
 pub fn ident(str: &str) -> Ident {
-  Ident {
-    sym: str.into(),
-    span: DUMMY_SP,
-    optional: false,
-  }
+    Ident {
+        sym: str.into(),
+        span: DUMMY_SP,
+        optional: false,
+    }
 }
 
 pub fn is_capitalized(word: &str) -> bool {
-  word.chars().next().unwrap().is_uppercase()
+    word.chars().next().unwrap().is_uppercase()
 }
 
 pub fn add(left: Expr, right: Expr) -> Expr {
-  binary_expr(BinaryOp::Add, left, right)
+    binary_expr(BinaryOp::Add, left, right)
 }
 
 pub fn and(left: Expr, right: Expr) -> Expr {
-  binary_expr(BinaryOp::LogicalAnd, left, right)
+    binary_expr(BinaryOp::LogicalAnd, left, right)
 }
 
 pub fn or(left: Expr, right: Expr) -> Expr {
-  binary_expr(BinaryOp::LogicalOr, left, right)
+    binary_expr(BinaryOp::LogicalOr, left, right)
 }
 
 pub fn not_eq(left: Expr, right: Expr) -> Expr {
-  binary_expr(BinaryOp::NotEq, left, right)
+    binary_expr(BinaryOp::NotEq, left, right)
 }
 
 pub fn binary_expr(op: BinaryOp, left: Expr, right: Expr) -> Expr {
-  Expr::Bin(BinExpr {
-    op,
-    left: Box::new(left),
-    right: Box::new(right),
-    span: DUMMY_SP,
-  })
+    Expr::Bin(BinExpr {
+        op,
+        left: Box::new(left),
+        right: Box::new(right),
+        span: DUMMY_SP,
+    })
 }
diff --git a/packages/next/build/swc/tests/fixture/styled-jsx/transform-css/output.js b/packages/next/build/swc/tests/fixture/styled-jsx/transform-css/output.js
index f61540e84d..a71cc66099 100644
--- a/packages/next/build/swc/tests/fixture/styled-jsx/transform-css/output.js
+++ b/packages/next/build/swc/tests/fixture/styled-jsx/transform-css/output.js
@@ -1,6 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-768337a97aceabd1"}>
+
     <p className={"jsx-768337a97aceabd1"}>test</p>
-    <_JSXStyle id={"768337a97aceabd1"}>{"html.jsx-768337a97aceabd1 {background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/static/background.svg)}\np {color:blue}\np {color:blue}\np, a.jsx-768337a97aceabd1 {color:blue}\n.foo +a {color:red}\nbody {font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif}\np.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 {color:red}\n*.jsx-768337a97aceabd1 {color:blue}\n[href='woot'].jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 a.jsx-768337a97aceabd1 span.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 span {background:blue}\np.jsx-768337a97aceabd1 a[title=''w ' '  t''].jsx-768337a97aceabd1 {margin:auto}\np.jsx-768337a97aceabd1 span:not(.test) {color:green}\np.jsx-768337a97aceabd1, h1.jsx-768337a97aceabd1 {color:blue;\n-webkit-animation:hahaha 3s ease forwards infinite;\nanimation:hahaha 3s ease forwards infinite;\n-webkit-animation-name:hahaha;\nanimation-name:hahaha;\nanimation-delay:100ms}\np.jsx-768337a97aceabd1 {-webkit-animation:hahaha 1s, hehehe 2s;\nanimation:hahaha 1s, hehehe 2s}\np.jsx-768337a97aceabd1:hover {color:red}\np.jsx-768337a97aceabd1::before {color:red}\n.jsx-768337a97aceabd1:hover {color:red}\n.jsx-768337a97aceabd1::before {color:red}\n.jsx-768337a97aceabd1:hover p.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 +a.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 ~a.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 >a.jsx-768337a97aceabd1 {color:red}\n@keyframes hahaha {from {top:0}to {top:100}}\n@keyframes hehehe {from {left:0}to {left:100}}\n@media (min-width:500px) {.test.jsx-768337a97aceabd1 {color:red}}\n.test.jsx-768337a97aceabd1 {display:block}\n.inline-flex.jsx-768337a97aceabd1 {display:-webkit-inline-box;\ndisplay:-webkit-inline-flex;\ndisplay:-ms-inline-flexbox;\ndisplay:inline-flex}\n.flex.jsx-768337a97aceabd1 {display:-webkit-box;\ndisplay:-webkit-flex;\ndisplay:-ms-flexbox;\ndisplay:flex}\n.test.jsx-768337a97aceabd1 {box-shadow:0 0 10px black, inset 0 0 5px black}\n.test[title=','].jsx-768337a97aceabd1 {display:inline-block}\n.test.is-status.jsx-768337a97aceabd1 .test.jsx-768337a97aceabd1 {color:red}\n.a-selector.jsx-768337a97aceabd1:hover, .a-selector.jsx-768337a97aceabd1:focus {outline:none}\n@media (min-width:1px) and (max-width:768px) {[class*='grid__col--'].jsx-768337a97aceabd1 {margin-top:12px;\nmargin-bottom:12px}}\n@media (max-width:64em) {.test.jsx-768337a97aceabd1 {margin-bottom:1em}\n@supports (-moz-appearance:none) and (display:contents) {.test.jsx-768337a97aceabd1 {margin-bottom:2rem}}}"}</_JSXStyle>
+
+    <_JSXStyle id={"768337a97aceabd1"}>{"html.jsx-768337a97aceabd1 {background-image:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/static/background.svg)}\np {color:blue}\np {color:blue}\np, a.jsx-768337a97aceabd1 {color:blue}\n.foo +a {color:red}\nbody {font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif}\np.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 {color:red}\n*.jsx-768337a97aceabd1 {color:blue}\n[href=\"woot\"].jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 a.jsx-768337a97aceabd1 span.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 span {background:blue}\np.jsx-768337a97aceabd1 a[title=\"'w ' '  t'\"].jsx-768337a97aceabd1 {margin:auto}\np.jsx-768337a97aceabd1 span:not(.test) {color:green}\np.jsx-768337a97aceabd1, h1.jsx-768337a97aceabd1 {color:blue;\n-webkit-animation:hahaha 3s ease forwards infinite;\nanimation:hahaha 3s ease forwards infinite;\n-webkit-animation-name:hahaha;\nanimation-name:hahaha;\nanimation-delay:100ms}\np.jsx-768337a97aceabd1 {-webkit-animation:hahaha 1s, hehehe 2s;\nanimation:hahaha 1s, hehehe 2s}\np.jsx-768337a97aceabd1:hover {color:red}\np.jsx-768337a97aceabd1::before {color:red}\n.jsx-768337a97aceabd1:hover {color:red}\n.jsx-768337a97aceabd1::before {color:red}\n.jsx-768337a97aceabd1:hover p.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 +a.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 ~a.jsx-768337a97aceabd1 {color:red}\np.jsx-768337a97aceabd1 >a.jsx-768337a97aceabd1 {color:red}\n@keyframes hahaha {from {top:0}to {top:100}}\n@keyframes hehehe {from {left:0}to {left:100}}\n@media (min-width:500px) {.test.jsx-768337a97aceabd1 {color:red}}\n.test.jsx-768337a97aceabd1 {display:block}\n.inline-flex.jsx-768337a97aceabd1 {display:-webkit-inline-box;\ndisplay:-webkit-inline-flex;\ndisplay:-ms-inline-flexbox;\ndisplay:inline-flex}\n.flex.jsx-768337a97aceabd1 {display:-webkit-box;\ndisplay:-webkit-flex;\ndisplay:-ms-flexbox;\ndisplay:flex}\n.test.jsx-768337a97aceabd1 {box-shadow:0 0 10px black, inset 0 0 5px black}\n.test[title=\",\"].jsx-768337a97aceabd1 {display:inline-block}\n.test.is-status.jsx-768337a97aceabd1 .test.jsx-768337a97aceabd1 {color:red}\n.a-selector.jsx-768337a97aceabd1:hover, .a-selector.jsx-768337a97aceabd1:focus {outline:none}\n@media (min-width:1px) and (max-width:768px) {[class*='grid__col--'].jsx-768337a97aceabd1 {margin-top:12px;\nmargin-bottom:12px}}\n@media (max-width:64em) {.test.jsx-768337a97aceabd1 {margin-bottom:1em}\n@supports (-moz-appearance:none) and (display:contents) {.test.jsx-768337a97aceabd1 {margin-bottom:2rem}}}"}</_JSXStyle>
+
   </div>
 );
diff --git a/packages/next/native/next-swc.darwin-arm64.node b/packages/next/native/next-swc.darwin-arm64.node
index a891af0e09..37da36f5e7 100644
Binary files a/packages/next/native/next-swc.darwin-arm64.node and b/packages/next/native/next-swc.darwin-arm64.node differ
diff --git a/packages/next/native/next-swc.darwin-x64.node b/packages/next/native/next-swc.darwin-x64.node
index c4d0be5489..7637a17386 100644
Binary files a/packages/next/native/next-swc.darwin-x64.node and b/packages/next/native/next-swc.darwin-x64.node differ
diff --git a/packages/next/native/next-swc.linux-x64-gnu.node b/packages/next/native/next-swc.linux-x64-gnu.node
index 1f5a2bd235..eaed27a621 100644
Binary files a/packages/next/native/next-swc.linux-x64-gnu.node and b/packages/next/native/next-swc.linux-x64-gnu.node differ
diff --git a/packages/next/native/next-swc.win32-x64-msvc.node b/packages/next/native/next-swc.win32-x64-msvc.node
index 899556efc7..1cf724bbb5 100644
Binary files a/packages/next/native/next-swc.win32-x64-msvc.node and b/packages/next/native/next-swc.win32-x64-msvc.node differ