Skip to content

New CSS chunking algorithm#63157

Merged
timneutkens merged 23 commits intocanaryfrom
sokra/css-order
Mar 18, 2024
Merged

New CSS chunking algorithm#63157
timneutkens merged 23 commits intocanaryfrom
sokra/css-order

Conversation

@sokra
Copy link
Member

@sokra sokra commented Mar 11, 2024 •
edited
Loading

What?

This fixes more CSS ordering issues with production and webpack dev.

  • CSS Modules must not be side effect free as side effect free modules are per definition order independent which is not true for CSS
  • fix order of iterating module references
  • disable splitChunks for CSS
  • special chunking for CSS with loose and strict mode
  • more test cases

Closes PACK-2709

@ijjk
Copy link
Member

ijjk commented Mar 11, 2024 •
edited
Loading

Tests Passed

@ijjk
Copy link
Member

ijjk commented Mar 11, 2024 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/css-order Change
buildDuration 13.9s 13.7s N/A
buildDurationCached 8.3s 6.2s N/A
nodeModulesSize 198 MB 198 MB ⚠️ +30.6 kB
nextStartRea..uration (ms) 439ms 412ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sokra/css-order Change
2453-HASH.js gzip 30.4 kB 30.4 kB N/A
3304.HASH.js gzip 181 B 181 B ✓
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB N/A
8299-HASH.js gzip 5.04 kB 5.04 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB ✓
main-app-HASH.js gzip 242 B 241 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 45.4 kB 45.4 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sokra/css-order Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary vercel/next.js sokra/css-order 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.21 kB 4.21 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.57 kB 6.57 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js sokra/css-order Change
_buildManifest.js gzip 481 B 484 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js sokra/css-order Change
index.html gzip 529 B 529 B ✓
link.html gzip 542 B 541 B N/A
withRouter.html gzip 525 B 523 B N/A
Overall change 529 B 529 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sokra/css-order Change
edge-ssr.js gzip 95.1 kB 95.1 kB N/A
page.js gzip 3.05 kB 3.04 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js sokra/css-order Change
middleware-b..fest.js gzip 626 B 624 B N/A
middleware-r..fest.js gzip 151 B 151 B ✓
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 990 B 990 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js sokra/css-order Change
app-page-exp...dev.js gzip 171 kB 171 kB ✓
app-page-exp..prod.js gzip 96.6 kB 96.6 kB ✓
app-page-tur..prod.js gzip 98.3 kB 98.3 kB ✓
app-page-tur..prod.js gzip 92.8 kB 92.8 kB ✓
app-page.run...dev.js gzip 149 kB 149 kB ✓
app-page.run..prod.js gzip 91.3 kB 91.3 kB ✓
app-route-ex...dev.js gzip 21.3 kB 21.3 kB ✓
app-route-ex..prod.js gzip 15 kB 15 kB ✓
app-route-tu..prod.js gzip 15 kB 15 kB ✓
app-route-tu..prod.js gzip 14.8 kB 14.8 kB ✓
app-route.ru...dev.js gzip 21 kB 21 kB ✓
app-route.ru..prod.js gzip 14.8 kB 14.8 kB ✓
pages-api-tu..prod.js gzip 9.52 kB 9.52 kB ✓
pages-api.ru...dev.js gzip 9.8 kB 9.8 kB ✓
pages-api.ru..prod.js gzip 9.52 kB 9.52 kB ✓
pages-turbo...prod.js gzip 22.3 kB 22.3 kB ✓
pages.runtim...dev.js gzip 22.9 kB 22.9 kB ✓
pages.runtim..prod.js gzip 22.3 kB 22.3 kB ✓
server.runti..prod.js gzip 50.6 kB 50.6 kB ✓
Overall change 948 kB 948 kB ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/css-order Change
0.pack gzip 1.55 MB 1.55 MB N/A
index.pack gzip 105 kB 105 kB ⚠️ +237 B
Overall change 105 kB 105 kB ⚠️ +237 B
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Commit: 1b4fca5

@sokra sokra force-pushed the sokra/css-order branch from 6c0cc42 to 7355a2f Compare March 12, 2024 15:40
@sokra sokra force-pushed the sokra/css-order branch from 27db561 to 2f3de38 Compare March 12, 2024 21:46
@sokra sokra marked this pull request as ready for review March 12, 2024 22:18
@sokra sokra requested review from ijjk and timneutkens as code owners March 12, 2024 22:18
@timneutkens timneutkens merged commit 46a5882 into canary Mar 18, 2024
@timneutkens timneutkens deleted the sokra/css-order branch March 18, 2024 09:29
@samcx samcx mentioned this pull request Mar 18, 2024
Closed
1 task
@github-actions github-actions bot added the locked label Apr 1, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@timneutkens timneutkens timneutkens approved these changes

@ijjk ijjk Awaiting requested review from ijjk

@shuding shuding Awaiting requested review from shuding

@huozhi huozhi Awaiting requested review from huozhi

@ztanner ztanner Awaiting requested review from ztanner

@feedthejim feedthejim Awaiting requested review from feedthejim

@wyattjoh wyattjoh Awaiting requested review from wyattjoh

Assignees

No one assigned

Labels

created-by: Turbopack team PRs by the Turbopack team. locked type: next

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sokra @ijjk @timneutkens