Turbopack: remove css_environment from Environment (#83487)

Change the fix from #83334 to not have a "CSS environment" inside of every environment. I don't think that this makes sense, and it also makes the implementation more complicated.
```diff
  pub struct Environment {
    execution: ExecutionEnvironment,
+   css_environment: ResolvedVc<BrowserEnvironment>,
  }
```

Instead, we can just pass the client's `Environment` when we create the server's transform rules, to use the client's browserslist config for styled-jsx.

#83334 was also missing a test case

I recommend the review each commits individually.

Author: mischnic

crates/next-api/src/app.rs

@@ -218,6 +218,7 @@ impl AppProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -232,6 +233,7 @@ impl AppProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -246,6 +248,7 @@ impl AppProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -260,6 +263,7 @@ impl AppProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -582,6 +586,7 @@ impl AppProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -596,6 +601,7 @@ impl AppProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 

crates/next-api/src/pages.rs

@@ -460,6 +460,7 @@ impl PagesProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -476,6 +477,7 @@ impl PagesProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -492,6 +494,7 @@ impl PagesProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -508,6 +511,7 @@ impl PagesProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -524,6 +528,7 @@ impl PagesProject {
             NextRuntime::NodeJs,
             self.project().encryption_key(),
             self.project().server_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 
@@ -542,6 +547,7 @@ impl PagesProject {
             NextRuntime::Edge,
             self.project().encryption_key(),
             self.project().edge_compile_time_info().environment(),
+            self.project().client_compile_time_info().environment(),
         ))
     }
 

crates/next-api/src/project.rs

@@ -984,7 +984,6 @@ impl Project {
             format!("/ROOT/{}", self.project_path().await?.path).into(),
             this.define_env.nodejs(),
             self.current_node_js_version(),
-            this.browserslist_query.clone(),
         ))
     }
 
@@ -995,7 +994,6 @@ impl Project {
             self.project_path().owned().await?,
             this.define_env.edge(),
             self.current_node_js_version(),
-            this.browserslist_query.clone(),
         ))
     }
 
