fix(styled-jsx): Pass useLightningcss option to styled-jsx correctly

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

@@ -117,6 +117,9 @@ pub struct TransformOptions {
 
     #[serde(default)]
     pub lint_codemod_comments: bool,
+
+    #[serde(default)]
+    pub css_env: Option<swc_core::ecma::preset_env::Config>,
 }
 
 pub fn custom_before_pass<'a, C>(
@@ -151,20 +154,21 @@ 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 = {
         let cm = cm.clone();
         let file = file.clone();
 
         fn_pass(move |program| {
             if let Some(config) = opts.styled_jsx.to_option() {
+                let target_browsers = opts
+                    .css_env
+                    .as_ref()
+                    .map(|env| {
+                        targets_to_versions(env.targets.clone())
+                            .expect("failed to parse env.targets")
+                    })
+                    .unwrap_or_default();
+
                 program.mutate(styled_jsx::visitor::styled_jsx(
                     cm.clone(),
                     &file.name,

crates/next-custom-transforms/tests/full.rs

@@ -81,6 +81,7 @@ fn test(input: &Path, minify: bool) {
                 optimize_server_react: None,
                 prefer_esm: false,
                 debug_function_name: false,
+                css_env: None,
             };
 
             let unresolved_mark = Mark::new();

packages/next/src/build/swc/options.ts

@@ -65,6 +65,7 @@ function getBaseSWCOptions({
   compilerOptions,
   resolvedBaseUrl,
   jsConfig,
+  supportedBrowsers,
   swcCacheDir,
   serverComponents,
   serverReferenceHashSalt,
@@ -84,6 +85,7 @@ function getBaseSWCOptions({
   swcPlugins: ExperimentalConfig['swcPlugins']
   resolvedBaseUrl?: ResolvedBaseUrl
   jsConfig: any
+  supportedBrowsers: string[] | undefined
   swcCacheDir?: string
   serverComponents?: boolean
   serverReferenceHashSalt: string
@@ -196,7 +198,9 @@ function getBaseSWCOptions({
       : undefined,
     relay: compilerOptions?.relay,
     // Always transform styled-jsx and error when `client-only` condition is triggered
-    styledJsx: {},
+    styledJsx: compilerOptions?.styledJsx ?? {
+      useLightningcss: jsConfig?.experimental?.useLightningcss ?? false,
+    },
     // Disable css-in-js libs (without client-only integration) transform on server layer for server components
     ...(!isReactServerLayer && {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -232,6 +236,14 @@ function getBaseSWCOptions({
     preferEsm: esm,
     lintCodemodComments: true,
     debugFunctionName: development,
+
+    ...(supportedBrowsers && supportedBrowsers.length > 0
+      ? {
+          cssEnv: {
+            targets: supportedBrowsers,
+          },
+        }
+      : {}),
   }
 }
 
@@ -319,6 +331,7 @@ export function getJestSWCOptions({
     compilerOptions,
     jsConfig,
     resolvedBaseUrl,
+    supportedBrowsers: undefined,
     esm,
     // Don't apply server layer transformations for Jest
     // Disable server / client graph assertions for Jest
@@ -408,6 +421,7 @@ export function getLoaderSWCOptions({
     compilerOptions,
     jsConfig,
     // resolvedBaseUrl,
+    supportedBrowsers,
     swcCacheDir,
     bundleLayer,
     serverComponents,