Update swc_core to v0.87.28 (#60876)

# Turbopack

* vercel/turborepo#7027 <!-- Donny/강동윤 - Update `swc_core` to `v0.87.28` -->

---

### What?

Update swc crates

### Why?

Required for #57718.
`styled-jsx` crate now has a hook to transform CSS code using a
Rust-side API

### How?

Fixes #57718



Closes PACK-2256

Cargo.toml

@@ -30,18 +30,18 @@ next-core = { path = "packages/next-swc/crates/next-core" }
 next-custom-transforms = { path = "packages/next-swc/crates/next-custom-transforms" }
 
 # SWC crates
-swc_core = { version = "0.87.16", features = [
+swc_core = { version = "0.87.28", features = [
   "ecma_loader_lru",
   "ecma_loader_parking_lot",
 ] }
 testing = { version = "0.35.14" }
 
 # Turbo crates
-turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240123.3" }
+turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240124.1" }
 # [TODO]: need to refactor embed_directory! macro usages, as well as resolving turbo_tasks::function, macros..
-turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240123.3" }
+turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240124.1" }
 # [TODO]: need to refactor embed_directory! macro usage in next-core
-turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240123.3" }
+turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240124.1" }
 
 # General Deps
 
@@ -92,10 +92,16 @@ indoc = "2.0.0"
 itertools = "0.10.5"
 lazy_static = "1.4.0"
 log = "0.4.17"
+lightningcss = { version = "1.0.0-alpha.50", features = [
+  "serde",
+  "visitor",
+  "into_owned",
+] }
 mime = "0.3.16"
 nohash-hasher = "0.2.0"
 once_cell = "1.17.1"
 owo-colors = "3.5.0"
+parcel_selectors = "0.26.0"
 parking_lot = "0.12.1"
 pathdiff = "0.2.1"
 pin-project-lite = "0.2.9"

packages/next-swc/crates/next-core/src/next_client/context.rs

@@ -242,13 +242,14 @@ pub async fn get_client_module_options_context(
     });
 
     let use_lightningcss = *next_config.use_lightningcss().await?;
+    let target_browsers = env.runtime_versions();
 
     let source_transforms = vec![
         *get_swc_ecma_transform_plugin(project_path, next_config).await?,
         *get_relay_transform_plugin(next_config).await?,
         *get_emotion_transform_plugin(next_config).await?,
         *get_styled_components_transform_plugin(next_config).await?,
-        *get_styled_jsx_transform_plugin(use_lightningcss).await?,
+        *get_styled_jsx_transform_plugin(use_lightningcss, target_browsers).await?,
     ]
     .into_iter()
     .flatten()

packages/next-swc/crates/next-core/src/next_server/context.rs

@@ -13,7 +13,9 @@ use turbopack_binding::{
             compile_time_info::{
                 CompileTimeDefineValue, CompileTimeDefines, CompileTimeInfo, FreeVarReferences,
             },
-            environment::{Environment, ExecutionEnvironment, NodeJsEnvironment, ServerAddr},
+            environment::{
+                Environment, ExecutionEnvironment, NodeJsEnvironment, RuntimeVersions, ServerAddr,
+            },
             free_var_references,
             resolve::{parse::Request, pattern::Pattern},
         },
@@ -330,11 +332,13 @@ pub async fn get_server_module_options_context(
     });
 
     let use_lightningcss = *next_config.use_lightningcss().await?;
+    let versions = RuntimeVersions(Default::default()).cell();
 
     // EcmascriptTransformPlugins for custom transforms
     let styled_components_transform_plugin =
         *get_styled_components_transform_plugin(next_config).await?;
-    let styled_jsx_transform_plugin = *get_styled_jsx_transform_plugin(use_lightningcss).await?;
+    let styled_jsx_transform_plugin =
+        *get_styled_jsx_transform_plugin(use_lightningcss, versions).await?;
 
     // ModuleOptionsContext related options
     let tsconfig = get_typescript_transform_options(project_path);

packages/next-swc/crates/next-core/src/next_shared/transforms/styled_jsx.rs

@@ -1,16 +1,19 @@
 use anyhow::Result;
 use turbo_tasks::Vc;
 use turbopack_binding::turbopack::{
-    ecmascript::OptionTransformPlugin,
+    core::environment::RuntimeVersions, ecmascript::OptionTransformPlugin,
     ecmascript_plugin::transform::styled_jsx::StyledJsxTransformer,
 };
 
 /// Returns a transform plugin for the relay graphql transform.
 #[turbo_tasks::function]
 pub async fn get_styled_jsx_transform_plugin(
     use_lightningcss: bool,
+    target_browsers: Vc<RuntimeVersions>,
 ) -> Result<Vc<OptionTransformPlugin>> {
+    let versions = *target_browsers.await?;
+
     Ok(Vc::cell(Some(Vc::cell(
-        Box::new(StyledJsxTransformer::new(use_lightningcss)) as _,
+        Box::new(StyledJsxTransformer::new(use_lightningcss, versions)) as _,
     ))))
 }

packages/next-swc/crates/next-custom-transforms/Cargo.toml

@@ -26,6 +26,8 @@ serde_json = { workspace = true, features = ["preserve_order"] }
 sha1 = "0.10.1"
 tracing = { version = "0.1.37" }
 anyhow = { workspace = true }
+lazy_static = { workspace = true }
+lightningcss = {workspace = true}
 
 turbopack-binding = { workspace = true, features = [
   "__swc_core",
@@ -38,8 +40,9 @@ turbopack-binding = { workspace = true, features = [
 ] }
 # To allow quote! macro works
 swc_core = { workspace = true, features = ["ecma_quote"]}
-react_remove_properties = "0.19.0"
-remove_console = "0.20.0"
+react_remove_properties = "0.22.0"
+remove_console = "0.23.0"
+preset_env_base = "0.4.10"
 
 [dev-dependencies]
 turbopack-binding = { workspace = true, features = [

packages/next-swc/crates/next-custom-transforms/src/chain_transforms.rs

@@ -1,7 +1,10 @@
 use std::{cell::RefCell, path::PathBuf, rc::Rc, sync::Arc};
 
+use anyhow::bail;
 use either::Either;
 use fxhash::FxHashSet;
+use lightningcss::targets::Browsers;
+use preset_env_base::query::targets_to_versions;
 use serde::Deserialize;
 use swc_core::ecma::visit::as_folder;
 use turbopack_binding::swc::{
@@ -13,7 +16,11 @@ use turbopack_binding::swc::{
             FileName, Mark, SourceFile, SourceMap, SyntaxContext,
         },
         ecma::{
-            ast::EsVersion, parser::parse_file_as_module, transforms::base::pass::noop, visit::Fold,
+            ast::EsVersion,
+            parser::parse_file_as_module,
+            preset_env::{Version, Versions},
+            transforms::base::pass::noop,
+            visit::Fold,
         },
     },
     custom_transform::modularize_imports,
@@ -146,6 +153,63 @@ where
         },
     };
 
+    let target_browsers = opts
+        .swc
+        .config
+        .env
+        .as_ref()
+        .map(|env| targets_to_versions(env.targets.clone()).expect("failed to parse env.targets"))
+        .unwrap_or_default();
+
+    let styled_jsx = if let Some(config) = opts.styled_jsx {
+        Either::Left(
+            turbopack_binding::swc::custom_transform::styled_jsx::visitor::styled_jsx(
+                cm.clone(),
+                file.name.clone(),
+                turbopack_binding::swc::custom_transform::styled_jsx::visitor::Config {
+                    use_lightningcss: config.use_lightningcss,
+                    browsers: target_browsers,
+                },
+                turbopack_binding::swc::custom_transform::styled_jsx::visitor::NativeConfig {
+                    process_css: if config.use_lightningcss || target_browsers.is_any_target() {
+                        None
+                    } else {
+                        let targets = lightningcss::targets::Targets {
+                            browsers: Some(convert_browsers_to_lightningcss(&target_browsers)),
+                            ..Default::default()
+                        };
+
+                        Some(Box::new(move |css| {
+                            let ss = lightningcss::stylesheet::StyleSheet::parse(
+                                css,
+                                Default::default(),
+                            );
+
+                            let ss = match ss {
+                                Ok(v) => v,
+                                Err(err) => {
+                                    bail!("failed to parse css: {}", err)
+                                }
+                            };
+
+                            let output = ss.to_css(lightningcss::stylesheet::PrinterOptions {
+                                minify: true,
+                                source_map: None,
+                                project_root: None,
+                                targets,
+                                analyze_dependencies: None,
+                                pseudo_classes: None,
+                            })?;
+                            Ok(output.code)
+                        }))
+                    },
+                },
+            ),
+        )
+    } else {
+        Either::Right(noop())
+    };
+
     chain!(
         crate::transforms::disallow_re_export_all_in_page::disallow_re_export_all_in_page(opts.is_page_file),
         match &opts.server_components {
@@ -158,17 +222,7 @@ where
                 )),
             _ => Either::Right(noop()),
         },
-        if let Some(config) = opts.styled_jsx {
-            Either::Left(
-                turbopack_binding::swc::custom_transform::styled_jsx::visitor::styled_jsx(
-                    cm.clone(),
-                    file.name.clone(),
-                    config,
-                ),
-            )
-        } else {
-            Either::Right(noop())
-        },
+        styled_jsx,
         match &opts.styled_components {
             Some(config) => Either::Left(
                 turbopack_binding::swc::custom_transform::styled_components::styled_components(
@@ -308,3 +362,21 @@ impl TransformOptions {
         self
     }
 }
+
+fn convert_browsers_to_lightningcss(browsers: &Versions) -> Browsers {
+    fn convert(v: Option<Version>) -> Option<u32> {
+        v.map(|v| v.major << 16 | v.minor << 8 | v.patch)
+    }
+
+    Browsers {
+        android: convert(browsers.android),
+        chrome: convert(browsers.chrome),
+        edge: convert(browsers.edge),
+        firefox: convert(browsers.firefox),
+        ie: convert(browsers.ie),
+        ios_saf: convert(browsers.ios),
+        opera: convert(browsers.opera),
+        safari: convert(browsers.safari),
+        samsung: convert(browsers.samsung),
+    }
+}

packages/next/package.json

@@ -194,7 +194,7 @@
     "@types/ws": "8.2.0",
     "@vercel/ncc": "0.34.0",
     "@vercel/nft": "0.26.2",
-    "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240123.3",
+    "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240124.1",
     "acorn": "8.5.0",
     "amphtml-validator": "1.0.35",
     "anser": "1.4.9",

test/development/pages-dir/client-navigation/rendering.ts

@@ -226,15 +226,19 @@ export default function (next: NextInstance, render, fetch, ctx) {
       const styleId = $('#blue-box').attr('class')
       const style = $('style')
 
-      expect(style.text().includes(`p.${styleId}{color:blue`)).toBeTruthy()
+      expect(style.text()).toMatch(
+        new RegExp(`p.${styleId}{color:(?:blue|#00f)`)
+      )
     })
 
     test('renders styled jsx external', async () => {
       const $ = await get$('/styled-jsx-external')
       const styleId = $('#blue-box').attr('class')
       const style = $('style')
 
-      expect(style.text().includes(`p.${styleId}{color:blue`)).toBeTruthy()
+      expect(style.text()).toMatch(
+        new RegExp(`p.${styleId}{color:(?:blue|#00f)`)
+      )
     })
 
     test('renders properties populated asynchronously', async () => {

test/e2e/app-dir/rsc-basic/rsc-basic.test.ts

@@ -340,10 +340,10 @@ createNextDescribe(
 
       // from styled-jsx
       expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
-      expect(head).toMatch(/{color:(\s*)hotpink;?}/) // styled-jsx/css
+      expect(head).toMatch(/{color:(\s*)(?:hotpink|#ff69b4);?}/) // styled-jsx/css
 
       // from styled-components
-      expect(head).toMatch(/{color:(\s*)blue;?}/)
+      expect(head).toMatch(/{color:(\s*)(?:blue|#00f);?}/)
     })
 
     it('should render initial styles of css-in-js in edge SSR correctly', async () => {
@@ -352,10 +352,10 @@ createNextDescribe(
 
       // from styled-jsx
       expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
-      expect(head).toMatch(/{color:(\s*)hotpink;?}/) // styled-jsx/css
+      expect(head).toMatch(/{color:(\s*)(?:hotpink|#ff69b4);?}/) // styled-jsx/css
 
       // from styled-components
-      expect(head).toMatch(/{color:(\s*)blue;?}/)
+      expect(head).toMatch(/{color:(\s*)(?:blue|#00f);?}/)
     })
 
     it('should render css-in-js suspense boundary correctly', async () => {

test/e2e/streaming-ssr/index.test.ts

@@ -27,7 +27,7 @@ createNextDescribe(
 
     it('should render styled-jsx styles in streaming', async () => {
       const html = await renderViaHTTP(next.url, '/')
-      expect(html).toContain('color:blue')
+      expect(html).toMatch(/color:(?:blue|#00f)/)
     })
 
     it('should redirect paths without trailing-slash and render when slash is appended', async () => {

test/integration/amphtml/test/index.test.js

@@ -230,7 +230,7 @@ describe('AMP Usage', () => {
         const html = await renderViaHTTP(appPort, '/styled?amp=1')
         const $ = cheerio.load(html)
         expect($('style[amp-custom]').first().text()).toMatch(
-          /div.jsx-[a-zA-Z0-9]{1,}{color:red}span.jsx-[a-zA-Z0-9]{1,}{color:blue}body{background-color:green}/
+          /div.jsx-[a-zA-Z0-9]{1,}{color:red}span.jsx-[a-zA-Z0-9]{1,}{color:(?:blue|#00f)}body{background-color:green}/
         )
       })
 

test/integration/react-18/test/concurrent.js

@@ -21,13 +21,13 @@ export default (context, _render) => {
       context.appPort,
       '/use-flush-effect/styled-jsx'
     )
-    const stylesOccurrence = html.match(/color:(\s)*blue/g) || []
+    const stylesOccurrence = html.match(/color:(\s)*(?:blue|#00f)/g) || []
     expect(stylesOccurrence.length).toBe(1)
 
     await withBrowser('/use-flush-effect/styled-jsx', async (browser) => {
       await check(
         () => browser.waitForElementByCss('#__jsx-900f996af369fc74').text(),
-        /blue/
+        /(?:blue|#00f)/
       )
       await check(
         () => browser.waitForElementByCss('#__jsx-8b0811664c4e575e').text(),