next-swc: Add displayNameAndId of styled-components (#31189)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`




Related to: #30802

package.json

@@ -149,6 +149,7 @@
     "seedrandom": "3.0.5",
     "selenium-webdriver": "4.0.0-beta.4",
     "shell-quote": "1.7.3",
+    "styled-components": "5.3.3",
     "styled-jsx-plugin-postcss": "3.0.2",
     "tailwindcss": "1.1.3",
     "taskr": "1.1.0",

packages/next/build/swc/Cargo.toml

@@ -11,6 +11,7 @@ anyhow = "1.0"
 backtrace = "0.3"
 chrono = "0.4"
 easy-error = "1.0.0"
+either = "1"
 fxhash = "0.2.1"
 napi = {version = "1", features = ["serde-json"]}
 napi-derive = "1"
@@ -22,14 +23,15 @@ retain_mut = "0.1.3"
 rustc-hash = "1.1.0"
 serde = "1"
 serde_json = "1"
-swc = "0.81.1"
+styled_components = "0.1.0"
+swc = "0.83.1"
 swc_atoms = "0.2.7"
-swc_bundler = {version = "0.79.0", features = ["concurrent"]}
+swc_bundler = { version = "0.80.0", features = ["concurrent"] }
 swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
 swc_css = "0.20.0"
-swc_ecma_loader = {version = "0.23.0", features = ["node", "lru"]}
-swc_ecma_preset_env = "0.63.1"
-swc_ecmascript = {version = "0.84.1", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"]}
+swc_ecma_loader = { version = "0.24.0", features = ["node", "lru"] }
+swc_ecma_preset_env = "0.64.0"
+swc_ecmascript = { version = "0.85.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
 swc_node_base = "0.5.1"
 swc_stylis = "0.17.0"
 tracing = {version = "0.1.28", features = ["release_max_level_off"]}
@@ -38,7 +40,7 @@ tracing = {version = "0.1.28", features = ["release_max_level_off"]}
 napi-build = "1"
 
 [dev-dependencies]
-swc_ecma_transforms_testing = "0.43.1"
+swc_ecma_transforms_testing = "0.44.0"
 testing = "0.15.1"
 walkdir = "2.3.2"
 

packages/next/build/swc/options.js

@@ -6,6 +6,7 @@ function getBaseSWCOptions({
   development,
   hasReactRefresh,
   globalWindow,
+  styledComponents,
 }) {
   const isTSFile = filename.endsWith('.ts')
   const isTypeScript = isTSFile || filename.endsWith('.tsx')
@@ -42,6 +43,10 @@ function getBaseSWCOptions({
         },
       },
     },
+    styledComponents: {
+      displayName: styledComponents,
+      ssr: styledComponents,
+    },
   }
 }
 
@@ -78,12 +83,14 @@ export function getLoaderSWCOptions({
   pagesDir,
   isPageFile,
   hasReactRefresh,
+  styledComponents,
 }) {
   let baseOptions = getBaseSWCOptions({
     filename,
     development,
     globalWindow: !isServer,
     hasReactRefresh,
+    styledComponents,
   })
 
   const isNextDist = nextDistPath.test(filename)