add experimental option to use sass-loader@16

.vscode/settings.json

@@ -58,16 +58,16 @@
     "RUST_BACKTRACE": "0"
   },
   "cSpell.words": [
-    "codemod",
-    "codemods",
-    "Destructuring",
     "buildtime",
     "callsites",
     "codemod",
+    "codemods",
     "datastream",
     "deduped",
+    "Destructuring",
     "draftmode",
     "Entrypoints",
+    "jiwon",
     "jscodeshift",
     "napi",
     "navigations",

crates/next-core/Cargo.toml

@@ -33,6 +33,7 @@ tracing = { workspace = true }
 rustc-hash = { workspace = true }
 react_remove_properties = "0.24.25"
 remove_console = "0.25.25"
+semver = { workspace = true }
 
 auto-hash-map = { workspace = true }
 
@@ -76,6 +77,7 @@ turbopack-nodejs = { workspace = true }
 turbopack-static = { workspace = true }
 turbopack-trace-server = { workspace = true }
 turbopack-trace-utils = { workspace = true }
+turbopack-resolve = { workspace = true }
 
 [build-dependencies]
 turbo-tasks-build = { workspace = true }

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

@@ -17,7 +17,8 @@ pub async fn webpack_loader_options(
     conditions: Vec<RcStr>,
 ) -> Result<Option<ResolvedVc<WebpackLoadersOptions>>> {
     let rules = *next_config.webpack_rules(conditions).await?;
-    let rules = *maybe_add_sass_loader(next_config.sass_config(), rules.map(|v| *v)).await?;
+    let rules =
+        *maybe_add_sass_loader(next_config.sass_config(), rules.map(|v| *v), *project_path).await?;
     let rules = if foreign {
         rules
     } else {

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

@@ -1,24 +1,76 @@
-use std::mem::take;
+use std::{io::Read, mem::take};
 
 use anyhow::{bail, Result};
+use semver::Version;
 use serde_json::Value as JsonValue;
 use turbo_tasks::{ResolvedVc, Vc};
+use turbo_tasks_fs::{FileContent, FileSystemPath};
 use turbopack::module_options::{LoaderRuleItem, OptionWebpackRules, WebpackRules};
+use turbopack_core::{
+    asset::{Asset, AssetContent},
+    resolve::{pattern::Pattern, resolve_raw},
+};
 use turbopack_node::transforms::webpack::WebpackLoaderItem;
 
 #[turbo_tasks::function]
 pub async fn maybe_add_sass_loader(
     sass_options: Vc<JsonValue>,
     webpack_rules: Option<Vc<WebpackRules>>,
+    package_dir: ResolvedVc<FileSystemPath>,
 ) -> Result<Vc<OptionWebpackRules>> {
     let sass_options = sass_options.await?;
     let Some(mut 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 sass_package_json_path = resolve_raw(
+        *package_dir,
+        Pattern::Constant("sass/package.json".into()).cell(),
+        false,
+    )
+    .first_source()
+    .await?;
+
+    let sass_version = match &*sass_package_json_path {
+        Some(sass_package_json) => {
+            let sass_package_json_content = sass_package_json.content().await?;
+            match &*sass_package_json_content {
+                AssetContent::File(file_content) => match &*file_content.await? {
+                    FileContent::Content(file) => {
+                        let mut reader = file.read();
+                        let mut buf = Vec::new();
+                        reader.read_to_end(&mut buf)?;
+                        let json_value = serde_json::from_slice::<serde_json::Value>(&buf)?;
+                        json_value
+                            .get("version")
+                            .unwrap()
+                            .as_str()
+                            .map(Version::parse)
+                    }
+                    _ => None,
+                },
+                _ => None,
+            }
+        }
+        None => None,
+    }
+    .transpose()?
+    .unwrap_or_else(|| Version::new(1, 45, 0));
+
+    // The modern Sass API with breaking changes was added in [email protected].
+    // https://sass-lang.com/documentation/breaking-changes/legacy-js-api
+    // Since sass-loader and our peer dependency sass version is ^1.3.0,
+    // we need to use the legacy Sass API for versions less than 1.45.0.
+    let should_use_legacy_sass_api = sass_version < Version::parse("1.45.0")?;
+
+    // TODO(jiwon): Once the peer dependency for sass is upgraded to >= 1.45.0, we can remove this.
     sass_options.insert(
-        "silenceDeprecations".into(),
-        serde_json::json!(["legacy-js-api"]),
+        "api".into(),
+        serde_json::json!(if should_use_legacy_sass_api {
+            "legacy"
+        } else {
+            "modern"
+        }),
     );
     let mut rules = if let Some(webpack_rules) = webpack_rules {
         webpack_rules.await?.clone_value()

packages/next/package.json

@@ -293,7 +293,7 @@
     "raw-body": "2.4.1",
     "react-refresh": "0.12.0",
     "regenerator-runtime": "0.13.4",
-    "sass-loader": "15.0.0",
+    "sass-loader": "16.0.0",
     "schema-utils2": "npm:[email protected]",
     "schema-utils3": "npm:[email protected]",
     "semver": "7.3.2",

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

@@ -1,5 +1,6 @@
 import curry from 'next/dist/compiled/lodash.curry'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import { lt as semverLessThan } from 'next/dist/compiled/semver'
 import { loader, plugin } from '../../helpers'
 import { pipe } from '../../utils'
 import type { ConfigurationContext, ConfigurationFn } from '../../utils'
@@ -162,6 +163,19 @@ export const css = curry(async function css(
       ctx.experimental.useLightningcss
     )
 
+  // Since sass is an optional peer dependency, it may be missing.
+  // enable modern API by default
+  let sassVersion = '1.45.0'
+  try {
+    sassVersion = require(require.resolve('sass/package.json')).version
+  } catch {}
+
+  // The modern Sass API with breaking changes was added in [email protected].
+  // https://sass-lang.com/documentation/breaking-changes/legacy-js-api
+  // Since sass-loader and our peer dependency sass version is ^1.3.0,
+  // we need to use the legacy Sass API for versions less than 1.45.0.
+  const shouldUseLegacySassAPI = semverLessThan(sassVersion, '1.45.0')
+
   const sassPreprocessors: webpack.RuleSetUseItem[] = [
     // First, process files with `sass-loader`: this inlines content, and
     // compiles away the proprietary syntax.
@@ -181,8 +195,8 @@ export const css = curry(async function css(
           // 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'],
+          // TODO(jiwon): Once the peer dependency for sass is upgraded to >= 1.45.0, we can remove this.
+          api: shouldUseLegacySassAPI ? 'legacy' : 'modern',
           ...sassOptions,
         },
         additionalData: sassPrependData || sassAdditionalData,