enable esmodule optimizations for css modules #62639

jantimon · 2024-02-28T10:47:59Z

Reproduction example https://github.com/jantimon/reproduction-nextjs-module-css-optimization

Reproduction Steps

npm i 
npm run build

Route (pages)                             Size     First Load JS
┌ ○ /                                     780 B          78.9 kB
├   └ css/6ab5fea530a348de.css            367 B
└ ○ /404                                  182 B          78.3 kB
+ First Load JS shared by all             78.1 kB
  ├ chunks/framework-2c16ac744b6cdea6.js  45.2 kB
  ├ chunks/main-d7239acbfe0deb02.js       31.9 kB
  └ other shared chunks (total)           945 B

○  (Static)  prerendered as static content

Patch

rm -rf .next
npm run patch
npm run build


Route (pages)                             Size     First Load JS
┌ ○ /                                     682 B          78.7 kB
├   └ css/6ab5fea530a348de.css            367 B
└ ○ /404                                  182 B          78.2 kB
+ First Load JS shared by all             78 kB
  ├ chunks/framework-2c16ac744b6cdea6.js  45.2 kB
  ├ chunks/main-d7239acbfe0deb02.js       31.9 kB
  └ other shared chunks (total)           907 B

○  (Static)  prerendered as static content

As you can see, the size of the first load JS is reduced by ~100 bytes.
For a larger project, this would be more significant.

Patch:

diff --git a/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js b/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
index e482b46..1b35d91 100644
--- a/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
+++ b/node_modules/next/dist/build/webpack/config/blocks/css/loaders/client.js
@@ -39,7 +39,7 @@ function getClientStyleLoader({ hasAppDir, isAppDir, isDevelopment, assetPrefix
         loader: MiniCssExtractPlugin.loader,
         options: {
             publicPath: `${assetPrefix}/_next/`,
-            esModule: false
+            esModule: true
         }
     };
 }

Fixes #62637

ijjk · 2024-02-28T10:48:22Z

Allow CI Workflow Run

approve CI run for commit: f6c6bf2

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-02-28T10:48:22Z

Allow CI Workflow Run

approve CI run for commit: a4d31b7

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-02-28T13:25:38Z

Failing test suites

Commit: 480042f

pnpm test test/integration/css-client-nav/test/index.test.js

CSS Module client-side navigation > production mode > should be able to client-side navigate from red to blue
CSS Module client-side navigation > production mode > should be able to client-side navigate from blue to red
CSS Module client-side navigation > production mode > should be able to client-side navigate from none to red
CSS Module client-side navigation > production mode > should be able to client-side navigate from none to blue

Expand output

● CSS Module client-side navigation › production mode › should be able to client-side navigate from red to blue

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `CSS Module client-side navigation production mode should be able to client-side navigate from red to blue 2`

Snapshot: "rgb(0, 0, 255)"
Received: "rgb(0, 0, 0)"

  44 |         `window.getComputedStyle(document.querySelector('#verify-blue')).color`
  45 |       )
> 46 |       expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
     |                         ^
  47 |
  48 |       expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot(
  49 |         `"make sure this is set"`

  at Object.toMatchInlineSnapshot (integration/css-client-nav/test/index.test.js:46:25)

● CSS Module client-side navigation › production mode › should be able to client-side navigate from blue to red

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `CSS Module client-side navigation production mode should be able to client-side navigate from blue to red 2`

Snapshot: "rgb(255, 0, 0)"
Received: "rgb(0, 0, 0)"

  87 |         `window.getComputedStyle(document.querySelector('#verify-red')).color`
  88 |       )
