wip

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

@@ -36,9 +36,19 @@ pub async fn maybe_add_sass_loader(
         let additional_data = sass_options
             .get("prependData")
             .or(sass_options.get("additionalData"));
+        // TODO: Remove sass-loader-16 once we upgrade sass-loader to 16
+        let use_upgraded_loader = sass_options
+            .get("experimental")
+            .and_then(|e| e.get("useUpgradedLoader"))
+            .and_then(|v| v.as_bool())
+            .unwrap_or(false);
         let rule = rules.get_mut(pattern);
         let sass_loader = WebpackLoaderItem {
-            loader: "next/dist/compiled/sass-loader".into(),
+            loader: if use_upgraded_loader {
+                "next/dist/compiled/sass-loader-16".into()
+            } else {
+                "next/dist/compiled/sass-loader".into()
+            },
             options: take(
                 serde_json::json!({
                     "implementation": sass_options.get("implementation"),

packages/next/package.json

@@ -294,6 +294,7 @@
     "react-refresh": "0.12.0",
     "regenerator-runtime": "0.13.4",
     "sass-loader": "15.0.0",
+    "sass-loader-16": "npm:[email protected]",
     "schema-utils2": "npm:[email protected]",
     "schema-utils3": "npm:[email protected]",
     "semver": "7.3.2",

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

@@ -151,6 +151,7 @@ export const css = curry(async function css(
     prependData: sassPrependData,
     additionalData: sassAdditionalData,
     implementation: sassImplementation,
+    experimental: { useUpgradedLoader: sassUseUpgradedLoader } = {},
     ...sassOptions
   } = ctx.sassOptions
 
@@ -166,7 +167,11 @@ export const css = curry(async function css(
     // First, process files with `sass-loader`: this inlines content, and
     // compiles away the proprietary syntax.
     {
-      loader: require.resolve('next/dist/compiled/sass-loader'),
+      loader: require.resolve(
+        sassUseUpgradedLoader
+          ? 'next/dist/compiled/sass-loader-16'
+          : 'next/dist/compiled/sass-loader'
+      ),
       options: {
         implementation: sassImplementation,
         // Source maps are required so that `resolve-url-loader` can locate

packages/next/src/server/config-schema.ts

@@ -614,6 +614,11 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
     // sassOptions properties are unknown besides implementation, use z.any() here
     sassOptions: z
       .object({
+        experimental: z
+          .object({
+            useUpgradedLoader: z.boolean().optional(),
+          })
+          .optional(),
         implementation: z.string().optional(),
       })
       .catchall(z.any())

packages/next/src/server/config-shared.ts

@@ -797,6 +797,9 @@ export interface NextConfig extends Record<string, any> {
 
   /** @see [Customizing sass options](https://nextjs.org/docs/app/api-reference/next-config-js/sassOptions) */
   sassOptions?: {
+    experimental?: {
+      useUpgradedLoader?: boolean
+    }
     implementation?: string
     [key: string]: any
   }

packages/next/taskfile.js

@@ -1882,6 +1882,7 @@ externals['sass-loader'] = 'next/dist/compiled/sass-loader'
 // eslint-disable-next-line camelcase
 export async function ncc_sass_loader(task, opts) {
   const sassLoaderPath = require.resolve('sass-loader')
+  console.log({ sassLoaderPath })
   const utilsPath = join(dirname(sassLoaderPath), 'utils.js')
   const originalContent = await fs.readFile(utilsPath, 'utf8')
 
@@ -1906,6 +1907,36 @@ export async function ncc_sass_loader(task, opts) {
     })
     .target('src/compiled/sass-loader')
 }
+// TODO: Remove sass-loader-16 once we upgrade sass-loader to 16
+externals['sass-loader-16'] = 'next/dist/compiled/sass-loader-16'
+// eslint-disable-next-line camelcase
+export async function ncc_sass_loader_16(task, opts) {
+  const sassLoader16Path = require.resolve('sass-loader-16')
+  console.log({ sassLoader16Path })
+  const utilsPath = join(dirname(sassLoader16Path), 'utils.js')
+  const originalContent = await fs.readFile(utilsPath, 'utf8')
+
+  await fs.writeFile(
+    utilsPath,
+    originalContent.replace(
+      /require\.resolve\(["'](sass|node-sass)["']\)/g,
+      'eval("require").resolve("$1")'
+    )
+  )
+
+  await task
+    .source(relative(__dirname, sassLoader16Path))
+    .ncc({
+      packageName: 'sass-loader-16',
+      externals: {
+        ...externals,
+        'schema-utils': externals['schema-utils3'],
+        'loader-utils': externals['loader-utils2'],
+      },
+      target: 'es5',
+    })
+    .target('src/compiled/sass-loader-16')
+}
 // eslint-disable-next-line camelcase
 externals['schema-utils'] = 'MISSING_VERSION schema-utils version not specified'
 externals['schema-utils2'] = 'next/dist/compiled/schema-utils2'
@@ -2426,6 +2457,7 @@ export async function ncc(task, opts) {
       'copy_constants_browserify',
       'copy_vendor_react',
       'ncc_sass_loader',
+      'ncc_sass_loader_16',
       'ncc_jest_worker',
       'ncc_edge_runtime_cookies',
       'ncc_edge_runtime_primitives',

test/e2e/app-dir/scss/use-upgraded-loader/basic-module.test.ts

@@ -0,0 +1,48 @@
+import { nextTestSetup } from 'e2e-utils'
+import { colorToRgb } from 'next-test-utils'
+
+describe('Legacy sass-loader', () => {
+  const { next: nextWithLegacyLoader } = nextTestSetup({
+    files: __dirname,
+    dependencies: { sass: '1.54.0' },
+    nextConfig: undefined,
+  })
+
+  it('should render the module for the legacy sass-loader', async () => {
+    const browser = await nextWithLegacyLoader.browser('/')
+    expect(
+      await browser.elementByCss('#verify-red').getComputedCss('color')
+    ).toBe(colorToRgb('red'))
+  })
+
+  it('should show deprecation warning', async () => {
+    expect(nextWithLegacyLoader.cliOutput).toContain(
+      'Deprecation: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0'
+    )
+  })
+})
+
+describe('Upgraded sass-loader', () => {
+  const { next: nextWithUpgradedLoader } = nextTestSetup({
+    files: __dirname,
+    dependencies: { sass: '1.54.0' },
+    nextConfig: {
+      experimental: {
+        useUpgradedLoader: true,
+      },
+    },
+  })
+
+  it('should render the module for the upgraded sass-loader', async () => {
+    const browser = await nextWithUpgradedLoader.browser('/')
+    expect(
+      await browser.elementByCss('#verify-red').getComputedCss('color')
+    ).toBe(colorToRgb('red'))
+  })
+
+  it('should not show deprecation warning', async () => {
+    expect(nextWithUpgradedLoader.cliOutput).not.toContain(
+      'Deprecation: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0'
+    )
+  })
+})

test/e2e/app-dir/scss/use-upgraded-loader/pages/index.js

@@ -0,0 +1,9 @@
+import { redText } from './index.module.scss'
+
+export default function Home() {
+  return (
+    <div id="verify-red" className={redText}>
+      This text should be red.
+    </div>
+  )
+}

test/e2e/app-dir/scss/use-upgraded-loader/pages/index.module.scss

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