@@ -1296,6 +1294,7 @@ impl Project {
                 NextRuntime::Edge,
                 self.encryption_key(),
                 self.edge_compile_time_info().environment(),
+                self.client_compile_time_info().environment(),
             ),
             get_edge_resolve_options_context(
                 self.project_path().owned().await?,
@@ -1358,6 +1357,7 @@ impl Project {
                 NextRuntime::NodeJs,
                 self.encryption_key(),
                 self.server_compile_time_info().environment(),
+                self.client_compile_time_info().environment(),
             ),
             get_server_resolve_options_context(
                 self.project_path().owned().await?,
@@ -1472,6 +1472,7 @@ impl Project {
                 NextRuntime::NodeJs,
                 self.encryption_key(),
                 self.server_compile_time_info().environment(),
+                self.client_compile_time_info().environment(),
             ),
             get_server_resolve_options_context(
                 self.project_path().owned().await?,
@@ -1534,6 +1535,7 @@ impl Project {
                 NextRuntime::Edge,
                 self.encryption_key(),
                 self.edge_compile_time_info().environment(),
+                self.client_compile_time_info().environment(),
             ),
             get_edge_resolve_options_context(
                 self.project_path().owned().await?,

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

@@ -98,18 +98,18 @@ pub async fn get_client_compile_time_info(
     browserslist_query: RcStr,
     define_env: Vc<OptionEnvMap>,
 ) -> Result<Vc<CompileTimeInfo>> {
-    let environment = BrowserEnvironment {
-        dom: true,
-        web_worker: false,
-        service_worker: false,
-        browserslist_query: browserslist_query.to_owned(),
-    }
-    .resolved_cell();
-
     CompileTimeInfo::builder(
-        Environment::new(ExecutionEnvironment::Browser(environment), *environment)
-            .to_resolved()
-            .await?,
+        Environment::new(ExecutionEnvironment::Browser(
+            BrowserEnvironment {
+                dom: true,
+                web_worker: false,
+                service_worker: false,
+                browserslist_query: browserslist_query.to_owned(),
+            }
+            .resolved_cell(),
+        ))
+        .to_resolved()
+        .await?,
     )
     .defines(next_client_defines(define_env).to_resolved().await?)
     .free_var_references(next_client_free_vars(define_env).to_resolved().await?)
@@ -274,7 +274,7 @@ pub async fn get_client_module_options_context(
     let tree_shaking_mode_for_foreign_code = *next_config
         .tree_shaking_mode_for_foreign_code(next_mode.is_development())
         .await?;
-    let css_target_browsers = env.css_runtime_versions();
+    let target_browsers = env.runtime_versions();
 
     let mut next_client_rules =
         get_next_client_transforms_rules(next_config, ty.clone(), mode, false, encryption_key)
@@ -287,7 +287,7 @@ pub async fn get_client_module_options_context(
         get_relay_transform_rule(next_config, project_path.clone()).await?,
         get_emotion_transform_rule(next_config).await?,
         get_styled_components_transform_rule(next_config).await?,
-        get_styled_jsx_transform_rule(next_config, css_target_browsers).await?,
+        get_styled_jsx_transform_rule(next_config, target_browsers).await?,
         get_react_remove_properties_transform_rule(next_config).await?,
         get_remove_console_transform_rule(next_config).await?,
     ]

crates/next-core/src/next_edge/context.rs

@@ -11,9 +11,7 @@ use turbopack_core::{
         module_id_strategies::ModuleIdStrategy,
     },
     compile_time_info::{CompileTimeDefines, CompileTimeInfo, FreeVarReference, FreeVarReferences},
-    environment::{
-        BrowserEnvironment, EdgeWorkerEnvironment, Environment, ExecutionEnvironment, NodeJsVersion,
-    },
+    environment::{EdgeWorkerEnvironment, Environment, ExecutionEnvironment, NodeJsVersion},
     free_var_references,
     module_graph::export_usage::OptionExportUsageInfo,
 };
@@ -62,23 +60,11 @@ pub async fn get_edge_compile_time_info(
     project_path: FileSystemPath,
     define_env: Vc<OptionEnvMap>,
     node_version: ResolvedVc<NodeJsVersion>,
-    css_browserslist_query: RcStr,
 ) -> Result<Vc<CompileTimeInfo>> {
-    let css_environment = BrowserEnvironment {
-        dom: false,
-        web_worker: false,
-        service_worker: false,
-        browserslist_query: css_browserslist_query,
-    }
-    .resolved_cell();
-
     CompileTimeInfo::builder(
-        Environment::new(
-            ExecutionEnvironment::EdgeWorker(
-                EdgeWorkerEnvironment { node_version }.resolved_cell(),
-            ),
-            *css_environment,
-        )
+        Environment::new(ExecutionEnvironment::EdgeWorker(
+            EdgeWorkerEnvironment { node_version }.resolved_cell(),
+        ))
         .to_resolved()
         .await?,
     )

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

@@ -21,9 +21,7 @@ use turbopack_core::{
     },
     compile_time_defines,
     compile_time_info::{CompileTimeDefines, CompileTimeInfo, FreeVarReferences},
-    environment::{
-        BrowserEnvironment, Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion,
-    },
+    environment::{Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion},
     free_var_references,
     module_graph::export_usage::OptionExportUsageInfo,
     target::CompileTarget,
@@ -371,28 +369,16 @@ pub async fn get_server_compile_time_info(
     cwd: RcStr,
     define_env: Vc<OptionEnvMap>,
     node_version: ResolvedVc<NodeJsVersion>,
-    css_browserslist_query: RcStr,
 ) -> Result<Vc<CompileTimeInfo>> {
-    let css_environment = BrowserEnvironment {
-        dom: false,
-        web_worker: false,
-        service_worker: false,
-        browserslist_query: css_browserslist_query,
-    }
-    .resolved_cell();
-
     CompileTimeInfo::builder(
-        Environment::new(
-            ExecutionEnvironment::NodeJsLambda(
-                NodeJsEnvironment {
-                    compile_target: CompileTarget::current().to_resolved().await?,
-                    node_version,
-                    cwd: ResolvedVc::cell(Some(cwd)),
-                }
-                .resolved_cell(),
-            ),
-            *css_environment,
-        )
+        Environment::new(ExecutionEnvironment::NodeJsLambda(
+            NodeJsEnvironment {
+                compile_target: CompileTarget::current().to_resolved().await?,
+                node_version,
+                cwd: ResolvedVc::cell(Some(cwd)),
+            }
+            .resolved_cell(),
+        ))
         .to_resolved()
         .await?,
     )
@@ -405,10 +391,9 @@ pub async fn get_server_compile_time_info(
 #[turbo_tasks::function]
 pub async fn get_tracing_compile_time_info() -> Result<Vc<CompileTimeInfo>> {
     CompileTimeInfo::builder(
-        Environment::new(
-            ExecutionEnvironment::NodeJsLambda(NodeJsEnvironment::default().resolved_cell()),
-            BrowserEnvironment::default().cell(),
-        )
+        Environment::new(ExecutionEnvironment::NodeJsLambda(
+            NodeJsEnvironment::default().resolved_cell(),
+        ))
         .to_resolved()
         .await?,
     )
@@ -456,6 +441,7 @@ pub async fn get_server_module_options_context(
     next_runtime: NextRuntime,
     encryption_key: ResolvedVc<RcStr>,
     environment: ResolvedVc<Environment>,
+    client_environment: ResolvedVc<Environment>,
 ) -> Result<Vc<ModuleOptionsContext>> {
     let next_mode = mode.await?;
     let mut next_server_rules = get_next_server_transforms_rules(
@@ -525,7 +511,6 @@ pub async fn get_server_module_options_context(
     let tree_shaking_mode_for_foreign_code = *next_config
         .tree_shaking_mode_for_foreign_code(next_mode.is_development())
         .await?;
-    let css_versions = environment.css_runtime_versions();
 
     let tsconfig_path = next_config
         .typescript_tsconfig_path()
@@ -586,8 +571,10 @@ pub async fn get_server_module_options_context(
     // context type.
     let styled_components_transform_rule =
         get_styled_components_transform_rule(next_config).await?;
+    // It's important the client's browserlist config is used for styled-jsx, otherwise we transpile
+    // the CSS to be compatible with Node.js 20.
     let styled_jsx_transform_rule =
-        get_styled_jsx_transform_rule(next_config, css_versions).await?;
+        get_styled_jsx_transform_rule(next_config, client_environment.runtime_versions()).await?;
 
     let source_maps = if *next_config.server_source_maps().await? {
         SourceMapsType::Full

test/integration/css-fixtures/compilation-and-prefixing/pages/index.js

@@ -1,3 +1,27 @@
 export default function Home() {
-  return <div className="red-text">This text should be red.</div>
+  return (
+    <>
+      <div className="red-text">This text should be red.</div>
+      <StyledJsxTest />
+    </>
+  )
+}
+
+function StyledJsxTest() {
+  return (
+    <>
+      <div className="media-query-test">This text should be blue.</div>
+      <style jsx>{`
+        .media-query-test {
+          color: blue;
+        }
+
+        @media (max-width: 400px) {
+          .media-query-test {
+            color: orange;
+          }
+        }
+      `}</style>
+    </>
+  )
 }

test/integration/css/test/css-compilation.test.js

@@ -219,6 +219,32 @@ module.exports = {
                   }
                 `)
               }
+
+              const inlineStyle = $('style')
+              expect(inlineStyle.length).toBe(1)
+              const inlineCssContent = inlineStyle
+                .html()
+                .replace(
+                  /media-query-test.jsx-[a-f0-9]{16}/g,
+                  'media-query-test.jsx-HASH'
+                )
+              if (process.env.IS_TURBOPACK_TEST && useLightningcss) {
+                expect(inlineCssContent).toMatchInlineSnapshot(
+                  `".media-query-test.jsx-HASH{color:#00f}@media (max-width:400px){.media-query-test.jsx-HASH{color:orange}}"`
+                )
+              } else if (process.env.IS_TURBOPACK_TEST && !useLightningcss) {
+                expect(inlineCssContent).toMatchInlineSnapshot(
+                  `".media-query-test.jsx-HASH{color:#00f}@media (max-width:400px){.media-query-test.jsx-HASH{color:orange}}"`
+                )
+              } else if (useLightningcss) {
+                expect(inlineCssContent).toMatchInlineSnapshot(
+                  `".media-query-test.jsx-HASH{color:blue}@media(max-width:400px){.media-query-test.jsx-HASH{color:orange}}"`
+                )
+              } else {
+                expect(inlineCssContent).toMatchInlineSnapshot(
+                  `".media-query-test.jsx-HASH{color:blue}@media(max-width:400px){.media-query-test.jsx-HASH{color:orange}}"`
+                )
+              }
             })
           }
         )