> 89 |       expect(blueColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
     |                         ^
  90 |
  91 |       expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot(
  92 |         `"make sure this is set"`

  at Object.toMatchInlineSnapshot (integration/css-client-nav/test/index.test.js:89:25)

● CSS Module client-side navigation › production mode › should be able to client-side navigate from none to red

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `CSS Module client-side navigation production mode should be able to client-side navigate from none to red 1`

Snapshot: "rgb(255, 0, 0)"
Received: "rgb(0, 0, 0)"

  112 |         `window.getComputedStyle(document.querySelector('#verify-red')).color`
  113 |       )
> 114 |       expect(blueColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
      |                         ^
  115 |
  116 |       expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot(
  117 |         `"make sure this is set"`

  at Object.toMatchInlineSnapshot (integration/css-client-nav/test/index.test.js:114:25)

● CSS Module client-side navigation › production mode › should be able to client-side navigate from none to blue

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `CSS Module client-side navigation production mode should be able to client-side navigate from none to blue 1`

Snapshot: "rgb(0, 0, 255)"
Received: "rgb(0, 0, 0)"

  137 |         `window.getComputedStyle(document.querySelector('#verify-blue')).color`
  138 |       )
> 139 |       expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
      |                         ^
  140 |
  141 |       expect(await browser.eval(`window.__did_not_ssr`)).toMatchInlineSnapshot(
  142 |         `"make sure this is set"`

  at Object.toMatchInlineSnapshot (integration/css-client-nav/test/index.test.js:139:25)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/dynamic/dynamic.test.ts

app dir - next/dynamic > should handle next/dynamic in hydration correctly

Expand output

● app dir - next/dynamic › should handle next/dynamic in hydration correctly

expect(received).toContain(expected) // indexOf

Expected substring: "next-dynamic dynamic no ssr on server"
Received string:    "1 of 1 unhandled error
Next.js (14.1.1-canary.78)
Unhandled Runtime Error·
TypeError: Cannot set properties of undefined (setting '__checksum')·
Source·
app/dynamic/lazy.module.css (10:1) @ eval·
   8 |     }
   9 |···
> 10 | module.exports.__checksum = \"8107e5d32f75\"
     | ^
  11 |
Call Stack
Show collapsed frames"

  45 |       const browser = await next.browser('/dynamic')
  46 |       const clientContent = await browser.elementByCss(selector).text()
> 47 |       expect(clientContent).toContain('next-dynamic dynamic no ssr on server')
     |                             ^
  48 |       expect(clientContent).toContain('client component under sever no ssr')
  49 |       await browser.waitForElementByCss('#css-text-dynamic-no-ssr-client')
  50 |

  at Object.toContain (e2e/app-dir/dynamic/dynamic.test.ts:47:29)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/scss/scss-fixtures/basic-module/basic-module.test.js

Basic SCSS Module Support > production mode > should have compiled successfully

Expand output

● Basic SCSS Module Support › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     346 B          78.6 kB
├   └ css/30b9bb068df046b2.css            99 B
└ ○ /404                                  226 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-93e118dcfaf9dfca.js  45.3 kB
  ├ chunks/main-5297a57243b6a0e9.js       32 kB
  └ other shared chunks (total)           998 B·
○  (Static)  prerendered as static content·
"

  34 |     it('should have compiled successfully', () => {
  35 |       expect(code).toBe(0)
> 36 |       expect(stdout).toMatch(/Compiled successfully/)
     |                      ^
  37 |     })
  38 |
  39 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/scss/scss-fixtures/basic-module/basic-module.test.js:36:22)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/scss/scss-fixtures/composes-basic/composes-basic.test.js

CSS Module Composes Usage (Basic) > production mode > should have compiled successfully

Expand output

● CSS Module Composes Usage (Basic) › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     355 B          78.6 kB
├   └ css/1b38b9f6ac5badf5.css            141 B
└ ○ /404                                  226 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-93e118dcfaf9dfca.js  45.3 kB
  ├ chunks/main-5297a57243b6a0e9.js       32 kB
  └ other shared chunks (total)           998 B·
○  (Static)  prerendered as static content·
"

  20 |     it('should have compiled successfully', () => {
  21 |       expect(code).toBe(0)
> 22 |       expect(stdout).toMatch(/Compiled successfully/)
     |                      ^
  23 |     })
  24 |
  25 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/scss/scss-fixtures/composes-basic/composes-basic.test.js:22:22)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/scss/scss-fixtures/prod-module/prod-module.test.js

Has CSS Module in computed styles in Production > production mode > should have compiled successfully

