Turbopack Build: Implement browserslist for CSS / JS

Cargo.toml

@@ -362,6 +362,7 @@ lightningcss = { version = "1.0.0-alpha.66", features = [
   "serde",
   "visitor",
   "into_owned",
+  "browserslist"
 ] }
 lightningcss-napi = { version = "0.4.4", default-features = false, features = [
   "visitor",
@@ -434,4 +435,6 @@ vergen-gitcl = { version = "1.0.8", features = [
 webbrowser = "0.8.7"
 
 [patch.crates-io]
+lightningcss = { git = "https://github.com/timneutkens/lightningcss", branch = "add/browserslist-options"}
+parcel_selectors = { git = "https://github.com/timneutkens/lightningcss", branch = "add/browserslist-options"}
 mdxjs = { git = "https://github.com/kdy1/mdxjs-rs.git", branch = "swc-core-29" }

crates/next-api/benches/hmr.rs

@@ -1,6 +1,7 @@
 extern crate turbo_tasks_malloc;
 
 use std::{
+    env,
     fs::{create_dir_all, write},
     mem::forget,
     path::{Path, PathBuf},
@@ -183,7 +184,10 @@ impl HmrBenchmark {
                 project_path: RcStr::from(project_path.clone()),
                 next_config: load_next_config(),
                 js_config: RcStr::from("{}"),
-                env: vec![],
+                env: vec![(
+                    RcStr::from("PATH"),
+                    RcStr::from(env::var("PATH").unwrap_or_default()),
+                )],
                 define_env: DefineEnv {
                     client: vec![],
                     edge: vec![],

crates/next-api/src/app.rs

@@ -242,6 +242,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -255,6 +256,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 
@@ -268,6 +270,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -281,6 +284,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 
@@ -592,6 +596,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -605,6 +610,7 @@ impl AppProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 

crates/next-api/src/pages.rs

@@ -450,6 +450,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -465,6 +466,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 
@@ -480,6 +482,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -495,6 +498,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 
@@ -510,6 +514,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::NodeJs,
             self.project().encryption_key(),
+            self.project().server_compile_time_info().environment(),
         ))
     }
 
@@ -527,6 +532,7 @@ impl PagesProject {
             self.project().next_config(),
             NextRuntime::Edge,
             self.project().encryption_key(),
+            self.project().edge_compile_time_info().environment(),
         ))
     }
 

crates/next-api/src/project.rs

@@ -986,6 +986,7 @@ impl Project {
         Ok(get_edge_compile_time_info(
             self.project_path(),
             this.define_env.edge(),
+            self.env(),
         ))
     }
 
@@ -1306,6 +1307,7 @@ impl Project {
                 self.next_config(),
                 NextRuntime::Edge,
                 self.encryption_key(),
+                self.edge_compile_time_info().environment(),
             ),
             get_edge_resolve_options_context(
                 self.project_path(),
@@ -1361,6 +1363,7 @@ impl Project {
                 self.next_config(),
                 NextRuntime::NodeJs,
                 self.encryption_key(),
+                self.server_compile_time_info().environment(),
             ),
             get_server_resolve_options_context(
                 self.project_path(),
@@ -1473,6 +1476,7 @@ impl Project {
                 self.next_config(),
                 NextRuntime::NodeJs,
                 self.encryption_key(),
+                self.server_compile_time_info().environment(),
             ),
             get_server_resolve_options_context(
                 self.project_path(),
@@ -1528,6 +1532,7 @@ impl Project {
                 self.next_config(),
                 NextRuntime::Edge,
                 self.encryption_key(),
+                self.edge_compile_time_info().environment(),
             ),
             get_edge_resolve_options_context(
                 self.project_path(),

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

@@ -342,7 +342,7 @@ pub async fn get_client_module_options_context(
             source_maps,
             ..Default::default()
         },
-        preset_env_versions: Some(env),
+        environment: Some(env),
         execution_context: Some(execution_context),
         tree_shaking_mode: tree_shaking_mode_for_user_code,
         enable_postcss_transform,

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

@@ -1,7 +1,7 @@
 use anyhow::Result;
 use turbo_rcstr::{RcStr, rcstr};
 use turbo_tasks::{FxIndexMap, OptionVcExt, ResolvedVc, Vc};
-use turbo_tasks_env::EnvMap;
+use turbo_tasks_env::{EnvMap, ProcessEnv};
 use turbo_tasks_fs::FileSystemPath;
 use turbopack::{css::chunk::CssChunkType, resolve_options_context::ResolveOptionsContext};
 use turbopack_browser::BrowserChunkingContext;
@@ -14,7 +14,7 @@ use turbopack_core::{
         CompileTimeDefineValue, CompileTimeDefines, CompileTimeInfo, DefineableNameSegment,
         FreeVarReference, FreeVarReferences,
     },
-    environment::{EdgeWorkerEnvironment, Environment, ExecutionEnvironment},
+    environment::{EdgeWorkerEnvironment, Environment, ExecutionEnvironment, NodeJsVersion},
     free_var_references,
 };
 use turbopack_ecmascript::chunk::EcmascriptChunkType;
@@ -83,10 +83,16 @@ async fn next_edge_free_vars(
 pub async fn get_edge_compile_time_info(
     project_path: Vc<FileSystemPath>,
     define_env: Vc<EnvMap>,
+    process_env: Vc<Box<dyn ProcessEnv>>,
 ) -> Result<Vc<CompileTimeInfo>> {
     CompileTimeInfo::builder(
         Environment::new(ExecutionEnvironment::EdgeWorker(
-            EdgeWorkerEnvironment {}.resolved_cell(),
+            EdgeWorkerEnvironment {
+                node_version: NodeJsVersion::resolved_cell(NodeJsVersion::Current(
+                    process_env.to_resolved().await?,
+                )),
+            }
+            .resolved_cell(),
         ))
         .to_resolved()
         .await?,

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

@@ -414,6 +414,7 @@ pub async fn get_server_module_options_context(
     next_config: Vc<NextConfig>,
     next_runtime: NextRuntime,
     encryption_key: ResolvedVc<RcStr>,
+    environment: ResolvedVc<Environment>,
 ) -> Result<Vc<ModuleOptionsContext>> {
     let next_mode = mode.await?;
     let mut next_server_rules = get_next_server_transforms_rules(
@@ -553,6 +554,7 @@ pub async fn get_server_module_options_context(
             ..Default::default()
         },
         execution_context: Some(execution_context),
+        environment: Some(environment),
         css: CssOptionsContext {
             source_maps,
             ..Default::default()

packages/next/src/build/swc/generated-native.d.ts

@@ -28,7 +28,7 @@ export function lightningCssTransformStyleAttribute(
 
 /* auto-generated by NAPI-RS */
 
-export class ExternalObject<T> {
+export declare class ExternalObject<T> {
   readonly '': {
     readonly '': unique symbol
     [K: symbol]: T

packages/next/src/build/turbopack-build/impl.ts

@@ -21,6 +21,7 @@ import { Telemetry } from '../../telemetry/storage'
 import { setGlobal } from '../../trace'
 import { isCI } from '../../server/ci-info'
 import { backgroundLogCompilationEvents } from '../../shared/lib/turbopack/compilation-events'
+import { getSupportedBrowsers } from '../utils'
 
 export async function turbopackBuild(): Promise<{
   duration: number
@@ -47,10 +48,7 @@ export async function turbopackBuild(): Promise<{
   const bindings = await loadBindings(config?.experimental?.useWasmBinary)
   const dev = false
 
-  // const supportedBrowsers = await getSupportedBrowsers(dir, dev)
-  const supportedBrowsers = [
-    'last 1 Chrome versions, last 1 Firefox versions, last 1 Safari versions, last 1 Edge versions',
-  ]
+  const supportedBrowsers = await getSupportedBrowsers(dir, dev)
 
   const persistentCaching = isPersistentCachingEnabled(config)
   const project = await bindings.turbo.createProject(

test/development/basic/next-rs-api.test.ts

@@ -197,7 +197,9 @@ describe('next.rs api', () => {
       '.next'
     )
     project = await bindings.turbo.createProject({
-      env: {},
+      env: {
+        PATH: process.env.PATH,
+      },
       jsConfig: {
         compilerOptions: {},
       },

test/e2e/next-font/index.test.ts

@@ -310,21 +310,21 @@ describe('next/font', () => {
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-classname")).fontFamily'
         )
-      ).toMatch(/^"Open Sans", system-ui, Arial$/)
+      ).toMatch(/^"Open Sans", .*system-ui.*, Arial$/)
 
       // .style
       expect(
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-style")).fontFamily'
         )
-      ).toMatch(/^"Open Sans", system-ui, Arial$/)
+      ).toMatch(/^"Open Sans", .*system-ui.*, Arial$/)
 
       // .variable
       expect(
         await browser.eval(
           'getComputedStyle(document.querySelector("#with-fallback-fonts-variable")).fontFamily'
         )
-      ).toMatch(/^"Open Sans", system-ui, Arial$/)
+      ).toMatch(/^"Open Sans", .*system-ui.*, Arial$/)
     })
   })
 

test/integration/css-features/test/browserslist.test.js

@@ -54,9 +54,15 @@ describe('Browserslist: Old', () => {
           .replace(/\/\*.*?\*\/\n?/g, '')
           .trim()
 
-        expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
-          `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
-        )
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        } else {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        }
       })
     }
   )
@@ -102,9 +108,15 @@ describe('Browserslist: New', () => {
           .replace(/\/\*.*?\*\/\n?/g, '')
           .trim()
 
-        expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
-          `"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
-        )
+        if (process.env.IS_TURBOPACK_TEST) {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (resolution>=2x){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        } else {
+          expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
+            `"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
+          )
+        }
       })
     }
   )

test/integration/css-modules/test/index.test.js

@@ -137,7 +137,7 @@ describe('3rd Party CSS Module Support', () => {
           expect(
             cssContent.replace(/\/\*.*?\*\//g, '').trim()
           ).toMatchInlineSnapshot(
-            `".index-module__jAE1EW__foo{position:relative}.index-module__jAE1EW__foo .bar,.index-module__jAE1EW__foo .baz{height:100%;overflow:hidden}.index-module__jAE1EW__foo .lol{width:80%}.index-module__jAE1EW__foo>.lel{width:80%}"`
+            `".index-module__jAE1EW__foo{position:relative}.index-module__jAE1EW__foo .bar{height:100%;overflow:hidden}.index-module__jAE1EW__foo .baz{height:100%;overflow:hidden}.index-module__jAE1EW__foo .lol{width:80%}.index-module__jAE1EW__foo>.lel{width:80%}"`
           )
         } else {
           expect(