Add sassOption implementation to support sass-embedded

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

@@ -38,6 +38,7 @@ pub async fn maybe_add_sass_loader(
             loader: "next/dist/compiled/sass-loader".into(),
             options: take(
                 serde_json::json!({
+                    "implementation": sass_options.get("implementation"),
                     "sourceMap": true,
                     "sassOptions": sass_options,
                     "additionalData": additional_data

packages/next/package.json

@@ -292,7 +292,7 @@
     "react-is": "19.0.0-canary-94eed63c49-20240425",
     "react-refresh": "0.12.0",
     "regenerator-runtime": "0.13.4",
-    "sass-loader": "12.4.0",
+    "sass-loader": "12.6.0",
     "schema-utils2": "npm:schema-utils@2.7.1",
     "schema-utils3": "npm:schema-utils@3.0.0",
     "semver": "7.3.2",

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

@@ -150,6 +150,7 @@ export const css = curry(async function css(
   const {
     prependData: sassPrependData,
     additionalData: sassAdditionalData,
+    implementation: sassImplementation,
     ...sassOptions
   } = ctx.sassOptions
 
@@ -167,6 +168,7 @@ export const css = curry(async function css(
     {
       loader: require.resolve('next/dist/compiled/sass-loader'),
       options: {
+        implementation: sassImplementation,
         // Source maps are required so that `resolve-url-loader` can locate
         // files original to their source directory.
         sourceMap: true,

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

@@ -3,42 +3,54 @@
 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',
+describe.each([
+  { dependencies: { sass: '1.54.0' }, nextConfig: undefined },
+  {
+    dependencies: { 'sass-embedded': '1.75.0' },
+    nextConfig: {
+      sassOptions: {
+        implementation: 'sass-embedded',
+      },
     },
-  })
+  },
+])(
+  '3rd Party CSS Module Support ($dependencies)',
+  ({ dependencies, nextConfig }) => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      dependencies,
+      nextConfig,
+    })
 
-  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'))
+    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'))
+      // 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'))
+      // 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'))
-  })
-})
+      // Lel
+      expect(
+        await browser
+          .elementByCss('#verify-div .lel')
+          .getComputedCss('background-color')
+      ).toBe(colorToRgb('green'))
+    })
+  }
+)

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

@@ -3,18 +3,37 @@
 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',
+const sassOptions = {
+  additionalData: `
+    $var: red;
+  `,
+}
+
+describe.each([
+  { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } },
+  {
+    dependencies: { 'sass-embedded': '1.75.0' },
+    nextConfig: {
+      sassOptions: {
+        ...sassOptions,
+        implementation: 'sass-embedded',
+      },
     },
-  })
+  },
+])(
+  'Basic Module Additional Data Support ($dependencies)',
+  ({ dependencies, nextConfig }) => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      dependencies,
+      nextConfig,
+    })
 
-  it('should render the module', async () => {
-    const browser = await next.browser('/')
-    expect(
-      await browser.elementByCss('#verify-red').getComputedCss('color')
-    ).toBe(colorToRgb('red'))
-  })
-})
+    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-include-paths/basic-module-include-paths.test.ts

@@ -1,20 +1,36 @@
 /* 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',
+const sassOptions = {
+  includePaths: ['./styles'],
+}
+
+describe.each([
+  { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } },
+  {
+    dependencies: { 'sass-embedded': '1.75.0' },
+    nextConfig: {
+      sassOptions: {
+        ...sassOptions,
+        implementation: 'sass-embedded',
+      },
     },
-  })
+  },
+])(
+  'Basic Module Include Paths Support ($dependencies)',
+  ({ dependencies, nextConfig }) => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      dependencies,
+      nextConfig,
+    })
 
-  it('should render the module', async () => {
-    const browser = await next.browser('/')
-    expect(
-      await browser.elementByCss('#verify-red').getComputedCss('color')
-    ).toBe(colorToRgb('red'))
-  })
-})
+    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

@@ -3,18 +3,37 @@
 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',
+const sassOptions = {
+  prependData: `
+    $var: red;
+  `,
+}
+
+describe.each([
+  { dependencies: { sass: '1.54.0' }, nextConfig: { sassOptions } },
+  {
+    dependencies: { 'sass-embedded': '1.75.0' },
+    nextConfig: {
+      sassOptions: {
+        ...sassOptions,
+        implementation: 'sass-embedded',
+      },
     },
-  })
+  },
+])(
+  'Basic Module Prepend Data Support ($dependencies)',
+  ({ dependencies, nextConfig }) => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+      dependencies,
+      nextConfig,
+    })
 
-  it('should render the module', async () => {
-    const browser = await next.browser('/')
-    expect(
-      await browser.elementByCss('#verify-red').getComputedCss('color')
-    ).toBe(colorToRgb('red'))
-  })
-})
+    it('should render the module', async () => {
+      const browser = await next.browser('/')
+      expect(
+        await browser.elementByCss('#verify-red').getComputedCss('color')
+      ).toBe(colorToRgb('red'))
+    })
+  }
+)