Expand output

● Has CSS Module in computed styles in Production › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     346 B          78.6 kB
├   └ css/30b9bb068df046b2.css            99 B
└ ○ /404                                  226 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-93e118dcfaf9dfca.js  45.3 kB
  ├ chunks/main-5297a57243b6a0e9.js       32 kB
  └ other shared chunks (total)           998 B·
○  (Static)  prerendered as static content·
"

  28 |     it('should have compiled successfully', () => {
  29 |       expect(code).toBe(0)
> 30 |       expect(stdout).toMatch(/Compiled successfully/)
     |                      ^
  31 |     })
  32 |
  33 |     it('should have CSS for page', async () => {

  at Object.toMatch (integration/scss/scss-fixtures/prod-module/prod-module.test.js:30:22)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/not-found/css-precedence/index.test.ts

not-found app dir css > should load css while navigation between not-found and page

Expand output

● not-found app dir css › should load css while navigation between not-found and page

TIMED OUT: rgb(0, 128, 0)

null

undefined

  636 |
  637 |   if (hardError) {
> 638 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  639 |   }
  640 |   return false
  641 | }

  at check (lib/next-test-utils.ts:638:11)
  at Object.<anonymous> (e2e/app-dir/not-found/css-precedence/index.test.ts:16:7)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/css-modules/test/index.test.js

3rd Party CSS Module Support > production mode > should have compiled successfully
Basic CSS Module Support > production mode > should have compiled successfully
CSS Module Composes Usage (Basic) > production mode > should have compiled successfully
CSS Module Composes Usage (External) > production mode > should have compiled successfully
Has CSS Module in computed styles in Production > production mode > should have compiled successfully

Expand output

● Basic CSS Module Support › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     347 B          78.6 kB
├   └ css/0cc1606088d0bec1.css            99 B
└ ○ /404                                  227 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-95598d058df648c8.js  45.2 kB
  ├ chunks/main-20b97cc7de00b412.js       32 kB
  └ other shared chunks (total)           996 B·
○  (Static)  prerendered as static content·
"

  40 |     it('should have compiled successfully', () => {
  41 |       expect(code).toBe(0)
> 42 |       expect(stdout).toMatch(/Compiled successfully/)
     |                      ^
  43 |       expect(stdout).toContain('.css')
  44 |     })
  45 |

  at Object.toMatch (integration/css-modules/test/index.test.js:42:22)

● 3rd Party CSS Module Support › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     319 B          78.6 kB
├   └ css/30e135efec1f805e.css            161 B
└ ○ /404                                  227 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-95598d058df648c8.js  45.2 kB
  ├ chunks/main-20b97cc7de00b412.js       32 kB
  └ other shared chunks (total)           996 B·
○  (Static)  prerendered as static content·
"

   99 |     it('should have compiled successfully', () => {
  100 |       expect(code).toBe(0)
> 101 |       expect(stdout).toMatch(/Compiled successfully/)
      |                      ^
  102 |     })
  103 |
  104 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/css-modules/test/index.test.js:101:22)

● Has CSS Module in computed styles in Production › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     347 B          78.6 kB
├   └ css/0cc1606088d0bec1.css            99 B
└ ○ /404                                  227 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-95598d058df648c8.js  45.2 kB
  ├ chunks/main-20b97cc7de00b412.js       32 kB
  └ other shared chunks (total)           996 B·
