From d55699d5f77c8c7e60468ffa8fea4e81992292b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Mon, 11 Mar 2024 15:49:43 +0900 Subject: [PATCH] feat(turbopack): Enable `lightningcss` for turbopack by default (#62565) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Turbopack * https://github.com/vercel/turbo/pull/7682 * https://github.com/vercel/turbo/pull/7524 ### What? Enable lightningcss by default, for `--turbo` mode. ### Why? It's time to do it 😄 ### How? Turbopack counterpart: https://github.com/vercel/turbo/pull/7524 Closes PACK-2600 --- Cargo.lock | 70 +++++++++---------- Cargo.toml | 6 +- .../next-core/src/next_client/context.rs | 4 +- .../crates/next-core/src/next_config.rs | 12 ++-- .../next-core/src/next_server/context.rs | 8 +-- .../src/next_shared/transforms/styled_jsx.rs | 4 +- packages/next/package.json | 2 +- packages/next/src/server/config-schema.ts | 1 + packages/next/src/server/config-shared.ts | 7 +- pnpm-lock.yaml | 8 +-- .../acceptance-app/ReactRefreshLogBox.test.ts | 6 +- .../ReactRefreshLogBox.test.ts.snap | 11 ++- .../acceptance/ReactRefreshLogBox.test.ts | 10 +-- .../ReactRefreshLogBox.test.ts.snap | 25 +++++-- .../experimental-lightningcss.test.ts | 4 +- .../experimental-lightningcss/next.config.js | 3 + test/e2e/next-font/index.test.ts | 2 +- 17 files changed, 102 insertions(+), 81 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 06e4301f8a09c..95d96569f4351 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -321,7 +321,7 @@ dependencies = [ [[package]] name = "auto-hash-map" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "serde", "smallvec", @@ -3396,7 +3396,7 @@ dependencies = [ [[package]] name = "node-file-trace" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "serde", @@ -7373,7 +7373,7 @@ dependencies = [ [[package]] name = "turbo-tasks" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-trait", @@ -7405,7 +7405,7 @@ dependencies = [ [[package]] name = "turbo-tasks-build" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "cargo-lock", @@ -7417,7 +7417,7 @@ dependencies = [ [[package]] name = "turbo-tasks-bytes" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "bytes", @@ -7432,7 +7432,7 @@ dependencies = [ [[package]] name = "turbo-tasks-env" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "dotenvs", @@ -7446,7 +7446,7 @@ dependencies = [ [[package]] name = "turbo-tasks-fetch" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indexmap 1.9.3", @@ -7463,7 +7463,7 @@ dependencies = [ [[package]] name = "turbo-tasks-fs" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "auto-hash-map", @@ -7495,7 +7495,7 @@ dependencies = [ [[package]] name = "turbo-tasks-hash" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "base16", "hex", @@ -7507,7 +7507,7 @@ dependencies = [ [[package]] name = "turbo-tasks-macros" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "convert_case 0.6.0", @@ -7521,7 +7521,7 @@ dependencies = [ [[package]] name = "turbo-tasks-macros-shared" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "proc-macro2", "quote", @@ -7531,7 +7531,7 @@ dependencies = [ [[package]] name = "turbo-tasks-malloc" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "mimalloc", ] @@ -7539,7 +7539,7 @@ dependencies = [ [[package]] name = "turbo-tasks-memory" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "auto-hash-map", @@ -7564,7 +7564,7 @@ dependencies = [ [[package]] name = "turbopack" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-recursion", @@ -7597,7 +7597,7 @@ dependencies = [ [[package]] name = "turbopack-binding" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "auto-hash-map", "mdxjs", @@ -7637,7 +7637,7 @@ dependencies = [ [[package]] name = "turbopack-browser" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indexmap 1.9.3", @@ -7663,7 +7663,7 @@ dependencies = [ [[package]] name = "turbopack-cli-utils" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "clap 4.4.2", @@ -7682,7 +7682,7 @@ dependencies = [ [[package]] name = "turbopack-core" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-recursion", @@ -7713,7 +7713,7 @@ dependencies = [ [[package]] name = "turbopack-css" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-trait", @@ -7741,7 +7741,7 @@ dependencies = [ [[package]] name = "turbopack-dev-server" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-compression", @@ -7778,7 +7778,7 @@ dependencies = [ [[package]] name = "turbopack-ecmascript" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-trait", @@ -7816,7 +7816,7 @@ dependencies = [ [[package]] name = "turbopack-ecmascript-hmr-protocol" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "serde", "serde_json", @@ -7827,7 +7827,7 @@ dependencies = [ [[package]] name = "turbopack-ecmascript-plugins" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-trait", @@ -7852,7 +7852,7 @@ dependencies = [ [[package]] name = "turbopack-ecmascript-runtime" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indoc", @@ -7869,7 +7869,7 @@ dependencies = [ [[package]] name = "turbopack-env" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indexmap 1.9.3", @@ -7885,7 +7885,7 @@ dependencies = [ [[package]] name = "turbopack-image" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "base64 0.21.4", @@ -7905,7 +7905,7 @@ dependencies = [ [[package]] name = "turbopack-json" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "serde", @@ -7920,7 +7920,7 @@ dependencies = [ [[package]] name = "turbopack-mdx" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "mdxjs", @@ -7935,7 +7935,7 @@ dependencies = [ [[package]] name = "turbopack-node" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-stream", @@ -7973,7 +7973,7 @@ dependencies = [ [[package]] name = "turbopack-nodejs" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indexmap 1.9.3", @@ -7997,7 +7997,7 @@ dependencies = [ [[package]] name = "turbopack-resolve" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "async-recursion", @@ -8019,7 +8019,7 @@ dependencies = [ [[package]] name = "turbopack-static" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "serde", @@ -8035,7 +8035,7 @@ dependencies = [ [[package]] name = "turbopack-swc-utils" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "swc_core", "turbo-tasks", @@ -8046,7 +8046,7 @@ dependencies = [ [[package]] name = "turbopack-trace-utils" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "crossbeam-channel", @@ -8062,7 +8062,7 @@ dependencies = [ [[package]] name = "turbopack-wasm" version = "0.1.0" -source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240308.3#952d30a3f9638d86484f797c7b8ee8c67bd153ba" +source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240311.1#7d7eeecf97392df6439d84dfc379851f2f7af60a" dependencies = [ "anyhow", "indexmap 1.9.3", diff --git a/Cargo.toml b/Cargo.toml index 8c47268543204..d148bbab9f8d2 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -37,11 +37,11 @@ swc_core = { version = "0.90.17", features = [ testing = { version = "0.35.20" } # Turbo crates -turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240308.3" } +turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240311.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-240308.3" } +turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240311.1" } # [TODO]: need to refactor embed_directory! macro usage in next-core -turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240308.3" } +turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240311.1" } # General Deps diff --git a/packages/next-swc/crates/next-core/src/next_client/context.rs b/packages/next-swc/crates/next-core/src/next_client/context.rs index 25cc910a4c06f..8bd82c9d2f1b2 100644 --- a/packages/next-swc/crates/next-core/src/next_client/context.rs +++ b/packages/next-swc/crates/next-core/src/next_client/context.rs @@ -243,7 +243,7 @@ pub async fn get_client_module_options_context( .cell() }); - let use_lightningcss = *next_config.use_lightningcss().await?; + let use_swc_css = *next_config.use_swc_css().await?; let target_browsers = env.runtime_versions(); let mut next_client_rules = @@ -321,7 +321,7 @@ pub async fn get_client_module_options_context( ), ], custom_rules: next_client_rules, - use_lightningcss, + use_swc_css, ..module_options_context } .cell(); diff --git a/packages/next-swc/crates/next-core/src/next_config.rs b/packages/next-swc/crates/next-core/src/next_config.rs index 7c7c2b9f203fc..2350f1da1f0aa 100644 --- a/packages/next-swc/crates/next-core/src/next_config.rs +++ b/packages/next-swc/crates/next-core/src/next_config.rs @@ -390,6 +390,7 @@ pub struct ExperimentalTurboConfig { pub rules: Option>, pub resolve_alias: Option>, pub resolve_extensions: Option>, + pub use_swc_css: Option, } #[derive(Clone, Debug, PartialEq, Serialize, Deserialize, TraceRawVcs)] @@ -504,8 +505,6 @@ pub struct ExperimentalConfig { /// (doesn't apply to Turbopack). webpack_build_worker: Option, worker_threads: Option, - - use_lightningcss: Option, } #[derive(Clone, Debug, PartialEq, Serialize, Deserialize, TraceRawVcs)] @@ -836,9 +835,14 @@ impl NextConfig { } #[turbo_tasks::function] - pub async fn use_lightningcss(self: Vc) -> Result> { + pub async fn use_swc_css(self: Vc) -> Result> { Ok(Vc::cell( - self.await?.experimental.use_lightningcss.unwrap_or(false), + self.await? + .experimental + .turbo + .as_ref() + .and_then(|turbo| turbo.use_swc_css) + .unwrap_or(false), )) } } diff --git a/packages/next-swc/crates/next-core/src/next_server/context.rs b/packages/next-swc/crates/next-core/src/next_server/context.rs index f2460100a0903..3477ffaf512ce 100644 --- a/packages/next-swc/crates/next-core/src/next_server/context.rs +++ b/packages/next-swc/crates/next-core/src/next_server/context.rs @@ -363,7 +363,7 @@ pub async fn get_server_module_options_context( .cell() }); - let use_lightningcss = *next_config.use_lightningcss().await?; + let use_swc_css = *next_config.use_swc_css().await?; let versions = RuntimeVersions(Default::default()).cell(); // ModuleOptionsContext related options @@ -443,7 +443,7 @@ pub async fn get_server_module_options_context( let module_options_context = ModuleOptionsContext { execution_context: Some(execution_context), esm_url_rewrite_behavior: url_rewrite_behavior, - use_lightningcss, + use_swc_css, tree_shaking_mode: Some(TreeShakingMode::ReexportsOnly), import_externals: *next_config.import_externals().await?, ..Default::default() @@ -505,7 +505,7 @@ pub async fn get_server_module_options_context( let module_options_context = ModuleOptionsContext { execution_context: Some(execution_context), - use_lightningcss, + use_swc_css, tree_shaking_mode: Some(TreeShakingMode::ReexportsOnly), import_externals: *next_config.import_externals().await?, ..Default::default() @@ -581,7 +581,7 @@ pub async fn get_server_module_options_context( let module_options_context = ModuleOptionsContext { execution_context: Some(execution_context), - use_lightningcss, + use_swc_css, tree_shaking_mode: Some(TreeShakingMode::ReexportsOnly), import_externals: *next_config.import_externals().await?, ..Default::default() diff --git a/packages/next-swc/crates/next-core/src/next_shared/transforms/styled_jsx.rs b/packages/next-swc/crates/next-core/src/next_shared/transforms/styled_jsx.rs index e3917fd25fea5..65cef826beb61 100644 --- a/packages/next-swc/crates/next-core/src/next_shared/transforms/styled_jsx.rs +++ b/packages/next-swc/crates/next-core/src/next_shared/transforms/styled_jsx.rs @@ -15,10 +15,10 @@ pub async fn get_styled_jsx_transform_rule( target_browsers: Vc, ) -> Result> { let enable_mdx_rs = *next_config.mdx_rs().await?; - let use_lightningcss = *next_config.use_lightningcss().await?; + let use_swc_css = *next_config.use_swc_css().await?; let versions = *target_browsers.await?; - let transformer = StyledJsxTransformer::new(use_lightningcss, versions); + let transformer = StyledJsxTransformer::new(!use_swc_css, versions); Ok(Some(get_ecma_transform_rule( Box::new(transformer), enable_mdx_rs, diff --git a/packages/next/package.json b/packages/next/package.json index c351a928e03d5..d03ccce36bef0 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -192,7 +192,7 @@ "@types/ws": "8.2.0", "@vercel/ncc": "0.34.0", "@vercel/nft": "0.26.4", - "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240308.3", + "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240311.1", "acorn": "8.5.0", "amphtml-validator": "1.0.35", "anser": "1.4.9", diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts index 337091c9c55f5..c0be71a964bfd 100644 --- a/packages/next/src/server/config-schema.ts +++ b/packages/next/src/server/config-schema.ts @@ -345,6 +345,7 @@ export const configSchema: zod.ZodType = z.lazy(() => ) .optional(), resolveExtensions: z.array(z.string()).optional(), + useSwcCss: z.boolean().optional(), }) .optional(), optimizePackageImports: z.array(z.string()).optional(), diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts index 89822ef02e4ec..a8e43031d6bf0 100644 --- a/packages/next/src/server/config-shared.ts +++ b/packages/next/src/server/config-shared.ts @@ -132,6 +132,11 @@ export interface ExperimentalTurboOptions { * @see [Turbopack Loaders](https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders) */ rules?: Record + + /** + * Use swc_css instead of lightningcss for turbopakc + */ + useSwcCss?: boolean } export interface WebpackConfigContext { @@ -396,7 +401,7 @@ export interface ExperimentalConfig { useWasmBinary?: boolean /** - * Use lightningcss instead of swc_css + * Use lightningcss instead of postcss-loader */ useLightningcss?: boolean diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 988ac53196447..5531fe4bdf4f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1071,8 +1071,8 @@ importers: specifier: 0.26.4 version: 0.26.4 '@vercel/turbopack-ecmascript-runtime': - specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240308.3 - version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240308.3' + specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240311.1 + version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240311.1' acorn: specifier: 8.5.0 version: 8.5.0 @@ -25492,8 +25492,8 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} - '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240308.3': - resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240308.3} + '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240311.1': + resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240311.1} name: '@vercel/turbopack-ecmascript-runtime' version: 0.0.0 dependencies: diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts index 5c16e19c0cd15..36461f3e9efbd 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts @@ -357,7 +357,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { expect(await session.hasRedbox()).toBe(false) // Syntax error - await session.patch('index.module.css', `.button {`) + await session.patch('index.module.css', `.button`) expect(await session.hasRedbox()).toBe(true) const source = await session.getRedboxSource() expect(source).toMatch( @@ -365,9 +365,9 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { ) if (!IS_TURBOPACK) { expect(source).toMatch('Syntax error: ') - expect(source).toMatch('Unclosed block') + expect(source).toMatch('Unknown word') } - expect(source).toMatch('> 1 | .button {') + expect(source).toMatch('> 1 | .button') expect(source).toMatch(IS_TURBOPACK ? ' | ^' : ' | ^') // Checks for selectors that can't be prefixed. diff --git a/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap index 0640dcf2e0169..d764792b4b98e 100644 --- a/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap @@ -101,10 +101,10 @@ exports[`ReactRefreshLogBox app default should strip whitespace correctly with n `; exports[`ReactRefreshLogBox app turbo Can't resolve @import in CSS file 1`] = ` -"./app/styles2.css:1:9 +"./app/styles2.css:1:2 Module not found: Can't resolve './boom.css' > 1 | @import "./boom.css" - | ^^^^^^^^^^^^ + | ^ https://nextjs.org/docs/messages/module-not-found" `; @@ -149,12 +149,9 @@ exports[`ReactRefreshLogBox app turbo conversion to class component (1) 1`] = ` `; exports[`ReactRefreshLogBox app turbo css syntax errors 1`] = ` -"./index.module.css:1:1 +"./index.module.css Parsing css source code failed -> 1 | button {} - | ^^^^^^ - -Selector is not pure (pure selectors must contain at least one local class or id)" +Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))" `; exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 1`] = `"Error: end http://nextjs.org"`; diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts index 708e7a7969bf0..b92b4c32774b2 100644 --- a/test/development/acceptance/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox.test.ts @@ -342,7 +342,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { expect(await session.hasRedbox()).toBe(false) // Syntax error - await session.patch('index.module.css', `.button {`) + await session.patch('index.module.css', `.button`) expect(await session.hasRedbox()).toBe(true) const source = await session.getRedboxSource() expect(source).toMatch( @@ -352,13 +352,13 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ) if (!process.env.TURBOPACK) { expect(source).toMatch('Syntax error: ') - expect(source).toMatch('Unclosed block') + expect(source).toMatch('Unknown word') } if (process.env.TURBOPACK) { - expect(source).toMatch('> 1 | .button {') - expect(source).toMatch(' | ^') + expect(source).toMatch('> 1 | .button') + expect(source).toMatch(' | ') } else { - expect(source).toMatch('> 1 | .button {') + expect(source).toMatch('> 1 | .button') expect(source).toMatch(' | ^') } diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap index 43b2542b89b1c..438df511721e2 100644 --- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap +++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap @@ -70,17 +70,28 @@ exports[`ReactRefreshLogBox default should strip whitespace correctly with newli 11 | " `; -exports[`ReactRefreshLogBox turbo boundaries 1`] = `null`; +exports[`ReactRefreshLogBox turbo boundaries 1`] = ` +"FunctionDefault.js (1:51) @ FunctionDefault -exports[`ReactRefreshLogBox turbo conversion to class component (1) 1`] = `null`; +> 1 | export default function FunctionDefault() { throw new Error('no'); } + | ^" +`; + +exports[`ReactRefreshLogBox turbo conversion to class component (1) 1`] = ` +"Child.js (4:11) @ ClickCount.render + + 2 | export default class ClickCount extends Component { + 3 | render() { +> 4 | throw new Error() + | ^ + 5 | } + 6 | }" +`; exports[`ReactRefreshLogBox turbo css syntax errors 1`] = ` -"./index.module.css:1:1 +"./index.module.css Parsing css source code failed -> 1 | button {} - | ^^^^^^ - -Selector is not pure (pure selectors must contain at least one local class or id)" +Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))" `; exports[`ReactRefreshLogBox turbo logbox: anchors links in error messages 1`] = `"Error: end http://nextjs.org"`; diff --git a/test/development/app-dir/experimental-lightningcss/experimental-lightningcss.test.ts b/test/development/app-dir/experimental-lightningcss/experimental-lightningcss.test.ts index e398faca0901e..b339220457350 100644 --- a/test/development/app-dir/experimental-lightningcss/experimental-lightningcss.test.ts +++ b/test/development/app-dir/experimental-lightningcss/experimental-lightningcss.test.ts @@ -12,7 +12,7 @@ describeVariants.each(['turbo'])('experimental-lightningcss', () => { expect($('p').text()).toBe('hello world') // swc_css does not include `-module` in the class name, while lightningcss does. expect($('p').attr('class')).toBe( - 'search-keyword style-module__hlQ3RG__blue' + 'search-keyword blue__style-module__hlQ3RG' ) }) }) @@ -34,7 +34,7 @@ describeVariants.each(['default'])( // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API. const $ = await next.render$('/') expect($('p').text()).toBe('hello world') - // We remove hash frmo the class name in test mode using env var because it is not deterministic. + // We remove hash from the class name in test mode using env var because it is not deterministic. expect($('p').attr('class')).toBe('search-keyword style-module__blue') }) diff --git a/test/development/app-dir/experimental-lightningcss/next.config.js b/test/development/app-dir/experimental-lightningcss/next.config.js index 89e3729811429..7d92acfafea12 100644 --- a/test/development/app-dir/experimental-lightningcss/next.config.js +++ b/test/development/app-dir/experimental-lightningcss/next.config.js @@ -4,6 +4,9 @@ const nextConfig = { experimental: { useLightningcss: true, + turbo: { + useSwcCss: false, + }, }, } diff --git a/test/e2e/next-font/index.test.ts b/test/e2e/next-font/index.test.ts index afb47b4392edd..64445e0d537a8 100644 --- a/test/e2e/next-font/index.test.ts +++ b/test/e2e/next-font/index.test.ts @@ -12,7 +12,7 @@ const mockedGoogleFontResponses = require.resolve( function getClassNameRegex(className: string): RegExp { // Turbopack uses a different format for its css modules than webpack-based Next.js return shouldRunTurboDevTest() - ? new RegExp(`^${className}__.*__.{8}$`) // e.g. `className__inter_c6e282f1__a8cc5613` + ? new RegExp(`^${className}__.*__.{6}$`) // e.g. `className__nabla_abb2401d-module__ks7jmG` : new RegExp(`^__${className}_.{6}$`) // e.g. `__className_a8cc56` }