enable esmodule optimizations for css modules by jantimon · Pull Request #62639 · vercel/next.js

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/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 a team, feedthejim, huozhi, ijjk, shuding, timneutkens and ztanner 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 wants to merge 6 commits intovercel:canaryfrom
jantimon:optimize-module-selector-bundling

jantimon commented Feb 28, 2024

Uh oh!

ijjk commented Feb 28, 2024

Uh oh!

ijjk commented Feb 28, 2024 •

edited

Loading

Uh oh!

ijjk commented Feb 28, 2024 •

edited

Loading

Uh oh!

shuding commented Feb 28, 2024

Uh oh!

jantimon commented Feb 28, 2024

Uh oh!

ijjk commented Feb 28, 2024 •

edited

Loading

Uh oh!

jantimon commented Feb 28, 2024 •

edited

Loading

Uh oh!

jantimon commented Feb 28, 2024

Uh oh!

sokra commented Mar 1, 2024

Uh oh!

sokra commented Mar 1, 2024

Uh oh!

jantimon commented Mar 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

jantimon commented Feb 28, 2024

Reproduction Steps

Patch

Patch:

Uh oh!

ijjk commented Feb 28, 2024

Uh oh!

ijjk commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ijjk commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

shuding commented Feb 28, 2024

Uh oh!

jantimon commented Feb 28, 2024

Uh oh!

ijjk commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

Uh oh!

jantimon commented Feb 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jantimon commented Feb 28, 2024

Uh oh!

sokra commented Mar 1, 2024

Uh oh!

sokra commented Mar 1, 2024

Uh oh!

jantimon commented Mar 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

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