○  (Static)  prerendered as static content·
"

  183 |     it('should have compiled successfully', () => {
  184 |       expect(code).toBe(0)
> 185 |       expect(stdout).toMatch(/Compiled successfully/)
      |                      ^
  186 |     })
  187 |
  188 |     it('should have CSS for page', async () => {

  at Object.toMatch (integration/css-modules/test/index.test.js:185:22)

● CSS Module Composes Usage (Basic) › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     355 B          78.6 kB
├   └ css/6a56fce77df5b224.css            141 B
└ ○ /404                                  227 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-95598d058df648c8.js  45.2 kB
  ├ chunks/main-20b97cc7de00b412.js       32 kB
  └ other shared chunks (total)           996 B·
○  (Static)  prerendered as static content·
"

  421 |     it('should have compiled successfully', () => {
  422 |       expect(code).toBe(0)
> 423 |       expect(stdout).toMatch(/Compiled successfully/)
      |                      ^
  424 |     })
  425 |
  426 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/css-modules/test/index.test.js:423:22)

● CSS Module Composes Usage (External) › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     355 B          78.6 kB
├   └ css/d7b781459b0b11bf.css            144 B
└ ○ /404                                  227 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-95598d058df648c8.js  45.2 kB
  ├ chunks/main-20b97cc7de00b412.js       32 kB
  └ other shared chunks (total)           996 B·
○  (Static)  prerendered as static content·
"

  458 |     it('should have compiled successfully', () => {
  459 |       expect(code).toBe(0)
> 460 |       expect(stdout).toMatch(/Compiled successfully/)
      |                      ^
  461 |     })
  462 |
  463 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/css-modules/test/index.test.js:460:22)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/scss/scss-fixtures/3rd-party-module/3rd-party-module.test.js

3rd Party CSS Module Support > production mode > should have compiled successfully

Expand output

● 3rd Party CSS Module Support › production mode › should have compiled successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "   ▲ Next.js 14.1.1-canary.78·
   Linting and checking validity of types ...
   Creating an optimized production build ...
   Collecting page data ...
   Generating static pages (0/3) ...
 ✓ Generating static pages (3/3)·
   Finalizing page optimization ...
   Collecting build traces ...·
Route (pages)                             Size     First Load JS
┌ ○ /                                     319 B          78.5 kB
├   └ css/6a621f63c3435fbb.css            162 B
└ ○ /404                                  226 B          78.5 kB
+ First Load JS shared by all             78.2 kB
  ├ chunks/framework-93e118dcfaf9dfca.js  45.3 kB
  ├ chunks/main-5297a57243b6a0e9.js       32 kB
  └ other shared chunks (total)           998 B·
