Turbopack: sass support (#62717)
### What? * upgrades turbopack for `getResolve` in webpack loaders * add missing resolve-url-loader to turbopack for full sass support Closes PACK-2634
This commit is contained in:
parent
e9862a80f8
commit
92eecbfdff
270 changed files with 1693 additions and 2026 deletions
72
Cargo.lock
generated
72
Cargo.lock
generated
|
@ -321,7 +321,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "auto-hash-map"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
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-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"serde",
|
||||
|
@ -7374,7 +7374,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-trait",
|
||||
|
@ -7406,7 +7406,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-build"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"cargo-lock",
|
||||
|
@ -7418,7 +7418,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-bytes"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"bytes",
|
||||
|
@ -7433,7 +7433,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-env"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"dotenvs",
|
||||
|
@ -7447,7 +7447,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-fetch"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"indexmap 1.9.3",
|
||||
|
@ -7464,7 +7464,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-fs"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"auto-hash-map",
|
||||
|
@ -7496,7 +7496,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-hash"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"base16",
|
||||
"hex",
|
||||
|
@ -7508,7 +7508,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-macros"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"convert_case 0.6.0",
|
||||
|
@ -7522,7 +7522,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-macros-shared"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
|
@ -7532,7 +7532,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-malloc"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"mimalloc",
|
||||
]
|
||||
|
@ -7540,7 +7540,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbo-tasks-memory"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"auto-hash-map",
|
||||
|
@ -7565,7 +7565,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-recursion",
|
||||
|
@ -7598,7 +7598,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-binding"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"auto-hash-map",
|
||||
"mdxjs",
|
||||
|
@ -7638,7 +7638,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-build"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
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-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
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-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
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-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-trait",
|
||||
|
@ -7741,7 +7741,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-dev"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"indexmap 1.9.3",
|
||||
|
@ -7767,7 +7767,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-dev-server"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-compression",
|
||||
|
@ -7804,7 +7804,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-ecmascript"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-trait",
|
||||
|
@ -7841,7 +7841,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-ecmascript-hmr-protocol"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"serde",
|
||||
"serde_json",
|
||||
|
@ -7852,7 +7852,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-ecmascript-plugins"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-trait",
|
||||
|
@ -7877,7 +7877,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-ecmascript-runtime"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"indoc",
|
||||
|
@ -7894,7 +7894,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-env"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"indexmap 1.9.3",
|
||||
|
@ -7910,7 +7910,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-image"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"base64 0.21.4",
|
||||
|
@ -7930,7 +7930,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-json"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"serde",
|
||||
|
@ -7945,7 +7945,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-mdx"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"mdxjs",
|
||||
|
@ -7960,10 +7960,11 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-node"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-stream",
|
||||
"async-trait",
|
||||
"bytes",
|
||||
"const_format",
|
||||
"futures",
|
||||
|
@ -7989,6 +7990,7 @@ dependencies = [
|
|||
"turbopack-core",
|
||||
"turbopack-dev-server",
|
||||
"turbopack-ecmascript",
|
||||
"turbopack-resolve",
|
||||
"url",
|
||||
"urlencoding",
|
||||
]
|
||||
|
@ -7996,7 +7998,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-resolve"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"async-recursion",
|
||||
|
@ -8018,7 +8020,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-static"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"serde",
|
||||
|
@ -8034,7 +8036,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-swc-utils"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"swc_core",
|
||||
"turbo-tasks",
|
||||
|
@ -8045,7 +8047,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-trace-utils"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"crossbeam-channel",
|
||||
|
@ -8061,7 +8063,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "turbopack-wasm"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.1#b61c98e970cc7a39fbaf439997cc156afad17b08"
|
||||
source = "git+https://github.com/vercel/turbo.git?tag=turbopack-240304.2#42c4de5adeff568e9c372cdf553ecb5867b1a6a7"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"indexmap 1.9.3",
|
||||
|
|
|
@ -37,11 +37,11 @@ swc_core = { version = "0.90.12", features = [
|
|||
testing = { version = "0.35.19" }
|
||||
|
||||
# Turbo crates
|
||||
turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240304.1" }
|
||||
turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240304.2" }
|
||||
# [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-240304.1" }
|
||||
turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240304.2" }
|
||||
# [TODO]: need to refactor embed_directory! macro usage in next-core
|
||||
turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240304.1" }
|
||||
turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-240304.2" }
|
||||
|
||||
# General Deps
|
||||
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
use std::mem::take;
|
||||
|
||||
use anyhow::{bail, Result};
|
||||
use serde_json::Value as JsonValue;
|
||||
use turbo_tasks::Vc;
|
||||
|
@ -32,17 +34,28 @@ pub async fn maybe_add_sass_loader(
|
|||
.get("prependData")
|
||||
.or(sass_options.get("additionalData"));
|
||||
let rule = rules.get_mut(pattern);
|
||||
let loader = WebpackLoaderItem {
|
||||
let sass_loader = WebpackLoaderItem {
|
||||
loader: "next/dist/compiled/sass-loader".to_string(),
|
||||
options: serde_json::json!({
|
||||
//https://github.com/vercel/turbo/blob/d527eb54be384a4658243304cecd547d09c05c6b/crates/turbopack-node/src/transforms/webpack.rs#L191
|
||||
"sourceMap": false,
|
||||
"sassOptions": sass_options,
|
||||
"additionalData": additional_data
|
||||
})
|
||||
.as_object()
|
||||
.unwrap()
|
||||
.clone(),
|
||||
options: take(
|
||||
serde_json::json!({
|
||||
"sourceMap": true,
|
||||
"sassOptions": sass_options,
|
||||
"additionalData": additional_data
|
||||
})
|
||||
.as_object_mut()
|
||||
.unwrap(),
|
||||
),
|
||||
};
|
||||
let resolve_url_loader = WebpackLoaderItem {
|
||||
loader: "next/dist/build/webpack/loaders/resolve-url-loader/index".to_string(),
|
||||
options: take(
|
||||
serde_json::json!({
|
||||
//https://github.com/vercel/turbo/blob/d527eb54be384a4658243304cecd547d09c05c6b/crates/turbopack-node/src/transforms/webpack.rs#L191
|
||||
"sourceMap": false
|
||||
})
|
||||
.as_object_mut()
|
||||
.unwrap(),
|
||||
),
|
||||
};
|
||||
|
||||
if let Some(rule) = rule {
|
||||
|
@ -57,13 +70,14 @@ pub async fn maybe_add_sass_loader(
|
|||
continue;
|
||||
}
|
||||
let mut loaders = rule.loaders.await?.clone_value();
|
||||
loaders.push(loader);
|
||||
loaders.push(resolve_url_loader);
|
||||
loaders.push(sass_loader);
|
||||
rule.loaders = Vc::cell(loaders);
|
||||
} else {
|
||||
rules.insert(
|
||||
pattern.to_string(),
|
||||
LoaderRuleItem {
|
||||
loaders: Vc::cell(vec![loader]),
|
||||
loaders: Vc::cell(vec![resolve_url_loader, sass_loader]),
|
||||
rename_as: Some(format!("*{rename}")),
|
||||
},
|
||||
);
|
||||
|
|
|
@ -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-240304.1",
|
||||
"@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.2",
|
||||
"acorn": "8.5.0",
|
||||
"amphtml-validator": "1.0.35",
|
||||
"anser": "1.4.9",
|
||||
|
|
|
@ -56,7 +56,9 @@ export default async function resolveUrlLoader(
|
|||
}
|
||||
|
||||
const callback = this.async()
|
||||
const { postcss } = await options.postcss()
|
||||
const { postcss } = options.postcss
|
||||
? await options.postcss()
|
||||
: { postcss: require('postcss') }
|
||||
process(postcss, this.resourcePath, content, {
|
||||
outputSourceMap: Boolean(options.sourceMap),
|
||||
transformDeclaration: valueProcessor(this.resourcePath, options),
|
||||
|
|
|
@ -35,9 +35,11 @@ export default function process(
|
|||
) {
|
||||
// #107 libsass emits orphan CR not considered newline, postcss does consider newline (content vs source-map mismatch)
|
||||
|
||||
postcssPlugin.postcss = true
|
||||
|
||||
// prepend file protocol to all sources to avoid problems with source map
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
return postcss([postcss.plugin('postcss-resolve-url', postcssPlugin)])
|
||||
return postcss([postcssPlugin])
|
||||
.process(sourceContent, {
|
||||
from: prepend(sourceFile),
|
||||
map: params.outputSourceMap && {
|
||||
|
@ -56,9 +58,12 @@ export default function process(
|
|||
* Plugin for postcss that follows SASS transpilation.
|
||||
*/
|
||||
function postcssPlugin() {
|
||||
return function (styles: any) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
styles.walkDecls(eachDeclaration)
|
||||
return {
|
||||
postcssPlugin: 'postcss-resolve-url',
|
||||
Once: function (root: any) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
root.walkDecls(eachDeclaration)
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1074,8 +1074,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-240304.1
|
||||
version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.1'
|
||||
specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.2
|
||||
version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.2'
|
||||
acorn:
|
||||
specifier: 8.5.0
|
||||
version: 8.5.0
|
||||
|
@ -25728,8 +25728,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-240304.1':
|
||||
resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.1}
|
||||
'@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.2':
|
||||
resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-240304.2}
|
||||
name: '@vercel/turbopack-ecmascript-runtime'
|
||||
version: 0.0.0
|
||||
dependencies:
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('3rd Party CSS Module Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
// Bar
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-div .bar')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
|
||||
// Baz
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-div .baz')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
|
||||
// Lol
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-div .lol')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('red'))
|
||||
|
||||
// Lel
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-div .lel')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('green'))
|
||||
})
|
||||
})
|
12
test/e2e/app-dir/scss/3rd-party-module/pages/index.js
Normal file
12
test/e2e/app-dir/scss/3rd-party-module/pages/index.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import { foo } from './index.module.scss'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div id="verify-div" className={foo}>
|
||||
<div className="bar">Bar</div>
|
||||
<div className="baz">Baz</div>
|
||||
<div className="lol">Lol</div>
|
||||
<div className="lel">Lel</div>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -4,14 +4,13 @@
|
|||
|
||||
.foo :global(.bar),
|
||||
.foo :global(.baz) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.foo :global(.lol) {
|
||||
width: 80%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.foo > :global(.lel) {
|
||||
width: 80%;
|
||||
background-color: green;
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Basic Module Additional Data Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
sassOptions: {
|
||||
additionalData: `
|
||||
$var: red;
|
||||
`,
|
||||
},
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Basic Module Include Paths Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Basic Module Prepend Data Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -1,4 +1,3 @@
|
|||
$var: red;
|
||||
.redText {
|
||||
color: $var;
|
||||
}
|
20
test/e2e/app-dir/scss/basic-module/basic-module.test.ts
Normal file
20
test/e2e/app-dir/scss/basic-module/basic-module.test.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Basic SCSS Module Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Catch-all Route CSS Module Usage', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/post')
|
||||
expect(
|
||||
await browser.elementByCss('#my-div').getComputedCss('background-color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,3 @@
|
|||
.home {
|
||||
background: red;
|
||||
}
|
|
@ -1,28 +1,22 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { readdir, readFile, remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { readdir, readFile } from 'fs-extra'
|
||||
import { join } from 'path'
|
||||
|
||||
describe('SCSS Support', () => {
|
||||
;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
|
||||
const { next, isNextDev } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
// TODO: Figure out this test for dev and Turbopack
|
||||
;(isNextDev ? describe.skip : describe)('Production only', () => {
|
||||
describe('CSS Compilation and Prefixing', () => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should compile successfully', async () => {
|
||||
const { code, stdout } = await nextBuild(appDir, [], {
|
||||
stdout: true,
|
||||
})
|
||||
expect(code).toBe(0)
|
||||
expect(stdout).toMatch(/Compiled successfully/)
|
||||
})
|
||||
|
||||
it(`should've compiled and prefixed`, async () => {
|
||||
const cssFolder = join(appDir, '.next/static/css')
|
||||
const cssFolder = join(next.testDir, '.next/static/css')
|
||||
|
||||
const files = await readdir(cssFolder)
|
||||
const cssFiles = files.filter((f) => /\.css$/.test(f))
|
||||
|
@ -36,11 +30,12 @@ describe('SCSS Support', () => {
|
|||
)
|
||||
|
||||
// Contains a source map
|
||||
console.log({ cssContent })
|
||||
expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
|
||||
})
|
||||
|
||||
it(`should've emitted a source map`, async () => {
|
||||
const cssFolder = join(appDir, '.next/static/css')
|
||||
const cssFolder = join(next.testDir, '.next/static/css')
|
||||
|
||||
const files = await readdir(cssFolder)
|
||||
const cssMapFiles = files.filter((f) => /\.css\.map$/.test(f))
|
||||
|
@ -52,24 +47,24 @@ describe('SCSS Support', () => {
|
|||
|
||||
const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
|
||||
expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
|
||||
{
|
||||
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
||||
"sourcesContent": [
|
||||
"$var: red;
|
||||
.redText {
|
||||
::placeholder {
|
||||
color: $var;
|
||||
{
|
||||
"mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
|
||||
"sourcesContent": [
|
||||
"$var: red;
|
||||
.redText {
|
||||
::placeholder {
|
||||
color: $var;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-parsing {
|
||||
flex: 0 0 calc(50% - var(--vertical-gutter));
|
||||
}
|
||||
",
|
||||
],
|
||||
"version": 3,
|
||||
}
|
||||
`)
|
||||
|
||||
.flex-parsing {
|
||||
flex: 0 0 calc(50% - var(--vertical-gutter));
|
||||
}
|
||||
",
|
||||
],
|
||||
"version": 3,
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
})
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
productionBrowserSourceMaps: true,
|
||||
}
|
25
test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts
Normal file
25
test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('CSS Module Composes Usage (Basic)', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-yellow').getComputedCss('color')
|
||||
).toBe(colorToRgb('yellow'))
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-yellow')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,25 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('CSS Module Composes Usage (External)', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-yellow').getComputedCss('color')
|
||||
).toBe(colorToRgb('yellow'))
|
||||
expect(
|
||||
await browser
|
||||
.elementByCss('#verify-yellow')
|
||||
.getComputedCss('background-color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,5 @@
|
|||
$var: blue;
|
||||
.subClass {
|
||||
composes: className from './other.module.scss';
|
||||
background: $var;
|
||||
}
|
22
test/e2e/app-dir/scss/data-url/data-url.test.ts
Normal file
22
test/e2e/app-dir/scss/data-url/data-url.test.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('SCSS Support loader handling Data Urls', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
const redText = await browser.elementByCss('.red-text')
|
||||
expect(await redText.getComputedCss('color')).toBe(colorToRgb('red'))
|
||||
expect(await redText.getComputedCss('background-image')).toMatch(
|
||||
/url\("data:[^"]+"\)$/
|
||||
)
|
||||
})
|
||||
})
|
20
test/e2e/app-dir/scss/dev-module/dev-module.test.ts
Normal file
20
test/e2e/app-dir/scss/dev-module/dev-module.test.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Has CSS Module in computed styles in Development', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should have CSS for page', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,24 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Dynamic Route CSS Module Usage', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
|
||||
it('should apply styles correctly', async () => {
|
||||
const browser = await next.browser('/post-1')
|
||||
|
||||
const background = await browser
|
||||
.elementByCss('#my-div')
|
||||
.getComputedCss('background-color')
|
||||
|
||||
expect(background).toMatch(colorToRgb('red'))
|
||||
})
|
||||
})
|
||||
})
|
|
@ -0,0 +1,3 @@
|
|||
.home {
|
||||
background: red;
|
||||
}
|
25
test/e2e/app-dir/scss/external-url/external-url.test.ts
Normal file
25
test/e2e/app-dir/scss/external-url/external-url.test.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
|
||||
describe('SCSS Support loader handling External imports', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
it(`should include font on the page`, async () => {
|
||||
const browser = await next.browser('/')
|
||||
const result = await browser.eval(async function () {
|
||||
return document.fonts.ready.then((fonts) => {
|
||||
const includedFonts = []
|
||||
for (const font of fonts.values()) {
|
||||
includedFonts.push(font.family)
|
||||
}
|
||||
return includedFonts
|
||||
})
|
||||
})
|
||||
expect(result).toInclude('Poppins')
|
||||
})
|
||||
})
|
43
test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts
Normal file
43
test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts
Normal file
|
@ -0,0 +1,43 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb, retry } from 'next-test-utils'
|
||||
|
||||
describe('Can hot reload CSS Module without losing state', () => {
|
||||
const { next, isNextDev } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
;(isNextDev ? describe : describe.skip)('development only', () => {
|
||||
it('should update CSS color without remounting <input>', async () => {
|
||||
const browser = await next.browser('/')
|
||||
|
||||
const desiredText = 'hello world'
|
||||
await browser.elementById('text-input').type(desiredText)
|
||||
expect(await browser.elementById('text-input').getValue()).toBe(
|
||||
desiredText
|
||||
)
|
||||
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
|
||||
await next.patchFile('pages/index.module.scss', (content) => {
|
||||
return content.replace('$var: red', '$var: purple')
|
||||
})
|
||||
|
||||
await retry(async () => {
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('purple'))
|
||||
})
|
||||
|
||||
// ensure text remained
|
||||
expect(await browser.elementById('text-input').getValue()).toBe(
|
||||
desiredText
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
|
@ -0,0 +1,35 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { join } from 'path'
|
||||
// In order for the global isNextStart to be set
|
||||
import 'e2e-utils'
|
||||
|
||||
describe.skip('Invalid CSS Global Module Usage in node_modules', () => {
|
||||
;(Boolean((global as any).isNextStart) ? describe : describe.skip)(
|
||||
'production only',
|
||||
() => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should fail to build', async () => {
|
||||
const { code, stderr } = await nextBuild(appDir, [], {
|
||||
stderr: true,
|
||||
})
|
||||
expect(code).not.toBe(0)
|
||||
expect(stderr).toContain('Failed to compile')
|
||||
expect(stderr).toContain('node_modules/example/index.scss')
|
||||
expect(stderr).toMatch(
|
||||
/Global CSS.*cannot.*be imported from within.*node_modules/
|
||||
)
|
||||
expect(stderr).toMatch(
|
||||
/Location:.*node_modules[\\/]example[\\/]index\.mjs/
|
||||
)
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
|
@ -0,0 +1,33 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { join } from 'path'
|
||||
// In order for the global isNextStart to be set
|
||||
import 'e2e-utils'
|
||||
|
||||
describe('Invalid Global CSS with Custom App', () => {
|
||||
;(Boolean((global as any).isNextStart) ? describe : describe.skip)(
|
||||
'production only',
|
||||
() => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should fail to build', async () => {
|
||||
const { code, stderr } = await nextBuild(appDir, [], {
|
||||
stderr: true,
|
||||
})
|
||||
expect(code).not.toBe(0)
|
||||
expect(stderr).toContain('Failed to compile')
|
||||
expect(stderr).toContain('styles/global.scss')
|
||||
expect(stderr).toMatch(
|
||||
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
|
||||
)
|
||||
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
33
test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts
Normal file
33
test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts
Normal file
|
@ -0,0 +1,33 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { join } from 'path'
|
||||
// In order for the global isNextStart to be set
|
||||
import 'e2e-utils'
|
||||
|
||||
describe('Invalid Global CSS', () => {
|
||||
;(Boolean((global as any).isNextStart) ? describe : describe.skip)(
|
||||
'production only',
|
||||
() => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should fail to build', async () => {
|
||||
const { code, stderr } = await nextBuild(appDir, [], {
|
||||
stderr: true,
|
||||
})
|
||||
expect(code).not.toBe(0)
|
||||
expect(stderr).toContain('Failed to compile')
|
||||
expect(stderr).toContain('styles/global.scss')
|
||||
expect(stderr).toMatch(
|
||||
/Please move all first-party global CSS imports.*?pages(\/|\\)_app/
|
||||
)
|
||||
expect(stderr).toMatch(/Location:.*pages[\\/]index\.js/)
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
|
@ -0,0 +1,33 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { join } from 'path'
|
||||
// In order for the global isNextStart to be set
|
||||
import 'e2e-utils'
|
||||
|
||||
describe('Invalid SCSS in _document', () => {
|
||||
;(Boolean((global as any).isNextStart) ? describe : describe.skip)(
|
||||
'production only',
|
||||
() => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should fail to build', async () => {
|
||||
const { code, stderr } = await nextBuild(appDir, [], {
|
||||
stderr: true,
|
||||
})
|
||||
expect(code).not.toBe(0)
|
||||
expect(stderr).toContain('Failed to compile')
|
||||
expect(stderr).toContain('styles.module.scss')
|
||||
expect(stderr).toMatch(
|
||||
/CSS.*cannot.*be imported within.*pages[\\/]_document\.js/
|
||||
)
|
||||
expect(stderr).toMatch(/Location:.*pages[\\/]_document\.js/)
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
35
test/e2e/app-dir/scss/invalid-module/invalid-module.test.ts
Normal file
35
test/e2e/app-dir/scss/invalid-module/invalid-module.test.ts
Normal file
|
@ -0,0 +1,35 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { remove } from 'fs-extra'
|
||||
import { nextBuild } from 'next-test-utils'
|
||||
import { join } from 'path'
|
||||
// In order for the global isNextStart to be set
|
||||
import 'e2e-utils'
|
||||
|
||||
describe.skip('Invalid CSS Module Usage in node_modules', () => {
|
||||
;(Boolean((global as any).isNextStart) ? describe : describe.skip)(
|
||||
'production only',
|
||||
() => {
|
||||
const appDir = __dirname
|
||||
|
||||
beforeAll(async () => {
|
||||
await remove(join(appDir, '.next'))
|
||||
})
|
||||
|
||||
it('should fail to build', async () => {
|
||||
const { code, stderr } = await nextBuild(appDir, [], {
|
||||
stderr: true,
|
||||
})
|
||||
expect(code).not.toBe(0)
|
||||
expect(stderr).toContain('Failed to compile')
|
||||
expect(stderr).toContain('node_modules/example/index.module.scss')
|
||||
expect(stderr).toMatch(
|
||||
/CSS Modules.*cannot.*be imported from within.*node_modules/
|
||||
)
|
||||
expect(stderr).toMatch(
|
||||
/Location:.*node_modules[\\/]example[\\/]index\.mjs/
|
||||
)
|
||||
})
|
||||
}
|
||||
)
|
||||
})
|
19
test/e2e/app-dir/scss/loader-order/loader-order.test.ts
Normal file
19
test/e2e/app-dir/scss/loader-order/loader-order.test.ts
Normal file
|
@ -0,0 +1,19 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('SCSS Support loader handling Preprocessor loader order', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
it('should render the module', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('.red-text').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Multi Global Support (reversed)', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the page', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-blue').getComputedCss('color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
})
|
||||
})
|
|
@ -0,0 +1,7 @@
|
|||
export default function Home() {
|
||||
return (
|
||||
<div className="red-text blue-text" id="verify-blue">
|
||||
This text should be blue.
|
||||
</div>
|
||||
)
|
||||
}
|
20
test/e2e/app-dir/scss/multi-global/multi-global.test.ts
Normal file
20
test/e2e/app-dir/scss/multi-global/multi-global.test.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb } from 'next-test-utils'
|
||||
|
||||
describe('Multi Global Support', () => {
|
||||
const { next } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
|
||||
it('should render the page', async () => {
|
||||
const browser = await next.browser('/')
|
||||
expect(
|
||||
await browser.elementByCss('#verify-red').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
})
|
||||
})
|
9
test/e2e/app-dir/scss/multi-global/pages/index.js
Normal file
9
test/e2e/app-dir/scss/multi-global/pages/index.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<div className="red-text blue-text" id="verify-red">
|
||||
This text should be red.
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
65
test/e2e/app-dir/scss/multi-page/multi-page.test.ts
Normal file
65
test/e2e/app-dir/scss/multi-page/multi-page.test.ts
Normal file
|
@ -0,0 +1,65 @@
|
|||
/* eslint-env jest */
|
||||
|
||||
import { nextTestSetup } from 'e2e-utils'
|
||||
import { colorToRgb, retry } from 'next-test-utils'
|
||||
|
||||
describe('SCSS Support', () => {
|
||||
const { next, isNextDev } = nextTestSetup({
|
||||
files: __dirname,
|
||||
dependencies: {
|
||||
sass: '1.54.0',
|
||||
},
|
||||
})
|
||||
describe('Has CSS in computed styles in Production', () => {
|
||||
it('should have CSS for page', async () => {
|
||||
const browser = await next.browser('/page2')
|
||||
|
||||
expect(
|
||||
await browser.elementByCss('.blue-text').getComputedCss('color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
})
|
||||
})
|
||||
|
||||
if (isNextDev) {
|
||||
describe('Can hot reload CSS without losing state', () => {
|
||||
it('should update CSS color without remounting <input>', async () => {
|
||||
const browser = await next.browser('/page1')
|
||||
|
||||
const desiredText = 'hello world'
|
||||
await browser.elementById('text-input').type(desiredText)
|
||||
expect(await browser.elementById('text-input').getValue()).toBe(
|
||||
desiredText
|
||||
)
|
||||
|
||||
expect(
|
||||
await browser.elementByCss('.red-text').getComputedCss('color')
|
||||
).toBe(colorToRgb('red'))
|
||||
|
||||
await next.patchFile('styles/global1.scss', (contents) => {
|
||||
return contents.replace('$var: red', '$var: purple')
|
||||
})
|
||||
|
||||
await retry(async () => {
|
||||
expect(
|
||||
await browser.elementByCss('.red-text').getComputedCss('color')
|
||||
).toBe(colorToRgb('purple'))
|
||||
})
|
||||
|
||||
// ensure text remained
|
||||
expect(await browser.elementById('text-input').getValue()).toBe(
|
||||
desiredText
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
describe('Has CSS in computed styles in Development', () => {
|
||||
it('should have CSS for page', async () => {
|
||||
const browser = await next.browser('/page2')
|
||||
|
||||
expect(
|
||||
await browser.elementByCss('.blue-text').getComputedCss('color')
|
||||
).toBe(colorToRgb('blue'))
|
||||
})
|
||||
})
|
||||
})
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue