Add sassOption implementation to support sass-embedded (#64577)

This PR adds an option to use `sass-embedded`. For large projects sass-embedded improves SCSS compilation time by over 50%. See also #36160 Added a sassOption `implementation` to configure the sass-loader which Sass implementation to use. See also https://www.npmjs.com/package/sass-loader#implementation I think this a similar approach to what is done for `additionalData`. In order to support `sass-embedded`, `sass-loader` is upgraded to 12.6.0. --------- Co-authored-by: Zack Tanner <[email protected]>
vercel · Aug 16, 2024 · 26c9c63 · 26c9c63
1 parent 2018e6a
commit 26c9c63
Show file tree

Hide file tree

Showing 44 changed files with 1,051 additions and 602 deletions.
diff --git a/packages/next-swc/crates/next-core/src/next_shared/webpack_rules/sass.rs b/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

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -287,7 +287,7 @@
     "react-is": "18.2.0",
     "react-refresh": "0.12.0",
     "regenerator-runtime": "0.13.4",
-    "sass-loader": "12.4.0",
+    "sass-loader": "12.6.0",
     "schema-utils2": "npm:[email protected]",
     "schema-utils3": "npm:[email protected]",
     "semver": "7.3.2",

diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts
@@ -148,6 +148,7 @@ export const css = curry(async function css(
   const {
     prependData: sassPrependData,
     additionalData: sassAdditionalData,
+    implementation: sassImplementation,
     ...sassOptions
   } = ctx.sassOptions
 
@@ -164,6 +165,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,

diff --git a/packages/next/src/compiled/sass-loader/cjs.js b/packages/next/src/compiled/sass-loader/cjs.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/e2e/app-dir/scss/3rd-party-module/3rd-party-module.test.ts b/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'))
+    })
+  }
+)
diff --git a/test/e2e/app-dir/scss/basic-module-additional-data/basic-module-additional-data.test.ts b/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'))
+    })
+  }
+)
diff --git a/test/e2e/app-dir/scss/basic-module-additional-data/next.config.js b/test/e2e/app-dir/scss/basic-module-additional-data/next.config.js
diff --git a/test/e2e/app-dir/scss/basic-module-include-paths/basic-module-include-paths.test.ts b/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'))
+    })
+  }
+)
diff --git a/test/e2e/app-dir/scss/basic-module-include-paths/next.config.js b/test/e2e/app-dir/scss/basic-module-include-paths/next.config.js
diff --git a/test/e2e/app-dir/scss/basic-module-prepend-data/basic-module-prepend-data.test.ts b/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'))
+    })
+  }
+)
diff --git a/test/e2e/app-dir/scss/basic-module-prepend-data/next.config.js b/test/e2e/app-dir/scss/basic-module-prepend-data/next.config.js