○  (Static)  prerendered as static content·
"

  34 |     it('should have compiled successfully', () => {
  35 |       expect(code).toBe(0)
> 36 |       expect(stdout).toMatch(/Compiled successfully/)
     |                      ^
  37 |     })
  38 |
  39 |     it(`should've emitted a single CSS file`, async () => {

  at Object.toMatch (integration/scss/scss-fixtures/3rd-party-module/3rd-party-module.test.js:36:22)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/errors/index.test.ts

app-dir - errors > error component > should trigger error component when an error happens during rendering

Expand output

● app-dir - errors › error component › should trigger error component when an error happens during rendering

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#error-trigger-button')

  421 |     return this.chain(() => {
  422 |       return page
> 423 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  424 |         .then(async (el) => {
  425 |           // it seems selenium waits longer and tests rely on this behavior
  426 |           // so we wait for the load event fire before returning

  at waitForSelector (lib/browsers/playwright.ts:423:10)

Read more about building and testing Next.js in contributing.md.

shuding · 2024-02-28T13:27:06Z

Looks like there're some failing tests 👀

jantimon · 2024-02-28T13:27:40Z

thank you - I will take a look :)

ijjk · 2024-02-28T13:30:18Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
buildDuration	16s	16.1s	N/A
buildDurationCached	8.8s	7.5s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +5.73 kB
nextStartRea..uration (ms)	434ms	418ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
2453-HASH.js gzip	31.4 kB	31.4 kB	N/A
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	✓
8299-HASH.js gzip	5.1 kB	5.1 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	242 B	240 B	N/A
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	99 kB	99 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.27 kB	4.27 kB	✓
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	6.63 kB	6.63 kB	✓

Client Build Manifests

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
index.html gzip	529 B	527 B	N/A
link.html gzip	541 B	540 B	N/A
withRouter.html gzip	524 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
edge-ssr.js gzip	95.6 kB	95.6 kB	N/A
page.js gzip	3.06 kB	3.06 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
middleware-b..fest.js gzip	624 B	626 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	97.5 kB	97.5 kB	✓
app-page-tur..prod.js gzip	99.2 kB	99.2 kB	✓
app-page-tur..prod.js gzip	93.5 kB	93.5 kB	✓
app-page.run...dev.js gzip	145 kB	145 kB	✓
app-page.run..prod.js gzip	92 kB	92 kB	✓
app-route-ex...dev.js gzip	21.4 kB	21.4 kB	✓
app-route-ex..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	15.2 kB	15.2 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route.ru...dev.js gzip	21.1 kB	21.1 kB	✓
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	✓
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	22.5 kB	22.5 kB	✓
pages.runtim...dev.js gzip	23.1 kB	23.1 kB	✓
pages.runtim..prod.js gzip	22.5 kB	22.5 kB	✓
server.runti..prod.js gzip	51.3 kB	51.3 kB	✓
Overall change	948 kB	948 kB	✓

build cache

	vercel/next.js canary	jantimon/next.js optimize-module-selector-bundling	Change
0.pack gzip	1.59 MB	1.58 MB	N/A
index.pack gzip	107 kB	107 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for middleware.js

Diff too large to display

Commit: d0387b4

jantimon · 2024-02-28T13:54:40Z

import { redText } from './red.module.css' in .js files breaks
import styles from './red.module.css' in .js files works

jantimon · 2024-02-28T16:22:30Z

possible solution (in mini-css-extract-plugin) webpack-contrib/mini-css-extract-plugin#1084

sokra · 2024-03-01T07:05:27Z

There might be a problem for this case too: .default { color: red }

sokra · 2024-03-01T07:05:56Z

I guess this should probably behind an experimental flag.

jantimon · 2024-03-01T12:20:23Z

I guess this should probably behind an experimental flag.

Good catch - added the experimental flag.

enable esmodule optimizations for css modules

f6c6bf2

jantimon requested review from timneutkens, ijjk, shuding, huozhi, ztanner, feedthejim and a team as code owners February 28, 2024 10:48

ijjk added the type: next label Feb 28, 2024

Merge branch 'canary' into optimize-module-selector-bundling

480042f

add experimental flag

084f95e

jantimon requested a review from wyattjoh as a code owner March 1, 2024 12:18

ijjk added the Font (next/font) Related to Next.js Font Optimization. label Mar 1, 2024

jantimon and others added 3 commits March 1, 2024 14:42

update schema

11732c8

Merge branch 'canary' into optimize-module-selector-bundling

a4d31b7

Merge branch 'canary' into optimize-module-selector-bundling

d0387b4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enable esmodule optimizations for css modules #62639

enable esmodule optimizations for css modules #62639

jantimon commented Feb 28, 2024

ijjk commented Feb 28, 2024

ijjk commented Feb 28, 2024 •

edited

Loading

ijjk commented Feb 28, 2024 •

edited

Loading

shuding commented Feb 28, 2024

jantimon commented Feb 28, 2024

ijjk commented Feb 28, 2024 •

edited

Loading

jantimon commented Feb 28, 2024 •

edited

Loading

jantimon commented Feb 28, 2024

sokra commented Mar 1, 2024

sokra commented Mar 1, 2024

jantimon commented Mar 1, 2024

enable esmodule optimizations for css modules #62639

Are you sure you want to change the base?

enable esmodule optimizations for css modules #62639

Conversation

jantimon commented Feb 28, 2024

Reproduction Steps

Patch

Patch:

ijjk commented Feb 28, 2024

ijjk commented Feb 28, 2024 • edited Loading

ijjk commented Feb 28, 2024 • edited Loading

Failing test suites

shuding commented Feb 28, 2024

jantimon commented Feb 28, 2024

ijjk commented Feb 28, 2024 • edited Loading

Stats from current PR

jantimon commented Feb 28, 2024 • edited Loading

jantimon commented Feb 28, 2024

sokra commented Mar 1, 2024

sokra commented Mar 1, 2024

jantimon commented Mar 1, 2024

ijjk commented Feb 28, 2024 •

edited

Loading

ijjk commented Feb 28, 2024 •

edited

Loading

ijjk commented Feb 28, 2024 •

edited

Loading

jantimon commented Feb 28, 2024 •

edited

Loading