[Breaking] Bump sass-loader to v16 (#84387)

This PR bumps sass-loader to v16 as Sass is deprecating the legacy JS
API, and updating sass-loader ensures compatibility with future Sass
versions.

x-ref: #67931

This removes the silencing of the deprecation warning added at
#72632.

Supersedes #83091

---------

Co-authored-by: Maikel <[email protected]>

Author: devjiwonchoi

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

@@ -71,19 +71,10 @@ pub async fn get_sass_loader_rules(
     }
 
     let sass_options = next_config.sass_config().await?;
-    let Some(mut sass_options) = sass_options.as_object().cloned() else {
+    let Some(sass_options) = sass_options.as_object() 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

@@ -310,7 +310,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/src/compiled/sass-loader/cjs.js

@@ -1857,7 +1857,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")'
     )
   )

packages/next/taskfile.js

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