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

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-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",

Cargo.toml

@@ -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
 

packages/next-swc/crates/next-core/src/sass.rs

@@ -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!({
+            options: take(
-                //https://github.com/vercel/turbo/blob/d527eb54be384a4658243304cecd547d09c05c6b/crates/turbopack-node/src/transforms/webpack.rs#L191
+                serde_json::json!({
-                "sourceMap": false,
+                    "sourceMap": true,
                     "sassOptions": sass_options,
                     "additionalData": additional_data
                 })
-            .as_object()
+                .as_object_mut()
-            .unwrap()
+                .unwrap(),
-            .clone(),
+            ),
+        };
+        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}")),
                 },
             );

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-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",

packages/next/src/build/webpack/loaders/resolve-url-loader/index.ts

@@ -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),

packages/next/src/build/webpack/loaders/resolve-url-loader/lib/postcss.ts

@@ -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) {
+    return {
+      postcssPlugin: 'postcss-resolve-url',
+      Once: function (root: any) {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      styles.walkDecls(eachDeclaration)
+        root.walkDecls(eachDeclaration)
+      },
     }
 
     /**

pnpm-lock.yaml

@@ -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
+        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.1'
+        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':
+  '@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.1}
+    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:

test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/3rd-party-module/pages/index.js

@@ -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>
+  )
+}

test/e2e/app-dir/scss/3rd-party-module/pages/index.module.scss

@@ -4,14 +4,13 @@
 
 .foo :global(.bar),
 .foo :global(.baz) {
-  height: 100%;
+  background-color: blue;
-  overflow: hidden;
 }
 
 .foo :global(.lol) {
-  width: 80%;
+  background-color: red;
 }
 
 .foo > :global(.lel) {
-  width: 80%;
+  background-color: green;
 }

test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/basic-module-additional-data/next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  sassOptions: {
+    additionalData: `
+      $var: red;
+    `,
+  },
+}

test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/basic-module-prepend-data/pages/index.module.scss

@@ -1,4 +1,3 @@
-$var: red;
 .redText {
   color: $var;
 }

test/e2e/app-dir/scss/basic-module/basic-module.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/catch-all-module/catch-all-module.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/catch-all-module/pages/[...post]/index.module.scss

@@ -0,0 +1,3 @@
+.home {
+  background: red;
+}

test/e2e/app-dir/scss/compilation-and-prefixing/compilation-and-prefixing.test.ts

@@ -1,28 +1,22 @@
 /* eslint-env jest */
 
-import { readdir, readFile, remove } from 'fs-extra'
+import { nextTestSetup } from 'e2e-utils'
-import { nextBuild } from 'next-test-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))

test/e2e/app-dir/scss/compilation-and-prefixing/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  productionBrowserSourceMaps: true,
+}

test/e2e/app-dir/scss/composes-basic/composes-basic.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/composes-external/composes-external.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/composes-external/pages/index.module.scss

@@ -0,0 +1,5 @@
+$var: blue;
+.subClass {
+  composes: className from './other.module.scss';
+  background: $var;
+}

test/e2e/app-dir/scss/data-url/data-url.test.ts

@@ -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:[^"]+"\)$/
+    )
+  })
+})

test/e2e/app-dir/scss/dev-module/dev-module.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/dynamic-route-module/dynamic-route-module.test.ts

@@ -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'))
+    })
+  })
+})

test/e2e/app-dir/scss/dynamic-route-module/pages/[post]/index.module.scss

@@ -0,0 +1,3 @@
+.home {
+  background: red;
+}

test/e2e/app-dir/scss/external-url/external-url.test.ts

@@ -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')
+  })
+})

test/e2e/app-dir/scss/hmr-module/hmr-module.test.ts

@@ -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
+      )
+    })
+  })
+})

test/e2e/app-dir/scss/invalid-global-module/invalid-global-module.test.ts

@@ -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/
+        )
+      })
+    }
+  )
+})

test/e2e/app-dir/scss/invalid-global-with-app/invalid-global-with-app.test.ts

@@ -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/)
+      })
+    }
+  )
+})

test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts

@@ -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/)
+      })
+    }
+  )
+})

test/e2e/app-dir/scss/invalid-module-document/invalid-module-document.test.ts

@@ -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/)
+      })
+    }
+  )
+})

test/e2e/app-dir/scss/invalid-module/invalid-module.test.ts

@@ -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/
+        )
+      })
+    }
+  )
+})

test/e2e/app-dir/scss/loader-order/loader-order.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/multi-global-reversed/multi-global-reversed.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/multi-global-reversed/pages/index.js

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div className="red-text blue-text" id="verify-blue">
+      This text should be blue.
+    </div>
+  )
+}

test/e2e/app-dir/scss/multi-global/multi-global.test.ts

@@ -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'))
+  })
+})

test/e2e/app-dir/scss/multi-global/pages/index.js

@@ -0,0 +1,9 @@
+export default function Home() {
+  return (
+    <>
+      <div className="red-text blue-text" id="verify-red">
+        This text should be red.
+      </div>
+    </>
+  )
+}

test/e2e/app-dir/scss/multi-page/multi-page.test.ts

@@ -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'))
+    })
+  })
+})