diff --git a/packages/next-swc/Cargo.lock b/packages/next-swc/Cargo.lock
index 7219a82ca1b9bf9..6171ae2f5d7efc7 100644
--- a/packages/next-swc/Cargo.lock
+++ b/packages/next-swc/Cargo.lock
@@ -173,11 +173,13 @@ dependencies = [
 
 [[package]]
 name = "browserslist-rs"
-version = "0.2.0"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa428c5a7369965603314e5fbfa5ae1755159bce2c35880d80ea84a866213b20"
+checksum = "06d55644ca5427fce1939111997f9d58e78b0ea196e76a4cf327aa93f2553608"
 dependencies = [
+ "anyhow",
  "chrono",
+ "either",
  "itertools",
  "js-sys",
  "once_cell",
@@ -186,6 +188,7 @@ dependencies = [
  "serde-wasm-bindgen",
  "serde_json",
  "thiserror",
+ "ustr",
  "wasm-bindgen",
 ]
 
@@ -832,7 +835,7 @@ dependencies = [
  "swc_css",
  "swc_ecma_loader",
  "swc_ecma_transforms_testing",
- "swc_ecmascript 0.88.3",
+ "swc_ecmascript",
  "swc_node_base",
  "swc_stylis",
  "testing",
@@ -859,7 +862,7 @@ dependencies = [
  "swc_bundler",
  "swc_common",
  "swc_ecma_loader",
- "swc_ecmascript 0.88.3",
+ "swc_ecmascript",
  "swc_node_base",
 ]
 
@@ -1733,9 +1736,9 @@ checksum = "6446ced80d6c486436db5c078dde11a9f73d42b57fb273121e160b84f63d894c"
 
 [[package]]
 name = "styled_components"
-version = "0.2.0"
+version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "80be3206e0bfb4137e355c3370913169c03a656578b8d24583248e4503a8d50b"
+checksum = "08dffe3103edc558dbd35ef58cdfee40f5f0d8983fc079c769e6414e709874fc"
 dependencies = [
  "Inflector",
  "once_cell",
@@ -1743,15 +1746,15 @@ dependencies = [
  "serde",
  "swc_atoms",
  "swc_common",
- "swc_ecmascript 0.87.0",
+ "swc_ecmascript",
  "tracing",
 ]
 
 [[package]]
 name = "swc"
-version = "0.88.2"
+version = "0.95.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "95e31ae9192b444c5e9564d6645203b8b1af79e4df7df2162311211ca0b42e21"
+checksum = "da888cb9f9d0526ba5955466d85f040d67d7a9ae7dd5b5b9925fab3484bf41ce"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1781,7 +1784,7 @@ dependencies = [
  "swc_ecma_transforms_optimization",
  "swc_ecma_utils",
  "swc_ecma_visit",
- "swc_ecmascript 0.88.3",
+ "swc_ecmascript",
  "swc_node_comments",
  "swc_visit",
  "tracing",
@@ -1799,9 +1802,9 @@ dependencies = [
 
 [[package]]
 name = "swc_bundler"
-version = "0.82.2"
+version = "0.88.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f6c696144d52ef57a25738680de9c4e20c0bfd2b8eca326820986b4179f34756"
+checksum = "e85f88efa0b6df11df12921280a679b5cfe23fdc1c56e7f37c5c166d55be3e0a"
 dependencies = [
  "ahash",
  "anyhow",
@@ -1833,9 +1836,9 @@ dependencies = [
 
 [[package]]
 name = "swc_common"
-version = "0.14.7"
+version = "0.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "188984898a61b3d0d7aa7c2451ae23d6bda16cb1a94d19dd8d1b7d906c5754bc"
+checksum = "560998b621793a613c98ec8cdbd729e46332dd3fbf7619b57e9d98c15e142e2e"
 dependencies = [
  "ahash",
  "ast_node",
@@ -1862,9 +1865,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css"
-version = "0.31.0"
+version = "0.44.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "706a6a61731552fc0adfa367acd26c1095e4af4d4cda2d1a8f9bbb9fb3edb27e"
+checksum = "9c8a884ef7656268711992a8ff9c210ca10d8b9805d49ee76c3064fe36d54cd8"
 dependencies = [
  "swc_css_ast",
  "swc_css_codegen",
@@ -1875,9 +1878,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_ast"
-version = "0.29.0"
+version = "0.40.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ecc5971c63c5ef848d7d6c9cb6d8da69b8fb2e98bf56266895367bea44f3e56b"
+checksum = "a45ea4319216278b889edb38feefdc6174f0b7f4e76412dd1b64c796d2a1ae98"
 dependencies = [
  "is-macro",
  "serde",
@@ -1888,9 +1891,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_codegen"
-version = "0.29.0"
+version = "0.42.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "708b3a52cfbf52edf4df499a17c8887a0a4c9632654a8d9e60a3e7172afb60ab"
+checksum = "6fa9cc8b1c68320e0fd7df1b6d0f2d71e4429fd207c1ab95a84f3f4021fb6886"
 dependencies = [
  "auto_impl 0.4.1",
  "bitflags",
@@ -1915,9 +1918,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_parser"
-version = "0.31.0"
+version = "0.44.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "79630423c25828a8ea5c1aba90687c3f4ef48ddcb31f9c97299e4c8ff0321c7b"
+checksum = "a1e320dae7460f78c5496bfd58b7a3494addd34a8df8841e689774cdecf760b4"
 dependencies = [
  "bitflags",
  "lexical",
@@ -1929,9 +1932,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_utils"
-version = "0.26.0"
+version = "0.37.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bf42c983650eaa74303c92643f1c64212f66c92a5c4194f0071cfad2e90876d1"
+checksum = "d68fa86c5475fab73ec9648823149d1e3735ef847a5fbf015043eb2be67a59ca"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1941,9 +1944,9 @@ dependencies = [
 
 [[package]]
 name = "swc_css_visit"
-version = "0.28.0"
+version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "397018fa9ec794307aafb56d8934c7abb8287cfe4ebf2842a1e3b7ff5b8974a8"
+checksum = "9ba4976df9cb8aebba40624620295cec44ddbd66aca90ac0ea27a59cf89312be"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -1953,9 +1956,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_ast"
-version = "0.58.1"
+version = "0.59.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8678255e15265b4cf564c44035b9901c5bef22c19c2c3f4babccfb8de5ccfbe"
+checksum = "a31826c0275a1062d1e16d5b428c5059d176274c4e6c1c499525ddd2c65fcacc"
 dependencies = [
  "is-macro",
  "num-bigint",
@@ -1967,9 +1970,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_codegen"
-version = "0.80.0"
+version = "0.83.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0c00f3932d286865ae2784cd4da1926d7668032b156360831103fc2a24c5ff18"
+checksum = "08ed18a9bf4bca94b2029ed267373b01f4e207f5f617ab403b3bca96a44f5547"
 dependencies = [
  "bitflags",
  "memchr",
@@ -1999,9 +2002,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_ext_transforms"
-version = "0.38.1"
+version = "0.41.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "74246f8ffabdb1272e94043ed7446b65b1964e95a07111406d7d6cd68588abd3"
+checksum = "2a1a9b843b5a4f3d4bb4f5def7ac0e6657c814e8dd169801ac8cdbd23ad45ff3"
 dependencies = [
  "phf",
  "swc_atoms",
@@ -2014,9 +2017,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_loader"
-version = "0.24.4"
+version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eda70aee2118769474918d260e947fe08bfd56a5fc3d17c1a5aebeeb8d0c226e"
+checksum = "b0c9672f7cf71bf2a98fc0c66eed90d43db9252c82e52096c7159ea5521f3478"
 dependencies = [
  "ahash",
  "anyhow",
@@ -2035,9 +2038,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_minifier"
-version = "0.51.4"
+version = "0.58.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d6d7c84fc1e976d25a2ca940e1f614ae55a42e1bc5c717e6d87ec29201825169"
+checksum = "7c39028b6c8a3b189c99f7c6bd8ce4d3104957a0ab99fa935501107430507c5b"
 dependencies = [
  "ahash",
  "indexmap",
@@ -2063,9 +2066,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_parser"
-version = "0.78.11"
+version = "0.81.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "abe082abd0148a66e6b5c9c97c36a770bac1912bf500c3bc982ac7101c17218d"
+checksum = "97570156b3eec2e91b43f3adf9526caaf5cdf656c65a7722715b3537c2952261"
 dependencies = [
  "either",
  "enum_kind",
@@ -2084,9 +2087,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_preset_env"
-version = "0.67.4"
+version = "0.73.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5429c17805bddd7ab965b7dcfda6d2d3077f39d6aa3746b322fbf3d917cb23ac"
+checksum = "cc3cec2c243a4bcd9ff686b96fe59d342e632c5986cfc2a5cf548908903e574a"
 dependencies = [
  "ahash",
  "anyhow",
@@ -2110,9 +2113,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms"
-version = "0.95.2"
+version = "0.101.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "54c954d14b46f24ea894f37cacad4bdf1a9f37a316aaefe62e3a5033689e71de"
+checksum = "15931263dab79ddee709e981b5222d84a684cfaa66d2913394bee6d5b4635cca"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2132,9 +2135,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_base"
-version = "0.44.3"
+version = "0.48.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "18e0f787be734204a739fb774d0c00b15dcf0f8a3040f993ac18f6b8e47cc50e"
+checksum = "0bfa5fa18d0f7b7f2cf3522049e22ca8c5a77072a30f597c38de1c5f10a69501"
 dependencies = [
  "once_cell",
  "phf",
@@ -2152,9 +2155,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_classes"
-version = "0.30.2"
+version = "0.34.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59d4aa36016acc3da3f42036f5c6fdab84b0e6200a49b84280dd852bbae256a3"
+checksum = "7305d99e9851ae762e8bca1f7d43a0a1dd6c55b78220b10425b06a5f54c4498f"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2166,9 +2169,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_compat"
-version = "0.52.19"
+version = "0.57.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3f8857bd04b2b6fba11168c1a4c66b48c1d9e7867a7bf1c649fe7131d2c2cfb2"
+checksum = "6a93703c4aa6df222557f36ce7fe14d3c8ed458ae7546d74a67534360cf0eed3"
 dependencies = [
  "ahash",
  "arrayvec",
@@ -2186,6 +2189,7 @@ dependencies = [
  "swc_ecma_transforms_macros",
  "swc_ecma_utils",
  "swc_ecma_visit",
+ "tracing",
 ]
 
 [[package]]
@@ -2203,9 +2207,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_module"
-version = "0.58.3"
+version = "0.63.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "866abb059c40d454d8010de499d9f8e12994a7213779596d1c9a9a611dac9dfa"
+checksum = "721c7aa29ce8a905a1aef0c29546a158fb1859b733329ead7c5b40d86a9e25cb"
 dependencies = [
  "Inflector",
  "ahash",
@@ -2225,9 +2229,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_optimization"
-version = "0.65.1"
+version = "0.71.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bcd8f861cef30f9b3bd262828249cd32df4bbe5000d250fe63de2888d79ff08f"
+checksum = "7d528d813fd0af0c8727b0143b0c60759ff6a1cefb7223ee955da85c90edaaa6"
 dependencies = [
  "ahash",
  "dashmap",
@@ -2249,9 +2253,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_proposal"
-version = "0.58.1"
+version = "0.63.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "954e89a6b90b36719530624b9607fe62f783e04b7f368d526ac0038e9d646faa"
+checksum = "1185431bc8fb9d5460f662effbe4eaa10f1038f4e7fc7cfb2edfef4a7cc1104e"
 dependencies = [
  "either",
  "serde",
@@ -2269,9 +2273,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_react"
-version = "0.60.1"
+version = "0.65.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "380dc7c6617b4866f295baf4c41a0e64f5c265a734ac457008723fca18235765"
+checksum = "c0f9a87fba33abfae51b6442c521af5bc607fe81aca98efb131102eff2b3df38"
 dependencies = [
  "ahash",
  "base64 0.13.0",
@@ -2294,9 +2298,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_testing"
-version = "0.45.1"
+version = "0.49.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0af96fa0f7935d8b596e6041c0cebea6f01ec7b72ca21af78724e6bdccb3da7e"
+checksum = "99ff879410a201151440a2cc096abc28fd0e065cdc20a3edde71e9332c411c6a"
 dependencies = [
  "ansi_term",
  "anyhow",
@@ -2317,9 +2321,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_transforms_typescript"
-version = "0.61.2"
+version = "0.67.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "92de92acef99e2e3cbd38eb0d864d46dbae66d45eb04cb64792d2aec5e8cf622"
+checksum = "104774e78a1c8e3f1a82c82e34f8664ba2975eaa4c61b4355499b4f270aac06f"
 dependencies = [
  "serde",
  "swc_atoms",
@@ -2334,9 +2338,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_utils"
-version = "0.52.4"
+version = "0.55.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a574cee3c938142eb2ba55ddc8de9416c03400f8c7e90a7ac9c1b1b8bae1d211"
+checksum = "f0adfd7c7ebc9133e5d98dbe307c8ef41d43ae9ba9e5f3f690880b057ab0adc3"
 dependencies = [
  "once_cell",
  "rayon",
@@ -2344,39 +2348,29 @@ dependencies = [
  "swc_common",
  "swc_ecma_ast",
  "swc_ecma_visit",
+ "tracing",
  "unicode-xid",
 ]
 
 [[package]]
 name = "swc_ecma_visit"
-version = "0.44.1"
+version = "0.45.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "635ac1f529c75c948a3a55d1bc2cef1861004811b733560cf3f62d0183dbdbb8"
+checksum = "f0b3826abd1e68214fe9743437236608a0a22d27912e84a85a53f1e977e10468"
 dependencies = [
  "num-bigint",
  "swc_atoms",
  "swc_common",
  "swc_ecma_ast",
  "swc_visit",
+ "tracing",
 ]
 
 [[package]]
 name = "swc_ecmascript"
-version = "0.87.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e766b0ce800f14c983fdeb2d6fb81880e341321841afd4ad1469d9f2ac79ecd"
-dependencies = [
- "swc_ecma_ast",
- "swc_ecma_parser",
- "swc_ecma_utils",
- "swc_ecma_visit",
-]
-
-[[package]]
-name = "swc_ecmascript"
-version = "0.88.3"
+version = "0.95.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd485710cd6f3e1b7ff55f3249f613cee3e527bb169529b73fc62717b1e91f9f"
+checksum = "703291bc32dd81c1d73761e02442bdefed5844490f853f9979b8b8cb21e7392b"
 dependencies = [
  "swc_ecma_ast",
  "swc_ecma_codegen",
@@ -2401,9 +2395,9 @@ dependencies = [
 
 [[package]]
 name = "swc_fast_graph"
-version = "0.1.0"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "216c58d35aaef9ba671166bae0e6137e6b652d5f6db1b1e9db728f8ef6fe3336"
+checksum = "b4e08c814c7283238c72c61069614b55d58ccfeeb5e4fd9887913e9d34102632"
 dependencies = [
  "ahash",
  "indexmap",
@@ -2413,9 +2407,9 @@ dependencies = [
 
 [[package]]
 name = "swc_graph_analyzer"
-version = "0.1.1"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ebef7e80ffd2d2669969d9794155de5f08cc122c47c591ba93d4ab96d1adfadb"
+checksum = "13707fe5ba172950c56e16ab206f4d2a7da4e16742e7f527c331c1e0973267d4"
 dependencies = [
  "ahash",
  "auto_impl 0.5.0",
@@ -2447,9 +2441,9 @@ dependencies = [
 
 [[package]]
 name = "swc_node_comments"
-version = "0.1.0"
+version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52fd186eff1e6fd5639966b1caf460e13141ddf9d956f0bbfe8ec7b83730d3ff"
+checksum = "413c5c78a9a26b7aa5bb5b0a3e972f90c9d077e5b0adcbac74f6acda69c0ecea"
 dependencies = [
  "ahash",
  "dashmap",
@@ -2458,9 +2452,9 @@ dependencies = [
 
 [[package]]
 name = "swc_stylis"
-version = "0.28.0"
+version = "0.41.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "55dc9ebf2ab47eba62cc4299370f29107bd7e77b7f15bd4b9616d728c4e4b3dd"
+checksum = "c4de66eb78145902126ab5b366f2c87cda60310b0ebf36f263d336d07b48c3b7"
 dependencies = [
  "swc_atoms",
  "swc_common",
@@ -2471,9 +2465,9 @@ dependencies = [
 
 [[package]]
 name = "swc_visit"
-version = "0.2.8"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f8511a4788ab29daf00bee23e425aac92c9be4eec74c98fec4a45d0e710be695"
+checksum = "e5c639379dd2a8a0221fa1e12fafbdd594ba53a0cace6560054da52409dfcc1a"
 dependencies = [
  "either",
  "swc_visit_macros",
@@ -2481,9 +2475,9 @@ dependencies = [
 
 [[package]]
 name = "swc_visit_macros"
-version = "0.2.3"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3b2825fee79f10d0166e8e650e79c7a862fb991db275743083f07555d7641f0"
+checksum = "e505bbf8e11898fa05a65aa5e773c827ec743fc15aa3c064c9e06164ed0b6630"
 dependencies = [
  "Inflector",
  "pmutil",
@@ -2529,9 +2523,9 @@ dependencies = [
 
 [[package]]
 name = "testing"
-version = "0.15.2"
+version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e764b2295c3486c1fff4e77723d43319ead3f3b7081a553525f9dc369e19b416"
+checksum = "8c76da55a24d7aaae035f6740bfd50e85c0b152217e4894114ce3486a781d1bc"
 dependencies = [
  "ansi_term",
  "difference",
@@ -2741,6 +2735,19 @@ dependencies = [
  "percent-encoding",
 ]
 
+[[package]]
+name = "ustr"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cbd539d8973e229b9d04f15d36e6a8f8d8f85f946b366f06bb001aaed3fa9dd9"
+dependencies = [
+ "ahash",
+ "byteorder",
+ "lazy_static",
+ "parking_lot 0.11.1",
+ "serde",
+]
+
 [[package]]
 name = "version_check"
 version = "0.9.3"
@@ -2784,7 +2791,7 @@ dependencies = [
  "serde_json",
  "swc",
  "swc_common",
- "swc_ecmascript 0.88.3",
+ "swc_ecmascript",
  "tracing",
  "wasm-bindgen",
  "wasm-bindgen-futures",
diff --git a/packages/next-swc/crates/core/Cargo.toml b/packages/next-swc/crates/core/Cargo.toml
index e775e5b64407c2d..e4a8e9504955e7f 100644
--- a/packages/next-swc/crates/core/Cargo.toml
+++ b/packages/next-swc/crates/core/Cargo.toml
@@ -14,21 +14,21 @@ fxhash = "0.2.1"
 pathdiff = "0.2.0"
 serde = "1"
 serde_json = "1"
-styled_components = "0.2.0"
-swc = "0.88.0"
+styled_components = "0.4.0"
+swc = "0.95.0"
 swc_atoms = "0.2.7"
-swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
-swc_css = "0.31.0"
-swc_ecma_loader = { version = "0.24.4", features = ["node", "lru"] }
-swc_ecmascript = { version = "0.88.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_common = { version = "0.15.0", features = ["concurrent", "sourcemap"] }
+swc_css = "0.44.0"
+swc_ecma_loader = { version = "0.25.0", features = ["node", "lru"] }
+swc_ecmascript = { version = "0.95.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
-swc_stylis = "0.28.0"
+swc_stylis = "0.41.0"
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 regex = "1.5"
 
 [dev-dependencies]
-swc_ecma_transforms_testing = "0.45.1"
-testing = "0.15.2"
+swc_ecma_transforms_testing = "0.49.0"
+testing = "0.16.0"
 walkdir = "2.3.2"
 
 
diff --git a/packages/next-swc/crates/core/src/auto_cjs/mod.rs b/packages/next-swc/crates/core/src/auto_cjs/mod.rs
index 1bd0e83c502ec65..746f4357c62de82 100644
--- a/packages/next-swc/crates/core/src/auto_cjs/mod.rs
+++ b/packages/next-swc/crates/core/src/auto_cjs/mod.rs
@@ -1,12 +1,11 @@
-use swc_common::DUMMY_SP;
 use swc_ecmascript::{
     ast::*,
-    visit::{Node, Visit, VisitWith},
+    visit::{Visit, VisitWith},
 };
 
 pub(crate) fn contains_cjs(m: &Module) -> bool {
     let mut v = CjsFinder::default();
-    m.visit_with(&Invalid { span: DUMMY_SP }, &mut v);
+    m.visit_with(&mut v);
     v.found
 }
 
@@ -18,7 +17,7 @@ struct CjsFinder {
 /// This visitor implementation supports typescript, because the api of `swc`
 /// does not support changing configuration based on content of the file.
 impl Visit for CjsFinder {
-    fn visit_member_expr(&mut self, e: &MemberExpr, _: &dyn Node) {
+    fn visit_member_expr(&mut self, e: &MemberExpr) {
         if !e.computed {
             match &e.obj {
                 ExprOrSuper::Super(_) => {}
@@ -37,10 +36,10 @@ impl Visit for CjsFinder {
             }
         }
 
-        e.obj.visit_with(e, self);
+        e.obj.visit_with(self);
 
         if e.computed {
-            e.prop.visit_with(e, self);
+            e.prop.visit_with(self);
         }
     }
 }
diff --git a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
index 897324d63496ad8..2121afe5129c4e3 100644
--- a/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
+++ b/packages/next-swc/crates/core/src/styled_jsx/transform_css.rs
@@ -1,5 +1,6 @@
 use easy_error::{bail, Error};
 use std::panic;
+use swc_common::util::take::Take;
 use swc_common::{source_map::Pos, BytePos, Span, SyntaxContext, DUMMY_SP};
 use swc_css::ast::*;
 use swc_css::codegen::{
@@ -11,6 +12,7 @@ use swc_css::visit::{VisitMut, VisitMutWith};
 use swc_ecmascript::ast::{Expr, Str, StrKind, Tpl, TplElement};
 use swc_ecmascript::utils::HANDLER;
 use swc_stylis::prefixer::prefixer;
+use tracing::{debug, trace};
 
 use super::{hash_string, string_literal_expr, LocalStyle};
 
@@ -19,6 +21,8 @@ pub fn transform_css(
     is_global: bool,
     class_name: &Option<String>,
 ) -> Result<Expr, Error> {
+    debug!("CSS: \n{}", style_info.css);
+
     let result: Result<Stylesheet, _> = parse_str(
         &style_info.css,
         style_info.css_span.lo,
@@ -52,8 +56,8 @@ pub fn transform_css(
         }
     };
     // ? Do we need to support optionally prefixing?
-    ss.visit_mut_with(&mut FixedPrefixer);
-    ss.visit_mut_with(&mut CssFixer);
+    ss.visit_mut_with(&mut prefixer());
+    ss.visit_mut_with(&mut CssPlaceholderFixer);
     ss.visit_mut_with(&mut Namespacer {
         class_name: match class_name {
             Some(s) => s.clone(),
@@ -122,27 +126,17 @@ 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()`.
+/// This fixes invalid css which is created from interpolated expressions.
 ///
-/// 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;
+/// `__styled-jsx-placeholder-` is handled at here.
+struct CssPlaceholderFixer;
 
-impl VisitMut for CssFixer {
+impl VisitMut for CssPlaceholderFixer {
     fn visit_mut_media_query(&mut self, q: &mut MediaQuery) {
         q.visit_mut_children_with(self);
 
         match q {
-            MediaQuery::Text(q) => {
+            MediaQuery::Ident(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.
@@ -162,88 +156,177 @@ struct Namespacer {
 
 impl VisitMut for Namespacer {
     fn visit_mut_complex_selector(&mut self, node: &mut ComplexSelector) {
+        #[cfg(debug_assertions)]
+        let _tracing = {
+            // This will add information to the log messages, only for debug build.
+            // Note that we use cargo feature to remove all logging on production builds.
+
+            let mut code = String::new();
+            {
+                let mut wr = BasicCssWriter::new(&mut code, BasicCssWriterConfig { indent: "  " });
+                let mut gen = CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
+
+                gen.emit(&*node).unwrap();
+            }
+
+            tracing::span!(
+                tracing::Level::TRACE,
+                "Namespacer::visit_mut_complex_selector",
+                class_name = &*self.class_name,
+                is_global = self.is_global,
+                is_dynamic = self.is_dynamic,
+                input = &*code
+            )
+            .entered()
+        };
+
         let mut new_selectors = vec![];
-        for selector in &node.selectors {
-            match self.get_transformed_selectors(selector.clone()) {
-                Ok(transformed_selectors) => new_selectors.extend(transformed_selectors),
-                Err(_) => {
-                    HANDLER.with(|handler| {
-                        handler
-                            .struct_span_err(
-                                selector.span,
-                                "Failed to transform one off global selector",
-                            )
-                            .emit()
-                    });
-                    new_selectors.push(selector.clone());
+        let mut combinator = None;
+        for sel in node.children.take() {
+            match &sel {
+                ComplexSelectorChildren::CompoundSelector(selector) => {
+                    match self.get_transformed_selectors(combinator, selector.clone()) {
+                        Ok(transformed_selectors) => new_selectors.extend(transformed_selectors),
+                        Err(_) => {
+                            HANDLER.with(|handler| {
+                                handler
+                                    .struct_span_err(
+                                        selector.span,
+                                        "Failed to transform one off global selector",
+                                    )
+                                    .emit()
+                            });
+                            new_selectors.push(sel);
+                        }
+                    }
+
+                    combinator = None;
                 }
+                ComplexSelectorChildren::Combinator(v) => match v.value {
+                    CombinatorValue::Descendant => {}
+                    CombinatorValue::NextSibling
+                    | CombinatorValue::Child
+                    | CombinatorValue::LaterSibling => {
+                        combinator = Some(v.clone());
+
+                        new_selectors.push(sel);
+                    }
+                },
             };
         }
-        node.selectors = new_selectors;
+        node.children = new_selectors;
     }
 }
 
 impl Namespacer {
     fn get_transformed_selectors(
         &mut self,
+        combinator: Option<Combinator>,
         mut node: CompoundSelector,
-    ) -> Result<Vec<CompoundSelector>, Error> {
+    ) -> Result<Vec<ComplexSelectorChildren>, Error> {
         let mut pseudo_index = None;
+
+        let empty_tokens = Tokens {
+            span: node.span,
+            tokens: vec![],
+        };
+
         for (i, selector) in node.subclass_selectors.iter().enumerate() {
-            if let SubclassSelector::Pseudo(PseudoSelector { name, args, .. }) = selector {
-                // One off global selector
-                if &name.value == "global" {
-                    let block_tokens = get_block_tokens(&args);
-                    let mut front_tokens = get_front_selector_tokens(&args);
-                    let mut args = args.clone();
-                    front_tokens.extend(args.tokens);
-                    front_tokens.extend(block_tokens);
-                    args.tokens = front_tokens;
-                    let complex_selectors = panic::catch_unwind(|| {
-                        let x: ComplexSelector = parse_tokens(
-                            &args,
-                            ParserConfig {
-                                parse_values: false,
-                                allow_wrong_line_comments: true,
-                            },
-                            // TODO(kdy1): We might be able to report syntax errors.
-                            &mut vec![],
-                        )
-                        .unwrap();
-                        return x;
-                    });
-
-                    return match complex_selectors {
-                        Ok(complex_selectors) => {
-                            let mut v = complex_selectors.selectors[1..]
-                                .iter()
-                                .cloned()
-                                .collect::<Vec<_>>();
-
-                            if v.is_empty() {
-                                bail!("Failed to transform one off global selector");
+            let (name, args) = match selector {
+                SubclassSelector::PseudoClass(PseudoClassSelector { name, children, .. }) => {
+                    match children {
+                        Some(PseudoSelectorChildren::Nth(_)) => todo!("nth"),
+                        Some(PseudoSelectorChildren::Tokens(v)) => (name, v),
+                        None => (name, &empty_tokens),
+                    }
+                }
+                SubclassSelector::PseudoElement(PseudoElementSelector {
+                    name, children, ..
+                }) => match children {
+                    Some(children) => (name, children),
+                    None => (name, &empty_tokens),
+                },
+                _ => continue,
+            };
+
+            // One off global selector
+            if &name.value == "global" {
+                let block_tokens = get_block_tokens(&args);
+                let mut front_tokens = get_front_selector_tokens(&args);
+                let mut args = args.clone();
+                front_tokens.extend(args.tokens);
+                front_tokens.extend(block_tokens);
+                args.tokens = front_tokens;
+
+                let complex_selectors = panic::catch_unwind(|| {
+                    let x: ComplexSelector = parse_tokens(
+                        &args,
+                        ParserConfig {
+                            parse_values: false,
+                            allow_wrong_line_comments: true,
+                        },
+                        // TODO(kdy1): We might be able to report syntax errors.
+                        &mut vec![],
+                    )
+                    .unwrap();
+                    return x;
+                });
+
+                return match complex_selectors {
+                    Ok(complex_selectors) => {
+                        let mut v = complex_selectors.children[1..]
+                            .iter()
+                            .cloned()
+                            .collect::<Vec<_>>();
+
+                        match v[0] {
+                            ComplexSelectorChildren::Combinator(Combinator {
+                                value: CombinatorValue::Descendant,
+                                ..
+                            }) => {
+                                v.remove(0);
                             }
+                            _ => {}
+                        }
 
-                            if node.combinator.is_some() && v[0].combinator.is_some() {
-                                bail!("Failed to transform one off global selector");
-                            } else if node.combinator.is_some() {
-                                v[0].combinator = node.combinator;
+                        if v.is_empty() {
+                            bail!("Failed to transform one off global selector");
+                        }
+
+                        trace!("Combinator: {:?}", combinator);
+                        trace!("v[0]: {:?}", v[0]);
+
+                        if combinator.is_some() {
+                            match v.get(0) {
+                                Some(ComplexSelectorChildren::Combinator(..)) => {}
+                                Some(..) => {}
+                                _ => {
+                                    v.push(ComplexSelectorChildren::Combinator(
+                                        combinator.unwrap(),
+                                    ));
+                                }
                             }
+                        }
 
-                            v.iter_mut().for_each(|sel| {
-                                if i < node.subclass_selectors.len() {
-                                    sel.subclass_selectors
-                                        .extend(node.subclass_selectors[i + 1..].to_vec());
+                        v.iter_mut().for_each(|sel| {
+                            if i < node.subclass_selectors.len() {
+                                match sel {
+                                    ComplexSelectorChildren::CompoundSelector(sel) => {
+                                        sel.subclass_selectors.extend(
+                                            node.subclass_selectors[i + 1..].iter().cloned(),
+                                        );
+                                    }
+                                    _ => {}
                                 }
-                            });
+                            }
+                        });
 
-                            Ok(v)
-                        }
-                        Err(_) => bail!("Failed to transform one off global selector"),
-                    };
-                } else if pseudo_index.is_none() {
-                    pseudo_index = Some(i);
-                }
+                        Ok(v)
+                    }
+                    Err(_) => bail!("Failed to transform one off global selector"),
+                };
+            } else if pseudo_index.is_none() {
+                pseudo_index = Some(i);
             }
         }
 
@@ -260,7 +343,7 @@ impl Namespacer {
                 insert_index,
                 SubclassSelector::Class(ClassSelector {
                     span: DUMMY_SP,
-                    text: Text {
+                    text: Ident {
                         raw: subclass_selector.into(),
                         value: subclass_selector.into(),
                         span: DUMMY_SP,
@@ -269,7 +352,7 @@ impl Namespacer {
             );
         }
 
-        Ok(vec![node])
+        Ok(vec![ComplexSelectorChildren::CompoundSelector(node)])
     }
 }
 
diff --git a/packages/next-swc/crates/core/src/top_level_binding_collector.rs b/packages/next-swc/crates/core/src/top_level_binding_collector.rs
index a5b31386bc3fb7f..b591a7f5e9c02b1 100644
--- a/packages/next-swc/crates/core/src/top_level_binding_collector.rs
+++ b/packages/next-swc/crates/core/src/top_level_binding_collector.rs
@@ -1,12 +1,12 @@
 use std::hash::Hash;
-use swc_common::{collections::AHashSet, SyntaxContext, DUMMY_SP};
+use swc_common::{collections::AHashSet, SyntaxContext};
 use swc_ecmascript::{
     ast::{
         ClassDecl, FnDecl, Ident, ImportDefaultSpecifier, ImportNamedSpecifier,
-        ImportStarAsSpecifier, Invalid, ModuleItem, ObjectPatProp, Param, Pat, Stmt, VarDeclarator,
+        ImportStarAsSpecifier, ModuleItem, ObjectPatProp, Param, Pat, Stmt, VarDeclarator,
     },
     utils::ident::IdentLike,
-    visit::{noop_visit_type, Node, Visit, VisitWith},
+    visit::{noop_visit_type, Visit, VisitWith},
 };
 
 // Modified from swc_ecma_utils/src/lib.rs:BindingCollector.
@@ -40,15 +40,15 @@ where
 {
     noop_visit_type!();
 
-    fn visit_class_decl(&mut self, node: &ClassDecl, _: &dyn Node) {
+    fn visit_class_decl(&mut self, node: &ClassDecl) {
         self.add(&node.ident);
     }
 
-    fn visit_fn_decl(&mut self, node: &FnDecl, _: &dyn Node) {
+    fn visit_fn_decl(&mut self, node: &FnDecl) {
         self.add(&node.ident);
     }
 
-    fn visit_pat(&mut self, node: &Pat, _: &dyn Node) {
+    fn visit_pat(&mut self, node: &Pat) {
         if self.is_pat_decl {
             match node {
                 Pat::Ident(i) => self.add(&i.id),
@@ -56,14 +56,14 @@ where
                     for prop in o.props.iter() {
                         match prop {
                             ObjectPatProp::Assign(a) => self.add(&a.key),
-                            ObjectPatProp::KeyValue(k) => k.value.visit_with(k, self),
+                            ObjectPatProp::KeyValue(k) => k.value.visit_with(self),
                             ObjectPatProp::Rest(_) => {}
                         }
                     }
                 }
                 Pat::Array(a) => {
                     for elem in a.elems.iter() {
-                        elem.visit_with(a, self);
+                        elem.visit_with(self);
                     }
                 }
                 _ => {}
@@ -71,44 +71,44 @@ where
         }
     }
 
-    fn visit_param(&mut self, node: &Param, _: &dyn Node) {
+    fn visit_param(&mut self, node: &Param) {
         let old = self.is_pat_decl;
         self.is_pat_decl = true;
         node.visit_children_with(self);
         self.is_pat_decl = old;
     }
 
-    fn visit_import_default_specifier(&mut self, node: &ImportDefaultSpecifier, _: &dyn Node) {
+    fn visit_import_default_specifier(&mut self, node: &ImportDefaultSpecifier) {
         self.add(&node.local);
     }
 
-    fn visit_import_named_specifier(&mut self, node: &ImportNamedSpecifier, _: &dyn Node) {
+    fn visit_import_named_specifier(&mut self, node: &ImportNamedSpecifier) {
         self.add(&node.local);
     }
 
-    fn visit_import_star_as_specifier(&mut self, node: &ImportStarAsSpecifier, _: &dyn Node) {
+    fn visit_import_star_as_specifier(&mut self, node: &ImportStarAsSpecifier) {
         self.add(&node.local);
     }
 
-    fn visit_module_items(&mut self, nodes: &[ModuleItem], _: &dyn Node) {
+    fn visit_module_items(&mut self, nodes: &[ModuleItem]) {
         for node in nodes {
             node.visit_children_with(self)
         }
     }
 
-    fn visit_stmts(&mut self, nodes: &[Stmt], _: &dyn Node) {
+    fn visit_stmts(&mut self, nodes: &[Stmt]) {
         for node in nodes {
             node.visit_children_with(self)
         }
     }
 
-    fn visit_var_declarator(&mut self, node: &VarDeclarator, _: &dyn Node) {
+    fn visit_var_declarator(&mut self, node: &VarDeclarator) {
         let old = self.is_pat_decl;
         self.is_pat_decl = true;
-        node.name.visit_with(node, self);
+        node.name.visit_with(self);
 
         self.is_pat_decl = false;
-        node.init.visit_with(node, self);
+        node.init.visit_with(self);
         self.is_pat_decl = old;
     }
 }
@@ -123,6 +123,6 @@ where
         bindings: Default::default(),
         is_pat_decl: false,
     };
-    n.visit_with(&Invalid { span: DUMMY_SP }, &mut v);
+    n.visit_with(&mut v);
     v.bindings
 }
diff --git a/packages/next-swc/crates/core/tests/errors.rs b/packages/next-swc/crates/core/tests/errors.rs
index d27f7f5003d41de..a488d8158a40b95 100644
--- a/packages/next-swc/crates/core/tests/errors.rs
+++ b/packages/next-swc/crates/core/tests/errors.rs
@@ -10,7 +10,6 @@ use testing::fixture;
 fn syntax() -> Syntax {
     Syntax::Es(EsConfig {
         jsx: true,
-        dynamic_import: true,
         ..Default::default()
     })
 }
diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs
index 0b886e495e088d5..65af367759fae00 100644
--- a/packages/next-swc/crates/core/tests/fixture.rs
+++ b/packages/next-swc/crates/core/tests/fixture.rs
@@ -16,7 +16,6 @@ use testing::fixture;
 fn syntax() -> Syntax {
     Syntax::Es(EsConfig {
         jsx: true,
-        dynamic_import: true,
         ..Default::default()
     })
 }
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-classname-rewriting/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-classname-rewriting/output.js
index e05cc4ead0a3638..f66e9a9e9a85a7f 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-classname-rewriting/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-classname-rewriting/output.js
@@ -2,62 +2,111 @@ import _JSXStyle from "styled-jsx/style";
 export default (()=>{
     const Element = "div";
     return <div className={"jsx-abb4c2202db1a207"}>
+
       <div {...test.test} className={"jsx-abb4c2202db1a207" + " " + (test.test && test.test.className != null && test.test.className || "test")}/>
+
       <div {...test.test.test} className={"jsx-abb4c2202db1a207" + " " + (test.test.test && test.test.test.className != null && test.test.test.className || "test")}/>
+
       <div {...this.test.test} className={"jsx-abb4c2202db1a207" + " " + (this.test.test && this.test.test.className != null && this.test.test.className || "test")}/>
+
       <div data-test="test" className={"jsx-abb4c2202db1a207"}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + `test`}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + `test${true ? " test2" : ""}`}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + ("test " + test || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + ([
         "test",
         "test2"
     ].join(" ") || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (true && "test" || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + ((test ? "test" : null) || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (test || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (test && "test" || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (test && test("test") || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (undefined || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (null || "")}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + (false || "")}/>
+
       <div data-test className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div data-test className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div data-test="test" className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || "test")}/>
+
       <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "test")}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || `test ${test ? "test" : ""}`)}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test("test") || "")}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test("test") && "test" || "")}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || test && test("test") && test2("test") || "")}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || "test")}/>
+
       <div {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || "")}/>
+
       <div {...props} {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")}/>
+
       <div {...props} data-foo {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || props && props.className != null && props.className || "")}/>
+
       <div {...props} data-foo {...rest} className={"jsx-abb4c2202db1a207" + " " + (rest && rest.className != null && rest.className || "test")}/>
+
       <div {...{
         id: "foo"
     }} className={"jsx-abb4c2202db1a207"}/>
+
       <div className={"jsx-abb4c2202db1a207" + " " + "foo"}/>
+
       <div {...{
         className: "foo"
     }} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div className="test" className={"jsx-abb4c2202db1a207" + " " + "foo"}/>
+
       <div {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || "foo")}/>
+
       <div {...{
         className: "foo"
     }} {...bar} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || "foo")}/>
+
       <div className="test" className={"jsx-abb4c2202db1a207" + " " + (props.className || "")}/>
+
       <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (bar && bar.className != null && bar.className || props.className || "")}/>
+
       <div className="test" {...bar} className={"jsx-abb4c2202db1a207" + " " + (props.className || "")}/>
+
       <div {...bar()} className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <Element className={"jsx-abb4c2202db1a207"}/>
+
       <Element className={"jsx-abb4c2202db1a207" + " " + "test"}/>
+
       <Element {...props} className={"jsx-abb4c2202db1a207" + " " + (props && props.className != null && props.className || "")}/>
-      <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207 {color:red}"}</_JSXStyle>
+
+      <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>
+
     </div>;
-});
\ No newline at end of file
+});
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-modes/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-modes/output.js
index 0f85e0d619d33e3..c06fbbcc4c5123d 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-modes/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/attribute-generation-modes/output.js
@@ -15,7 +15,7 @@ export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles
 
     <p className={"jsx-81a68341e430a972 " + `jsx-${styles.__hash}`}>external and static</p>
 
-    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-81a68341e430a972 {color:red}"}</_JSXStyle>
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-81a68341e430a972{color:red}"}</_JSXStyle>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
@@ -41,7 +41,7 @@ export const Test3 = ({ color  })=><div className={`jsx-${styles.__hash}` + " "
 
     <_JSXStyle id={"5cadd6714ea141b4"} dynamic={[
         color
-    ]}>{`p.__jsx-style-dynamic-selector {color:${color}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
@@ -65,11 +65,11 @@ export const Test4 = ({ color  })=><div className={`jsx-${styles.__hash}` + " js
         ]
     ])}>external, static and dynamic</p>
 
-    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c {display:inline-block}"}</_JSXStyle>
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
 
     <_JSXStyle id={"8f336bc49da94d3f"} dynamic={[
         color
-    ]}>{`p.__jsx-style-dynamic-selector {color:${color}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
@@ -79,9 +79,9 @@ export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
 
     <p className={"jsx-df0159ebd3f9fb6f"}>static only</p>
 
-    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-df0159ebd3f9fb6f {display:inline-block}"}</_JSXStyle>
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-df0159ebd3f9fb6f{display:inline-block}"}</_JSXStyle>
 
-    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-df0159ebd3f9fb6f {color:red}"}</_JSXStyle>
+    <_JSXStyle id={"81a68341e430a972"}>{"p.jsx-df0159ebd3f9fb6f{color:red}"}</_JSXStyle>
 
   </div>
 ;
@@ -103,11 +103,11 @@ export const Test6 = ({ color  })=><div className={"jsx-ceba8c9ce34e3d0c " + _JS
         ]
     ])}>static and dynamic</p>
 
-    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c {display:inline-block}"}</_JSXStyle>
+    <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
 
     <_JSXStyle id={"8f336bc49da94d3f"} dynamic={[
         color
-    ]}>{`p.__jsx-style-dynamic-selector {color:${color}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
   </div>
 ;
@@ -131,7 +131,7 @@ export const Test7 = ({ color  })=><div className={_JSXStyle.dynamic([
 
     <_JSXStyle id={"5cadd6714ea141b4"} dynamic={[
         color
-    ]}>{`p.__jsx-style-dynamic-selector {color:${color}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
   </div>
 ;
@@ -160,7 +160,7 @@ export const Test8 = ({ color  })=>{
 
         <_JSXStyle id={"6e7028e37f6f2a1c"} dynamic={[
             innerProps.color
-        ]}>{`p.__jsx-style-dynamic-selector {color:${innerProps.color}}`}</_JSXStyle>
+        ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
 
       </div>;
     }
@@ -189,7 +189,7 @@ export const Test9 = ({ color  })=>{
 
       <_JSXStyle id={"33344a45c20c74fe"} dynamic={[
         innerProps.color
-    ]}>{`p.__jsx-style-dynamic-selector {color:${innerProps.color}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
 
     </div>;
 };
@@ -198,7 +198,7 @@ export const Test10 = ()=><div className={"jsx-e993bec5c22e1b75"}>
 
     <p className={"jsx-e993bec5c22e1b75"}>dynamic with constant variable</p>
 
-    <_JSXStyle id={"e993bec5c22e1b75"}>{`p.jsx-e993bec5c22e1b75 {color:${foo}}`}</_JSXStyle>
+    <_JSXStyle id={"e993bec5c22e1b75"}>{`p.jsx-e993bec5c22e1b75{color:${foo}}`}</_JSXStyle>
 
   </div>
 ;
@@ -216,7 +216,7 @@ export const Test11 = ({ color  })=>{
 
       <_JSXStyle id={"5dc7166977a4514"} dynamic={[
             color
-        ]}>{`.item.__jsx-style-dynamic-selector {color:${color}}`}</_JSXStyle>
+        ]}>{`.item.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
 
       Item #{i + 1}
 
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/class/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/class/output.js
index 5287df687af38c2..81b79672c77a6e9 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/class/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/class/output.js
@@ -1,9 +1,12 @@
 import _JSXStyle from "styled-jsx/style";
 export default class {
-  render() {
-      return <div className={"jsx-b2b86d63f35d25ee"}>
+    render() {
+        return <div className={"jsx-b2b86d63f35d25ee"}>
+
         <p className={"jsx-b2b86d63f35d25ee"}>test</p>
-        <_JSXStyle id={"b2b86d63f35d25ee"}>{"p.jsx-b2b86d63f35d25ee {color:red}"}</_JSXStyle>
+
+        <_JSXStyle id={"b2b86d63f35d25ee"}>{"p.jsx-b2b86d63f35d25ee{color:red}"}</_JSXStyle>
+
       </div>;
-  }
-}
\ No newline at end of file
+    }
+};
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/comments/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/comments/output.js
index 023220611da2219..7c26aca7e820db1 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/comments/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/comments/output.js
@@ -5,7 +5,7 @@ export default class {
 
         <p className={"jsx-1952086b0a5ae64c"}>test</p>
 
-        <_JSXStyle id={"1952086b0a5ae64c"}>{"p.jsx-1952086b0a5ae64c {color:red}"}</_JSXStyle>
+        <_JSXStyle id={"1952086b0a5ae64c"}>{"p.jsx-1952086b0a5ae64c{color:red}"}</_JSXStyle>
 
       </div>;
     }
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/component-attribute/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/component-attribute/output.js
index e7783533dc9f367..29e3b2a95b4dd18 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/component-attribute/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/component-attribute/output.js
@@ -1,7 +1,11 @@
 import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
+
     <Component />
-    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
   </div>
 ;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-selector-after-pseudo/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-selector-after-pseudo/output.js
index 44d472b7184ed6f..6cb37534c641bbe 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-selector-after-pseudo/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-selector-after-pseudo/output.js
@@ -4,7 +4,7 @@ function NavigationItem({ active , className  }) {
         active
     }, className, "navigation-item") || "")}>
 
-      <_JSXStyle id={"2342aae4628612c6"}>{".navigation-item.jsx-2342aae4628612c6 a::after {content:attr(data-text);\ncontent: attr(data-text) / ''}"}</_JSXStyle>
+      <_JSXStyle id={"2342aae4628612c6"}>{".navigation-item.jsx-2342aae4628612c6 a::after{content:attr(data-text);\ncontent: attr(data-text) / ''}"}</_JSXStyle>
 
     </span>;
 }
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-tag-same-file/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-tag-same-file/output.js
index 9d7ec21afd997a5..ec52b3ad1902c72 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-tag-same-file/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/css-tag-same-file/output.js
@@ -7,7 +7,7 @@ export default (({ children  })=><div className={`jsx-${styles.__hash}`}>
 
   </div>
 );
-const styles = new String("p.jsx-556239d258b6d66a {color:red}");
+const styles = new String("p.jsx-556239d258b6d66a{color:red}");
 styles.__hash = "556239d258b6d66a";
 class Test extends React.Component {
     render() {
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/different-jsx-ids/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/different-jsx-ids/output.js
index 0d85d4d20373c94..49c9cc0120fb870 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/different-jsx-ids/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/different-jsx-ids/output.js
@@ -5,7 +5,7 @@ const A = ()=><div className={"jsx-f44d626e14f3cfbc"}>
 
     <p className={"jsx-f44d626e14f3cfbc"}>test</p>
 
-    <_JSXStyle id={"f44d626e14f3cfbc"}>{`p.jsx-f44d626e14f3cfbc {color:${color}}`}</_JSXStyle>
+    <_JSXStyle id={"f44d626e14f3cfbc"}>{`p.jsx-f44d626e14f3cfbc{color:${color}}`}</_JSXStyle>
 
   </div>
 ;
@@ -13,7 +13,7 @@ const B = ()=><div className={"jsx-9db1df72abe82640"}>
 
     <p className={"jsx-9db1df72abe82640"}>test</p>
 
-    <_JSXStyle id={"9db1df72abe82640"}>{`p.jsx-9db1df72abe82640 {color:${otherColor}}`}</_JSXStyle>
+    <_JSXStyle id={"9db1df72abe82640"}>{`p.jsx-9db1df72abe82640{color:${otherColor}}`}</_JSXStyle>
 
   </div>
 ;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element-class/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element-class/output.js
index 3aea047ea1efcdd..70fafc58726ec83 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element-class/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element-class/output.js
@@ -3,17 +3,23 @@ export default class {
     render() {
         const Element = "div";
         return <Element className={"jsx-f825b24bbab5b83b" + " " + "root"}>
+
         <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
-        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b {background:red}"}</_JSXStyle>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
       </Element>;
     }
-}
+};
 const Element2 = "div";
 export const Test2 = class {
     render() {
         return <Element2 className="root">
+
         <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
-        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b {background:red}"}</_JSXStyle>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
       </Element2>;
     }
-}
\ No newline at end of file
+};
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element/output.js
index 82d223d54a45978..5b7a6e7900f48e5 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/dynamic-element/output.js
@@ -2,27 +2,39 @@ import _JSXStyle from "styled-jsx/style";
 export default (({ level =1  })=>{
     const Element = `h${level}`;
     return <Element className={"jsx-fca64cc3f069b519" + " " + "root"}>
+
       <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
-      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519 {background:red}"}</_JSXStyle>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
     </Element>;
 });
 export const TestLowerCase = ({ level =1  })=>{
     const element = `h${level}`;
     return <element className={"jsx-fca64cc3f069b519" + " " + "root"}>
+
       <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
-      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519 {background:red}"}</_JSXStyle>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
     </element>;
 };
 const Element2 = "div";
 export const Test2 = ()=>{
     return <Element2 className="root">
+
       <p className={"jsx-fca64cc3f069b519"}>dynamic element</p>
-      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519 {background:red}"}</_JSXStyle>
+
+      <_JSXStyle id={"fca64cc3f069b519"}>{".root.jsx-fca64cc3f069b519{background:red}"}</_JSXStyle>
+
     </Element2>;
 };
 export const Test3 = ({ Component ="div"  })=>{
     return <Component className={"jsx-f825b24bbab5b83b"}>
+
       <p className={"jsx-f825b24bbab5b83b"}>dynamic element</p>
-        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b {background:red}"}</_JSXStyle>
+
+        <_JSXStyle id={"f825b24bbab5b83b"}>{".root.jsx-f825b24bbab5b83b{background:red}"}</_JSXStyle>
+
     </Component>;
-};
\ No newline at end of file
+};
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/expressions/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/expressions/output.js
index 4098255d43081c1..91f35e2ea9b56b9 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/expressions/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/expressions/output.js
@@ -51,45 +51,45 @@ export default (({ display  })=><div className={"jsx-843124768056a74c " + _JSXSt
         ]
     ])}>test</p>
 
-    <_JSXStyle id={"5df43f2861c900e6"}>{`p.${color}.jsx-843124768056a74c {color:${otherColor};
+    <_JSXStyle id={"5df43f2861c900e6"}>{`p.${color}.jsx-843124768056a74c{color:${otherColor};
 display:${obj.display}}`}</_JSXStyle>
 
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-843124768056a74c {color:red}"}</_JSXStyle>
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-843124768056a74c{color:red}"}</_JSXStyle>
 
-    <_JSXStyle id={"a971cf00393d41be"}>{`body {background:${color}}`}</_JSXStyle>
+    <_JSXStyle id={"a971cf00393d41be"}>{`body{background:${color}}`}</_JSXStyle>
 
-    <_JSXStyle id={"a971cf00393d41be"}>{`body {background:${color}}`}</_JSXStyle>
+    <_JSXStyle id={"a971cf00393d41be"}>{`body{background:${color}}`}</_JSXStyle>
 
     // TODO: the next two should have the same hash
 
-    <_JSXStyle id={"5cadd6714ea141b4"}>{`p.jsx-843124768056a74c {color:${color}}`}</_JSXStyle>
+    <_JSXStyle id={"5cadd6714ea141b4"}>{`p.jsx-843124768056a74c{color:${color}}`}</_JSXStyle>
 
-    <_JSXStyle id={"5cadd6714ea141b4"}>{`p.jsx-843124768056a74c {color:${color}}`}</_JSXStyle>
+    <_JSXStyle id={"5cadd6714ea141b4"}>{`p.jsx-843124768056a74c{color:${color}}`}</_JSXStyle>
 
     <_JSXStyle id={"785cf5e120672da8"} dynamic={[
         darken(color)
-    ]}>{`p.__jsx-style-dynamic-selector {color:${darken(color)}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color)}}`}</_JSXStyle>
 
     <_JSXStyle id={"108a316873f1c6fc"} dynamic={[
         darken(color) + 2
-    ]}>{`p.__jsx-style-dynamic-selector {color:${darken(color) + 2}}`}</_JSXStyle>
+    ]}>{`p.__jsx-style-dynamic-selector{color:${darken(color) + 2}}`}</_JSXStyle>
 
-    <_JSXStyle id={"bb5a8a5ee5cd36db"}>{`@media (min-width:${mediumScreen}) {p.jsx-843124768056a74c {color:green}
-p.jsx-843124768056a74c {color:${`red`}}}
-p.jsx-843124768056a74c {color:red}`}</_JSXStyle>
+    <_JSXStyle id={"bb5a8a5ee5cd36db"}>{`@media (min-width:${mediumScreen}) {p.jsx-843124768056a74c{color:green}
+p.jsx-843124768056a74c{color:${`red`}}}
+p.jsx-843124768056a74c{color:red}`}</_JSXStyle>
 
-    <_JSXStyle id={"99746edba785c617"}>{`p.jsx-843124768056a74c {-webkit-animation-duration:${animationDuration};
+    <_JSXStyle id={"99746edba785c617"}>{`p.jsx-843124768056a74c{-webkit-animation-duration:${animationDuration};
 animation-duration:${animationDuration}}`}</_JSXStyle>
 
-    <_JSXStyle id={"62d69d091a270e9d"}>{`p.jsx-843124768056a74c {-webkit-animation:${animationDuration} forwards ${animationName};
+    <_JSXStyle id={"62d69d091a270e9d"}>{`p.jsx-843124768056a74c{-webkit-animation:${animationDuration} forwards ${animationName};
 animation:${animationDuration} forwards ${animationName}}
-div.jsx-843124768056a74c {background:${color}}`}</_JSXStyle>
+div.jsx-843124768056a74c{background:${color}}`}</_JSXStyle>
 
 
 
     <_JSXStyle id={"a124d516c2c0707d"} dynamic={[
         display ? "block" : "none"
-    ]}>{`span.__jsx-style-dynamic-selector {display:${display ? "block" : "none"}}`}</_JSXStyle>
+    ]}>{`span.__jsx-style-dynamic-selector{display:${display ? "block" : "none"}}`}</_JSXStyle>
 
     // TODO: causes bad syntax
 
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-nested-scope/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-nested-scope/output.js
index 134874966a77192..ec88815709af206 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-nested-scope/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-nested-scope/output.js
@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 function test() {
     ({
-        styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207 {color:red}"}</_JSXStyle>,
+        styles: <_JSXStyle id={"abb4c2202db1a207"}>{"div.jsx-abb4c2202db1a207{color:red}"}</_JSXStyle>,
         className: "jsx-abb4c2202db1a207"
     });
-}
\ No newline at end of file
+}
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-stylesheet/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-stylesheet/output.js
index 27ed804c2f4864c..7dc7df9b4c8d786 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-stylesheet/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/external-stylesheet/output.js
@@ -14,7 +14,7 @@ export default (()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__ha
 
     <div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles.__hash} jsx-${styles3.__hash}`}>woot</div>
 
-    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14 {color:red}\ndiv.jsx-bee92b62eadf8a14 {color:green}"}</_JSXStyle>
+    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14{color:red}\ndiv.jsx-bee92b62eadf8a14{color:green}"}</_JSXStyle>
 
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
 
@@ -30,7 +30,7 @@ export const Test = ()=><div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3
 
     <div className={"jsx-bee92b62eadf8a14 " + `jsx-${styles3.__hash}`}>woot</div>
 
-    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14 {color:red}\ndiv.jsx-bee92b62eadf8a14 {color:green}"}</_JSXStyle>
+    <_JSXStyle id={"bee92b62eadf8a14"}>{"p.jsx-bee92b62eadf8a14{color:red}\ndiv.jsx-bee92b62eadf8a14{color:green}"}</_JSXStyle>
 
   </div>
 ;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/fragment/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/fragment/output.js
index 0fff80f7da73920..dda9c2b5fc7c534 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/fragment/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/fragment/output.js
@@ -1,29 +1,48 @@
 import _JSXStyle from "styled-jsx/style";
 import React from "react";
 export default (()=><>
+
     <p className={"jsx-6dd5f97e085c0297"}>Testing!!!</p>
+
     <p className={"jsx-6dd5f97e085c0297" + " " + "foo"}>Bar</p>
+
     <>
+
       <h3 id="head" className={"jsx-6dd5f97e085c0297"}>Title...</h3>
+
       <React.Fragment >
+
         <p className={"jsx-6dd5f97e085c0297"}>hello</p>
+
         <>
+
           <p className={"jsx-6dd5f97e085c0297"}>foo</p>
+
           <p className={"jsx-6dd5f97e085c0297"}>bar</p>
+
         </>
+
         <p className={"jsx-6dd5f97e085c0297"}>world</p>
+
       </React.Fragment>
+
     </>
-    <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297 {color:cyan}\n.foo.jsx-6dd5f97e085c0297 {font-size:18px;\ncolor:hotpink}\n#head.jsx-6dd5f97e085c0297 {text-decoration:underline}"}</_JSXStyle>
+
+    <_JSXStyle id={"6dd5f97e085c0297"}>{"p.jsx-6dd5f97e085c0297{color:cyan}\n.foo.jsx-6dd5f97e085c0297{font-size:18px;\ncolor:hotpink}\n#head.jsx-6dd5f97e085c0297{text-decoration:underline}"}</_JSXStyle>
+
   </>
 );
 function Component1() {
     return <>
+
       <div >test</div>
+
     </>;
 }
 function Component2() {
     return <div className={"jsx-678f41ca6d3b294b"}>
-      <_JSXStyle id={"678f41ca6d3b294b"}>{"div.jsx-678f41ca6d3b294b {color:red}"}</_JSXStyle>
+
+      <_JSXStyle id={"678f41ca6d3b294b"}>{"div.jsx-678f41ca6d3b294b{color:red}"}</_JSXStyle>
+
     </div>;
-}
\ No newline at end of file
+}
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-child-selector/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-child-selector/output.js
index 4ead21da7dc7047..b59286de9c3d443 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-child-selector/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-child-selector/output.js
@@ -3,7 +3,7 @@ const Test = ()=><div className={"jsx-5a206f122d1cb32e"}>
 
     <span className={"jsx-5a206f122d1cb32e"}>test</span>
 
-    <_JSXStyle id={"5a206f122d1cb32e"}>{"div.jsx-5a206f122d1cb32e >span {color:red}"}</_JSXStyle>
+    <_JSXStyle id={"5a206f122d1cb32e"}>{"div.jsx-5a206f122d1cb32e>span{color:red}"}</_JSXStyle>
 
   </div>
 ;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-redundant/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-redundant/output.js
index 4a5395194a89e16..aba1ba957e3dee7 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-redundant/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global-redundant/output.js
@@ -4,7 +4,7 @@ export default function IndexPage() {
 
       should be blue.
 
-      <_JSXStyle id={"b6abd0684ba81871"}>{"div {color:blue}"}</_JSXStyle>
+      <_JSXStyle id={"b6abd0684ba81871"}>{"div{color:blue}"}</_JSXStyle>
 
     </div>;
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global/output.js
index bd0a8e425b1f7a1..7eab66c441b5a97 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/global/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/global/output.js
@@ -1,7 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
 const Test = ()=><div className={"jsx-d47d6adadf14e957"}>
-    <_JSXStyle id={"d47d6adadf14e957"}>{"body {color:red}\n:hover {color:red;\ndisplay:-webkit-box;\ndisplay:-webkit-flex;\ndisplay:-ms-flexbox;\ndisplay:flex;\n-webkit-animation:foo 1s ease-out;\nanimation:foo 1s ease-out}\ndiv a {display:none}\n[data-test] >div {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"d47d6adadf14e957"}>{"body{color:red}\n:hover{color:red;\ndisplay:-webkit-box;\ndisplay:-webkit-flex;\ndisplay:-ms-flexbox;\ndisplay:flex;\n-webkit-animation:foo 1s ease-out;\nanimation:foo 1s ease-out}\ndiv a{display:none}\n[data-test]>div{color:red}"}</_JSXStyle>
+
   </div>
 ;
-const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p {color:red}"}</_JSXStyle>
-;
\ No newline at end of file
+const Test2 = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>
+;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/issue-30570/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/issue-30570/output.js
index 4f5180f25d514fd..fec5cf3680648f9 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/issue-30570/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/issue-30570/output.js
@@ -6,7 +6,7 @@ export default function IndexPage() {
 
   
 
-        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex) {h1 {color:hotpink}}"}</_JSXStyle>
+        <_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex) {h1{color:hotpink}}"}</_JSXStyle>
 
       </div>;
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/mixed-global-scoped/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/mixed-global-scoped/output.js
index 6d08893f5b01b7f..18c217026b04938 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/mixed-global-scoped/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/mixed-global-scoped/output.js
@@ -1,9 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
-const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p {color:red}"}</_JSXStyle>
+const Test = ()=><_JSXStyle id={"94239b6d6b42c9b5"}>{"p{color:red}"}</_JSXStyle>
 ;
 export default (()=><div className={"jsx-3822e6e1fb9fa41a"}>
+
     <p className={"jsx-3822e6e1fb9fa41a"}>test</p>
-    <_JSXStyle id={"b7efb453c85593c1"}>{"body {background:red}"}</_JSXStyle>
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-3822e6e1fb9fa41a {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"b7efb453c85593c1"}>{"body{background:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-3822e6e1fb9fa41a{color:red}"}</_JSXStyle>
+
   </div>
-);
\ No newline at end of file
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/multiple-jsx/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/multiple-jsx/output.js
index 24fa0610c705b70..0014d0844a7ef62 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/multiple-jsx/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/multiple-jsx/output.js
@@ -3,23 +3,33 @@ const attrs = {
     id: "test"
 };
 const Test1 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
     <span {...attrs} data-test="test" className={"jsx-a9535d7d5f32c3c4" + " " + (attrs && attrs.className != null && attrs.className || "")}>test</span>
+
     <Component />
-    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
   </div>
 ;
 const Test2 = ()=><span >test</span>
 ;
 const Test3 = ()=><div className={"jsx-a9535d7d5f32c3c4"}>
+
     <span className={"jsx-a9535d7d5f32c3c4"}>test</span>
-    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"a9535d7d5f32c3c4"}>{"span.jsx-a9535d7d5f32c3c4{color:red}"}</_JSXStyle>
+
   </div>
 ;
 export default class {
     render() {
         return <div className={"jsx-b2b86d63f35d25ee"}>
+
         <p className={"jsx-b2b86d63f35d25ee"}>test</p>
-        <_JSXStyle id={"b2b86d63f35d25ee"}>{"p.jsx-b2b86d63f35d25ee {color:red}"}</_JSXStyle>
+
+        <_JSXStyle id={"b2b86d63f35d25ee"}>{"p.jsx-b2b86d63f35d25ee{color:red}"}</_JSXStyle>
+
       </div>;
     }
-}
\ No newline at end of file
+};
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/non-styled-jsx-style/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/non-styled-jsx-style/output.js
index ca445ea4fcec66d..eb5115dc9be48a8 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/non-styled-jsx-style/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/non-styled-jsx-style/output.js
@@ -1,9 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
+
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
+
     <style dangerouslySetInnerHTML={{
         __html: `body { margin: 0; }`
     }}></style>
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
+
   </div>
-);
\ No newline at end of file
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/number-after-placeholder/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/number-after-placeholder/output.js
index f506959dc6cd198..da1caf97d70e6b2 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/number-after-placeholder/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/number-after-placeholder/output.js
@@ -11,7 +11,7 @@ export default function IndexPage() {
 
       </Link>
 
-      <_JSXStyle id={"bc8a8bae32099ce8"}>{`a.jsx-bc8a8bae32099ce8 {color:${"#abcdef"}12}`}</_JSXStyle>
+      <_JSXStyle id={"bc8a8bae32099ce8"}>{`a.jsx-bc8a8bae32099ce8{color:${"#abcdef"}12}`}</_JSXStyle>
 
     </div>;
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/one-off-global-selectors/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/one-off-global-selectors/output.js
index acdc2bd855788ec..fc84b41f066e395 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/one-off-global-selectors/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/one-off-global-selectors/output.js
@@ -1,6 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-c7c3a8e231c9215a"}>
+
     <p className={"jsx-c7c3a8e231c9215a"}>test</p>
-    <_JSXStyle id={"c7c3a8e231c9215a"}>{".container.jsx-c7c3a8e231c9215a >* {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"c7c3a8e231c9215a"}>{".container.jsx-c7c3a8e231c9215a>*{color:red}"}</_JSXStyle>
+
   </div>
-);
\ No newline at end of file
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/stateless/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/stateless/output.js
index d3425c681fd73c4..a91e00187135d4a 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/stateless/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/stateless/output.js
@@ -1,8 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
+
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
+
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
+
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
+
   </div>
 );
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/styles/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/styles/output.js
index eafa22c8e539a13..1e0ef8c9592f77d 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/styles/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/styles/output.js
@@ -1,43 +1,43 @@
 import _JSXStyle from "styled-jsx/style";
-import colors1, { size } from "./constants";
+import colors, { size } from "./constants";
 const color = "red";
-const bar = new String("div.jsx-aaed0341accea8f {font-size:3em}");
+const bar = new String("div.jsx-aaed0341accea8f{font-size:3em}");
 bar.__hash = "aaed0341accea8f";
-const baz = new String("div {font-size:3em}");
+const baz = new String("div{font-size:3em}");
 baz.__hash = "aaed0341accea8f";
-const a = new String(`div {font-size:${size}em}`);
+const a = new String(`div{font-size:${size}em}`);
 a.__hash = "f14cced97c082d2c";
 export const uh = bar;
-export const foo = new String(`div.jsx-a0d126276b085021 {color:${color}}`);
+export const foo = new String(`div.jsx-a0d126276b085021{color:${color}}`);
 foo.__hash = "a0d126276b085021";
 ({
-    styles: <_JSXStyle id={"47e08c293b53f262"}>{`div.jsx-47e08c293b53f262 {color:${colors1.green.light}}
-a.jsx-47e08c293b53f262 {color:red}`}</_JSXStyle>,
+    styles: <_JSXStyle id={"47e08c293b53f262"}>{`div.jsx-47e08c293b53f262{color:${colors.green.light}}
+a.jsx-47e08c293b53f262{color:red}`}</_JSXStyle>,
     className: "jsx-47e08c293b53f262"
 });
 const b = {
-    styles: <_JSXStyle id={"47e08c293b53f262"}>{`div.jsx-47e08c293b53f262 {color:${colors1.green.light}}
-a.jsx-47e08c293b53f262 {color:red}`}</_JSXStyle>,
+    styles: <_JSXStyle id={"47e08c293b53f262"}>{`div.jsx-47e08c293b53f262{color:${colors.green.light}}
+a.jsx-47e08c293b53f262{color:red}`}</_JSXStyle>,
     className: "jsx-47e08c293b53f262"
 };
-const dynamic = (colors)=>{
+const dynamic = (colors1)=>{
     const b = {
         styles: <_JSXStyle id={"79d79305fa1611e"} dynamic={[
-            colors.green.light
-        ]}>{`div.__jsx-style-dynamic-selector {color:${colors.green.light}}
-a.__jsx-style-dynamic-selector {color:red}`}</_JSXStyle>,
+            colors1.green.light
+        ]}>{`div.__jsx-style-dynamic-selector{color:${colors1.green.light}}
+a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
         className: _JSXStyle.dynamic([
             [
                 "79d79305fa1611e",
                 [
-                    colors.green.light
+                    colors1.green.light
                 ]
             ]
         ])
     };
 };
 export default {
-    styles: <_JSXStyle id={"d9cea503e39c5315"}>{`div.jsx-d9cea503e39c5315 {font-size:3em}
-p.jsx-d9cea503e39c5315 {color:${color}}`}</_JSXStyle>,
+    styles: <_JSXStyle id={"d9cea503e39c5315"}>{`div.jsx-d9cea503e39c5315{font-size:3em}
+p.jsx-d9cea503e39c5315{color:${color}}`}</_JSXStyle>,
     className: "jsx-d9cea503e39c5315"
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/too-many/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/too-many/output.js
index b4425d688fad2b2..f239d71bf04f053 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/too-many/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/too-many/output.js
@@ -43,21 +43,21 @@ export const Red = ({ Component ="button"  })=>{
         e13,
         e14,
         e15
-    ]}>{`.button.__jsx-style-dynamic-selector {--button-1:${e1};
---button-2:${e2};
---button-3:${e3};
---button-4:${e4};
---button-5:${e5};
---button-6:${e6};
---button-7:${e7};
---button-8:${e8};
---button-9:${e9};
---button-10:${e10};
---button-11:${e11};
---button-12:${e12};
---button-13:${e13};
---button-14:${e14};
---button-15:${e15}}`}</_JSXStyle>
+    ]}>{`.button.__jsx-style-dynamic-selector{--button-1: ${e1};
+--button-2: ${e2};
+--button-3: ${e3};
+--button-4: ${e4};
+--button-5: ${e5};
+--button-6: ${e6};
+--button-7: ${e7};
+--button-8: ${e8};
+--button-9: ${e9};
+--button-10: ${e10};
+--button-11: ${e11};
+--button-12: ${e12};
+--button-13: ${e13};
+--button-14: ${e14};
+--button-15: ${e15}}`}</_JSXStyle>
 
     </Component>;
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-1/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-1/output.js
index 8300fbd5aa1b806..7b9b2f69a80329b 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-1/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-1/output.js
@@ -2,8 +2,11 @@ import _JSXStyle from "styled-jsx/style";
 export default class {
     render() {
         return <div className={"jsx-1f6cef12199c3a8f"}>
+
         <p className={"jsx-1f6cef12199c3a8f"}>test</p>
-        <_JSXStyle id={"1f6cef12199c3a8f"}>{"p.jsx-1f6cef12199c3a8f {content:'`'}"}</_JSXStyle>
+
+        <_JSXStyle id={"1f6cef12199c3a8f"}>{"p.jsx-1f6cef12199c3a8f{content:'`'}"}</_JSXStyle>
+
       </div>;
     }
-}
\ No newline at end of file
+};
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-2/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-2/output.js
index 97653f3a17e6db3..f9b09f84aa04789 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-2/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-escape-2/output.js
@@ -11,8 +11,8 @@ export default function Home({ fontFamily  }) {
 
       <_JSXStyle id={"d64fed44dbc5d8df"} dynamic={[
         fontFamily
-    ]}>{`body {font-family:${fontFamily}}
-code:before, code:after {content:'\`'}`}</_JSXStyle>
+    ]}>{`body{font-family:${fontFamily}}
+code:before, code:after{content:'\`'}`}</_JSXStyle>
 
     </div>;
 };
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
index ceb0d1816bfe680..7422567d0bb68fc 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
@@ -21,7 +21,7 @@ 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;" : ""}
+        ]}>{`@media only screen {a.__jsx-style-dynamic-selector{${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}
                 }}`}</_JSXStyle>
 
         </div>;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-2-as-part-of-value/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-2-as-part-of-value/output.js
index ef298af150e6ea7..49d6ac7b3a0bd41 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-2-as-part-of-value/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-2-as-part-of-value/output.js
@@ -27,7 +27,7 @@ export default class {
             a[b],
             -1 * (c || 0),
             d
-        ]}>{`.a:hover .b.__jsx-style-dynamic-selector {a:${a[b]}px!important;
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{a:${a[b]}px!important;
 b:translate3d(0, ${-1 * (c || 0)}px, -${d}px) scale(1)!important}`}</_JSXStyle>
 
         </div>;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-3-as-value/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-3-as-value/output.js
index ea4e8bead8caa8f..5b7244f9e42c899 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-3-as-value/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-3-as-value/output.js
@@ -21,7 +21,7 @@ export default class {
 
           <_JSXStyle id={"1dd34a5c235f087f"} dynamic={[
             a
-        ]}>{`@media only screen {a.__jsx-style-dynamic-selector {color:${a}}}`}</_JSXStyle>
+        ]}>{`@media only screen {a.__jsx-style-dynamic-selector{color:${a}}}`}</_JSXStyle>
 
         </div>;
     }
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-4-as-part-of-value-in-multiple/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
index a9c6f8262ff5cbc..291494df4f02023 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-4-as-part-of-value-in-multiple/output.js
@@ -24,7 +24,7 @@ export default class {
           <_JSXStyle id={"35bb702eb335aa6f"} dynamic={[
             a || "var(--c)",
             b || "inherit"
-        ]}>{`.a:hover .b.__jsx-style-dynamic-selector {display:inline-block;
+        ]}>{`.a:hover .b.__jsx-style-dynamic-selector{display:inline-block;
 padding:0 ${a || "var(--c)"};
 color:${b || "inherit"}}`}</_JSXStyle>
 
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-5-values-of-multiple-properties/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-5-values-of-multiple-properties/output.js
index 695cbc4c9a525d0..04c7ddfab3159a2 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-5-values-of-multiple-properties/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/tpl-placeholder-5-values-of-multiple-properties/output.js
@@ -24,7 +24,7 @@ export default class {
           <_JSXStyle id={"21ae2868f133bbf6"} dynamic={[
             a ? "100%" : "200px",
             b ? "0" : "8px 20px"
-        ]}>{`.item.__jsx-style-dynamic-selector {max-width:${a ? "100%" : "200px"};
+        ]}>{`.item.__jsx-style-dynamic-selector{max-width:${a ? "100%" : "200px"};
 padding:${b ? "0" : "8px 20px"}}`}</_JSXStyle>
 
         </div>;
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/input.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/input.js
new file mode 100644
index 000000000000000..5f3e7a94daf5177
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/input.js
@@ -0,0 +1,116 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      p a span {
+        color: red;
+      }
+      
+      p :global(span) {
+        background: blue
+      }
+      
+      p a[title="'w ' '  t'"] {
+        margin: auto
+      }
+      
+      p :global(span:not(.test)) {
+        color: green
+      }
+      
+      p, h1 {
+        color: blue;
+        animation: hahaha 3s ease forwards infinite;
+        animation-name: hahaha;
+        animation-delay: 100ms;
+      }
+      
+      p {
+        animation: hahaha 1s, hehehe 2s;
+      }
+      
+      p:hover {
+        color: red;
+      }
+      
+      p::before {
+        color: red;
+      }
+      
+      :hover {
+        color: red;
+      }
+      
+      ::before {
+        color: red;
+      }
+      
+      :hover p {
+        color: red;
+      }
+      
+      p + a {
+        color: red;
+      }
+      
+      p ~ a {
+        color: red;
+      }
+      
+      p > a {
+        color: red;
+      }
+      
+      @keyframes hahaha {
+        from { top: 0 }
+        to { top: 100 }
+      }
+      
+      @keyframes hehehe {
+        from { left: 0 }
+        to { left: 100 }
+      }
+      
+      @media (min-width: 500px) {
+        .test {
+          color: red;
+        }
+      }
+      
+      .test {
+        /* test, test */
+        display: block;
+        /*
+      
+        test
+        */
+      }
+      
+      .inline-flex {
+        display: inline-flex;
+      }
+      
+      .flex {
+        display: flex;
+      }
+      
+      .test {
+        box-shadow: 0 0 10px black, inset 0 0 5px black
+      }
+      
+      .test[title=","] {
+        display: inline-block;
+      }
+      
+      .test.is-status .test {
+        color: red;
+      }
+      
+      .a-selector:hover,
+      .a-selector:focus
+      {
+        outline: none;
+      }   
+    `}</style>
+  </div>
+)
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/output.js
new file mode 100644
index 000000000000000..a6480c2fb787d9f
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-complex-selector/output.js
@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-713499aa363d6373"}>
+
+    <p className={"jsx-713499aa363d6373"}>test</p>
+
+    <_JSXStyle id={"713499aa363d6373"}>{"p.jsx-713499aa363d6373 a.jsx-713499aa363d6373 span.jsx-713499aa363d6373{color:red}\np.jsx-713499aa363d6373 span{background:blue}\np.jsx-713499aa363d6373 a[title=\"'w ' '  t'\"].jsx-713499aa363d6373{margin:auto}\np.jsx-713499aa363d6373 span:not(.test){color:green}\np.jsx-713499aa363d6373, h1.jsx-713499aa363d6373{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-713499aa363d6373{-webkit-animation:hahaha 1s, hehehe 2s;\nanimation:hahaha 1s, hehehe 2s}\np.jsx-713499aa363d6373:hover{color:red}\np.jsx-713499aa363d6373::before{color:red}\n.jsx-713499aa363d6373:hover{color:red}\n.jsx-713499aa363d6373::before{color:red}\n.jsx-713499aa363d6373:hover p.jsx-713499aa363d6373{color:red}\np.jsx-713499aa363d6373+a.jsx-713499aa363d6373{color:red}\np.jsx-713499aa363d6373~a.jsx-713499aa363d6373{color:red}\np.jsx-713499aa363d6373>a.jsx-713499aa363d6373{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-713499aa363d6373{color:red}}\n.test.jsx-713499aa363d6373{display:block}\n.inline-flex.jsx-713499aa363d6373{display:-webkit-inline-box;\ndisplay:-webkit-inline-flex;\ndisplay:-ms-inline-flexbox;\ndisplay:inline-flex}\n.flex.jsx-713499aa363d6373{display:-webkit-box;\ndisplay:-webkit-flex;\ndisplay:-ms-flexbox;\ndisplay:flex}\n.test.jsx-713499aa363d6373{box-shadow:0 0 10px black, inset 0 0 5px black}\n.test[title=\",\"].jsx-713499aa363d6373{display:inline-block}\n.test.is-status.jsx-713499aa363d6373 .test.jsx-713499aa363d6373{color:red}\n.a-selector.jsx-713499aa363d6373:hover, .a-selector.jsx-713499aa363d6373:focus{outline:none}"}</_JSXStyle>
+
+  </div>
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/input.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/input.js
new file mode 100644
index 000000000000000..b5c87c4b95bdd40
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/input.js
@@ -0,0 +1,32 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      html {
+        background-image:
+          linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
+          url(/static/background.svg);
+      }
+      
+      :global(p) {
+        color: blue
+      }
+      
+      :global(p){
+        color: blue;
+      }
+      
+      :global(p), a {
+        color: blue;
+      }
+      
+      :global(.foo + a) {
+        color: red;
+      }
+      
+      :global(body) {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      }
+    `}</style>
+  </div>
+)
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/output.js
new file mode 100644
index 000000000000000..e8ab9d15554867b
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-global/output.js
@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-53fd644ab080300c"}>
+
+    <p className={"jsx-53fd644ab080300c"}>test</p>
+
+    <_JSXStyle id={"53fd644ab080300c"}>{"html.jsx-53fd644ab080300c{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-53fd644ab080300c{color:blue}\n.foo+a{color:red}\nbody{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif}"}</_JSXStyle>
+
+  </div>
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/input.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/input.js
new file mode 100644
index 000000000000000..978d21aacb43fd5
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/input.js
@@ -0,0 +1,24 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      @media (min-width: 1px) and (max-width: 768px) {
+        [class*='grid__col--'] {
+          margin-top: 12px;
+          margin-bottom: 12px;
+        }
+      }
+      
+      @media (max-width: 64em) {
+        .test {
+          margin-bottom: 1em;
+        }
+        @supports (-moz-appearance: none) and (display: contents) {
+          .test {
+            margin-bottom: 2rem;
+          }
+        }
+      }      
+    `}</style>
+  </div>
+)
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/output.js
new file mode 100644
index 000000000000000..abc84ac0f354d0e
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-media-query/output.js
@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-1f7963ae04c6466a"}>
+
+    <p className={"jsx-1f7963ae04c6466a"}>test</p>
+
+    <_JSXStyle id={"1f7963ae04c6466a"}>{"@media (min-width:1px) and (max-width:768px) {[class*='grid__col--'].jsx-1f7963ae04c6466a{margin-top:12px;\nmargin-bottom:12px}}\n@media (max-width:64em) {.test.jsx-1f7963ae04c6466a{margin-bottom:1em}\n@supports (-moz-appearance:none) and (display:contents) {.test.jsx-1f7963ae04c6466a{margin-bottom:2rem}}}"}</_JSXStyle>
+
+  </div>
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/input.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/input.js
new file mode 100644
index 000000000000000..c1964abbf0b2c7d
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/input.js
@@ -0,0 +1,22 @@
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`
+      p {
+        color: red;
+      }
+      
+      p{
+        color: red
+      }
+      
+      * {
+        color: blue;
+      }
+      
+      [href="woot"] {
+        color: red;
+      }
+    `}</style>
+  </div>
+)
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/output.js
new file mode 100644
index 000000000000000..9c81fa9facdf808
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css-normal/output.js
@@ -0,0 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div className={"jsx-1a19bb4817c105dd"}>
+
+    <p className={"jsx-1a19bb4817c105dd"}>test</p>
+
+    <_JSXStyle id={"1a19bb4817c105dd"}>{"p.jsx-1a19bb4817c105dd{color:red}\np.jsx-1a19bb4817c105dd{color:red}\n*.jsx-1a19bb4817c105dd{color:blue}\n[href=\"woot\"].jsx-1a19bb4817c105dd{color:red}"}</_JSXStyle>
+
+  </div>
+);
diff --git a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css/output.js
index a71cc660991be79..ddefde312281627 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/transform-css/output.js
@@ -3,7 +3,7 @@ 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-swc/crates/core/tests/fixture/styled-jsx/whitespace/output.js b/packages/next-swc/crates/core/tests/fixture/styled-jsx/whitespace/output.js
index 2ad9de3f805bbfa..a91e00187135d4a 100644
--- a/packages/next-swc/crates/core/tests/fixture/styled-jsx/whitespace/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/styled-jsx/whitespace/output.js
@@ -1,8 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 export default (()=><div className={"jsx-94239b6d6b42c9b5"}>
+
     <p className={"jsx-94239b6d6b42c9b5"}>test</p>
+
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
+
     <p className={"jsx-94239b6d6b42c9b5"}>woot</p>
-    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5 {color:red}"}</_JSXStyle>
+
+    <_JSXStyle id={"94239b6d6b42c9b5"}>{"p.jsx-94239b6d6b42c9b5{color:red}"}</_JSXStyle>
+
   </div>
-);
\ No newline at end of file
+);
diff --git a/packages/next-swc/crates/core/tests/full.rs b/packages/next-swc/crates/core/tests/full.rs
index 7eb773c3cf5fe02..71f4f8d4fa67103 100644
--- a/packages/next-swc/crates/core/tests/full.rs
+++ b/packages/next-swc/crates/core/tests/full.rs
@@ -42,7 +42,6 @@ fn test(input: &Path, minify: bool) {
                             },
                             syntax: Some(Syntax::Typescript(TsConfig {
                                 tsx: true,
-                                dynamic_import: true,
                                 ..Default::default()
                             })),
                             ..Default::default()
diff --git a/packages/next-swc/crates/core/tests/full/example/output.js b/packages/next-swc/crates/core/tests/full/example/output.js
index d03fc71ddddc339..9bf0ba8ff83a188 100644
--- a/packages/next-swc/crates/core/tests/full/example/output.js
+++ b/packages/next-swc/crates/core/tests/full/example/output.js
@@ -1,4 +1,9 @@
 import a from "other";
+function _arrayLikeToArray(a, b) {
+    (null == b || b > a.length) && (b = a.length);
+    for(var b = 0, d = new Array(b); b < b; b++)d[b] = a[b];
+    return d;
+}
 function _arrayWithHoles(a) {
     if (Array.isArray(a)) return a;
 }
@@ -6,25 +11,36 @@ function _classCallCheck(a, b) {
     if (!(a instanceof b)) throw new TypeError("Cannot call a class as a function");
 }
 function _iterableToArrayLimit(a, b) {
-    var c = [], d = !0, e = !1, f = void 0;
-    try {
-        for(var g, h = a[Symbol.iterator](); !(d = (g = h.next()).done) && (c.push(g.value), !b || c.length !== b); d = !0);
-    } catch (i) {
-        e = !0, f = i;
-    } finally{
+    var c, d, e = null == a ? null : "undefined" != typeof Symbol && a[Symbol.iterator] || a["@@iterator"];
+    if (null != e) {
+        var f = [], g = !0, h = !1;
         try {
-            d || null == h.return || h.return();
+            for(e = e.call(a); !(g = (c = e.next()).done) && (f.push(c.value), !b || f.length !== b); g = !0);
+        } catch (i) {
+            h = !0, d = i;
         } finally{
-            if (e) throw f;
+            try {
+                g || null == e.return || e.return();
+            } finally{
+                if (h) throw d;
+            }
         }
+        return f;
     }
-    return c;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(a, b) {
-    return _arrayWithHoles(a) || _iterableToArrayLimit(a, b) || _nonIterableRest();
+    return _arrayWithHoles(a) || _iterableToArrayLimit(a, b) || _unsupportedIterableToArray(a, b) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(a, b) {
+    if (a) {
+        if ("string" == typeof a) return _arrayLikeToArray(a, b);
+        var c = Object.prototype.toString.call(a).slice(8, -1);
+        if ("Object" === c && a.constructor && (c = a.constructor.name), "Map" === c || "Set" === c) return Array.from(c);
+        if ("Arguments" === c || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)) return _arrayLikeToArray(a, b);
+    }
 }
 var _other = _slicedToArray(a, 1), foo = _other[0], Foo = function() {
     "use strict";
diff --git a/packages/next-swc/crates/core/tests/loader/css-hygiene-1/output.js b/packages/next-swc/crates/core/tests/loader/css-hygiene-1/output.js
index f5e9e4f6864b174..ad93e37fb91f5b6 100644
--- a/packages/next-swc/crates/core/tests/loader/css-hygiene-1/output.js
+++ b/packages/next-swc/crates/core/tests/loader/css-hygiene-1/output.js
@@ -1,3 +1,3 @@
-var _defaultExport = new String("@media (max-width:870px) {th.expiration-date-cell, td.expiration-date-cell {display:none}}");
+var _defaultExport = new String("@media (max-width:870px) {th.expiration-date-cell, td.expiration-date-cell{display:none}}");
 _defaultExport.__hash = "fd71bf06ba8860bb";
 export default _defaultExport;
diff --git a/packages/next-swc/crates/core/tests/loader/example/output.js b/packages/next-swc/crates/core/tests/loader/example/output.js
index 818b3db8aba06e9..7bbcd606d5afaa2 100644
--- a/packages/next-swc/crates/core/tests/loader/example/output.js
+++ b/packages/next-swc/crates/core/tests/loader/example/output.js
@@ -1,4 +1,9 @@
 import other from 'other';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -8,12 +13,14 @@ function _classCallCheck(instance, Constructor) {
     }
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -30,10 +37,18 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 var _other = _slicedToArray(other, 1), foo = _other[0];
 var Foo = function Foo() {
diff --git a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
index 819b6808f24e844..c261b179c9e4c06 100644
--- a/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
+++ b/packages/next-swc/crates/core/tests/loader/front/attr-1/output.js
@@ -9,5 +9,5 @@ export default function Foo() {
         className: "jsx-eb368961fd3b0a99"
     }, React.createElement(_JSXStyle, {
         id: "eb368961fd3b0a99"
-    }, "span.jsx-eb368961fd3b0a99 {color:red}")));
+    }, "span.jsx-eb368961fd3b0a99{color:red}")));
 };
diff --git a/packages/next-swc/crates/napi/Cargo.toml b/packages/next-swc/crates/napi/Cargo.toml
index 4a68e599c874c6b..6423a1dd0cba30d 100644
--- a/packages/next-swc/crates/napi/Cargo.toml
+++ b/packages/next-swc/crates/napi/Cargo.toml
@@ -16,12 +16,12 @@ once_cell = "1.8.0"
 serde = "1"
 serde_json = "1"
 next-swc = { version = "0.0.0", path = "../core" }
-swc = "0.88.0"
+swc = "0.95.0"
 swc_atoms = "0.2.7"
-swc_bundler = { version = "0.82.0", features = ["concurrent"] }
-swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
-swc_ecma_loader = { version = "0.24.4", features = ["node", "lru"] }
-swc_ecmascript = { version = "0.88.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc_bundler = { version = "0.88.0", features = ["concurrent"] }
+swc_common = { version = "0.15.0", features = ["concurrent", "sourcemap"] }
+swc_ecma_loader = { version = "0.25.0", features = ["node", "lru"] }
+swc_ecmascript = { version = "0.95.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
 
 [build-dependencies]
diff --git a/packages/next-swc/crates/napi/src/bundle/mod.rs b/packages/next-swc/crates/napi/src/bundle/mod.rs
index 673ec0e8659b983..8c183480e453246 100644
--- a/packages/next-swc/crates/napi/src/bundle/mod.rs
+++ b/packages/next-swc/crates/napi/src/bundle/mod.rs
@@ -13,9 +13,7 @@ use swc::{
 };
 use swc_atoms::JsWord;
 use swc_bundler::{Bundler, ModuleData, ModuleRecord};
-use swc_common::{
-    collections::AHashMap, errors::Handler, BytePos, FileName, SourceMap, Span, DUMMY_SP,
-};
+use swc_common::{collections::AHashMap, errors::Handler, BytePos, FileName, SourceMap, Span};
 use swc_ecma_loader::{
     resolvers::{lru::CachingResolver, node::NodeModulesResolver},
     TargetEnv, NODE_BUILTINS,
@@ -23,7 +21,7 @@ use swc_ecma_loader::{
 use swc_ecmascript::{
     ast::*,
     parser::{lexer::Lexer, EsConfig, Parser, StringInput, Syntax},
-    visit::{noop_visit_type, Node, Visit, VisitWith},
+    visit::{noop_visit_type, Visit, VisitWith},
 };
 
 #[js_function(1)]
@@ -100,9 +98,7 @@ impl Task for BundleTask {
                     names: Default::default(),
                 };
 
-                output
-                    .module
-                    .visit_with(&Invalid { span: DUMMY_SP }, &mut v);
+                output.module.visit_with(&mut v);
 
                 v.names
             };
@@ -197,7 +193,7 @@ pub struct SourceMapIdentCollector {
 impl Visit for SourceMapIdentCollector {
     noop_visit_type!();
 
-    fn visit_ident(&mut self, ident: &Ident, _: &dyn Node) {
+    fn visit_ident(&mut self, ident: &Ident) {
         self.names.insert(ident.span.lo, ident.sym.clone());
     }
 }
diff --git a/packages/next-swc/crates/wasm/Cargo.toml b/packages/next-swc/crates/wasm/Cargo.toml
index ee4c4aa39820fa1..8068e839156fd38 100644
--- a/packages/next-swc/crates/wasm/Cargo.toml
+++ b/packages/next-swc/crates/wasm/Cargo.toml
@@ -16,9 +16,9 @@ path-clean = "0.1"
 serde = {version = "1", features = ["derive"]}
 serde_json = "1"
 next-swc = { version = "0.0.0", path = "../core" }
-swc = "0.88.0"
-swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
-swc_ecmascript = { version = "0.88.2", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
+swc = "0.95.0"
+swc_common = { version = "0.15.0", features = ["concurrent", "sourcemap"] }
+swc_ecmascript = { version = "0.95.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 wasm-bindgen = {version = "0.2", features = ["serde-serialize"]}
 wasm-bindgen-futures = "0.4.8"
diff --git a/test/integration/css-customization/test/index.test.js b/test/integration/css-customization/test/index.test.js
index 6d90eee87b78833..043e0cc744c36c9 100644
--- a/test/integration/css-customization/test/index.test.js
+++ b/test/integration/css-customization/test/index.test.js
@@ -170,7 +170,7 @@ describe('CSS Customization custom loader', () => {
       join(pagesFolder, indexFiles[0]),
       'utf8'
     )
-    expect(indexContent).toMatch(/\.my-text\.jsx-[0-9a-z]+ {color:red}/)
+    expect(indexContent).toMatch(/\.my-text\.jsx-[0-9a-z]+{color:red}/)
   })
 })