[Breaking] Bump sass-loader to v16

crates/next-core/src/next_shared/webpack_rules/sass.rs

@@ -38,19 +38,10 @@ pub async fn get_sass_loader_rules(
     sass_options: Vc<JsonValue>,
 ) -> Result<Vec<(RcStr, LoaderRuleItem)>> {
     let sass_options = sass_options.await?;
-    let Some(mut sass_options) = sass_options.as_object().cloned() else {
+    let Some(sass_options) = sass_options.as_object().cloned() else {
         bail!("sass_options must be an object");
     };
 
-    // TODO: Remove this once we upgrade to sass-loader 16
-    let silence_deprecations = if let Some(v) = sass_options.get("silenceDeprecations") {
-        v.clone()
-    } else {
-        serde_json::json!(["legacy-js-api"])
-    };
-
-    sass_options.insert("silenceDeprecations".into(), silence_deprecations);
-
     // additionalData is a loader option but Next.js has it under `sassOptions` in
     // `next.config.js`
     let additional_data = sass_options

packages/next/package.json

@@ -314,7 +314,7 @@
     "recast": "0.23.11",
     "regenerator-runtime": "0.13.4",
     "safe-stable-stringify": "2.5.0",
-    "sass-loader": "15.0.0",
+    "sass-loader": "16.0.5",
     "schema-utils2": "npm:[email protected]",
     "schema-utils3": "npm:[email protected]",
     "semver": "7.3.2",

packages/next/src/build/webpack/config/blocks/css/index.ts

@@ -174,19 +174,7 @@ export const css = curry(async function css(
         // Source maps are required so that `resolve-url-loader` can locate
         // files original to their source directory.
         sourceMap: true,
-        sassOptions: {
-          // The "fibers" option is not needed for Node.js 16+, but it's causing
-          // problems for Node.js <= 14 users as you'll have to manually install
-          // the `fibers` package:
-          // https://github.com/webpack-contrib/sass-loader#:~:text=We%20automatically%20inject%20the%20fibers%20package
-          // https://github.com/vercel/next.js/issues/45052
-          // Since it's optional and not required, we'll disable it by default
-          // to avoid the confusion.
-          fibers: false,
-          // TODO: Remove this once we upgrade to sass-loader 16
-          silenceDeprecations: ['legacy-js-api'],
-          ...sassOptions,
-        },
+        sassOptions,
         additionalData: sassPrependData || sassAdditionalData,
       },
     },

packages/next/taskfile.js

@@ -1878,7 +1878,7 @@ export async function ncc_sass_loader(task, opts) {
   await fs.writeFile(
     utilsPath,
     originalContent.replace(
-      /require\.resolve\(["'](sass|node-sass)["']\)/g,
+      /require\.resolve\(["'](sass|node-sass|sass-embedded)["']\)/g,
       'eval("require").resolve("$1")'
     )
   )

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

@@ -3,7 +3,7 @@ import { nextTestSetup } from 'e2e-utils'
 import { colorToRgb } from 'next-test-utils'
 
 const sassOptions = {
-  includePaths: ['./styles'],
+  loadPaths: ['./styles'],
 }
 
 describe.each([

turbopack/crates/turbopack-node/js/src/transforms/transforms.ts

@@ -30,12 +30,17 @@ export type IpcInfoMessage =
       }>
     }
 
-export type IpcRequestMessage = {
-  type: 'resolve'
-  options: any
-  lookupPath: string
-  request: string
-}
+export type IpcRequestMessage =
+  | {
+      type: 'resolve'
+      options: any
+      lookupPath: string
+      request: string
+    }
+  | {
+      type: 'readFile'
+      file: string
+    }
 
 export type TransformIpc = Ipc<IpcInfoMessage, IpcRequestMessage>
 

turbopack/crates/turbopack-node/js/src/transforms/webpack-loaders.ts

@@ -3,7 +3,7 @@ declare const __turbopack_external_require__: {
 } & ((id: string, thunk: () => any, esm?: boolean) => any)
 
 import type { Ipc } from '../ipc/evaluate'
-import { dirname, resolve as pathResolve } from 'path'
+import { dirname, resolve as pathResolve, relative } from 'path'
 import {
   StackFrame,
   parse as parseStackTrace,
@@ -185,6 +185,60 @@ const transform = (
               ? entry.options
               : {}
           },
+          fs: {
+            readFile(p: string, encodingOrCb: any, maybeCb: any) {
+              let encoding: BufferEncoding | undefined,
+                callback: (err?: Error, data?: string | Buffer) => void
+              if (maybeCb == null) {
+                callback = encodingOrCb
+                encoding = undefined
+              } else {
+                callback = maybeCb
+                encoding = encodingOrCb
+                  ? encodingOrCb.toLowerCase()
+                  : encodingOrCb
+              }
+
+              ipc
+                .sendRequest({
+                  type: 'readFile',
+                  file: relative(contextDir, pathResolve(p)),
+                })
+                .then((unknownResult) => {
+                  let result = unknownResult as {
+                    content: string | { binary: string }
+                  }
+                  if (result && result.content) {
+                    return result.content
+                  } else {
+                    throw Error(
+                      'Expected { content: ... } from readFile request'
+                    )
+                  }
+                })
+                .then(
+                  (content) => {
+                    if (
+                      typeof content === 'string' &&
+                      (encoding === 'utf8' || encoding === 'utf-8')
+                    ) {
+                      callback(undefined, content)
+                    } else {
+                      let buffer =
+                        typeof content === 'string'
+                          ? Buffer.from(content, 'utf-8')
+                          : Buffer.from(content.binary, 'base64')
+                      let result = encoding ? buffer.toString(encoding) : buffer
+                      callback(undefined, result)
+                    }
+                  },
+                  (err) => callback(err)
+                )
+                .catch((err) => {
+                  ipc.sendError(err)
+                })
+            },
+          },
           getResolve: (options: ResolveOptions) => {
             const rustOptions = {
               aliasFields: undefined as undefined | string[],

turbopack/crates/turbopack-node/src/transforms/webpack.rs

@@ -66,7 +66,7 @@ use crate::{
 
 #[serde_as]
 #[derive(Clone, Debug, PartialEq, Eq, PartialOrd, Ord, Serialize, Deserialize)]
-struct BytesBase64 {
+pub struct BytesBase64 {
     #[serde_as(as = "serde_with::base64::Base64")]
     binary: Vec<u8>,
 }
@@ -409,12 +409,20 @@ pub enum RequestMessage {
         lookup_path: RcStr,
         request: RcStr,
     },
+    #[serde(rename_all = "camelCase")]
+    ReadFile { file: RcStr },
 }
 
 #[derive(Serialize, Debug)]
 #[serde(untagged)]
 pub enum ResponseMessage {
-    Resolve { path: RcStr },
+    Resolve {
+        path: RcStr,
+    },
+    ReadFile {
+        #[serde(with = "either::serde_untagged")]
+        content: Either<String, BytesBase64>,
+    },
 }
 
 #[derive(Clone, PartialEq, Eq, Hash, TaskInput, Serialize, Deserialize, Debug, TraceRawVcs)]
@@ -605,6 +613,23 @@ impl EvaluateContext for WebpackLoaderContext {
                     );
                 }
             }
+            RequestMessage::ReadFile { file } => {
+                let FileContent::Content(content) = &*self.cwd.join(&file)?.read().await? else {
+                    bail!("ENOENT: no such file or directory");
+                };
+                let content = content.content();
+                if let Ok(content) = content.to_str() {
+                    Ok(ResponseMessage::ReadFile {
+                        content: Either::Left(content.into_owned()),
+                    })
+                } else {
+                    Ok(ResponseMessage::ReadFile {
+                        content: Either::Right(BytesBase64 {
+                            binary: content.to_bytes().to_vec(),
+                        }),
+                    })
+                }
+            }
         }
     }