feat(turbopack): Enable `lightningcss` for turbopack by default #62565

kdy1 · 2024-02-27T03:41:32Z

Turbopack

What?

Enable lightningcss by default, for --turbo mode.

Why?

It's time to do it 😄

How?

Turbopack counterpart: vercel/turbo#7524

Closes PACK-2600

ijjk · 2024-02-27T04:25:26Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
buildDuration	13.7s	13.7s	N/A
buildDurationCached	7.3s	6.2s	N/A
nodeModulesSize	198 MB	198 MB	⚠️ +634 B
nextStartRea..uration (ms)	436ms	433ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
2453-HASH.js gzip	30.5 kB	30.5 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	242 B	✓
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.6 kB	45.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	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 kdy1/lcss-on	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 kdy1/lcss-on	Change
index.html gzip	528 B	529 B	N/A
link.html gzip	539 B	541 B	N/A
withRouter.html gzip	523 B	523 B	✓
Overall change	523 B	523 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
edge-ssr.js gzip	95.1 kB	95.1 kB	N/A
page.js gzip	3.06 kB	3.07 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
middleware-b..fest.js gzip	626 B	625 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 kdy1/lcss-on	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	96.5 kB	96.5 kB	✓
app-page-tur..prod.js gzip	98.3 kB	98.3 kB	✓
app-page-tur..prod.js gzip	92.7 kB	92.7 kB	✓
app-page.run...dev.js gzip	149 kB	149 kB	✓
app-page.run..prod.js gzip	91.2 kB	91.2 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.5 kB	50.5 kB	✓
Overall change	948 kB	948 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js kdy1/lcss-on	Change
0.pack gzip	1.56 MB	1.56 MB	N/A
index.pack gzip	105 kB	106 kB	⚠️ +792 B
Overall change	105 kB	106 kB	⚠️ +792 B

Diff details

Diff for middleware.js

Diff too large to display

Commit: cc472e4

ijjk · 2024-02-27T06:13:14Z

Failing test suites

Commit: 1069fda

pnpm test-dev test/e2e/app-dir/actions/app-action.test.ts

app-dir action handling > HMR > should support updating the action

Expand output

● app-dir action handling › HMR › should support updating the action

expect(received).toBe(expected) // Object.is equality

Expected: "0"
Received: "Server Error"

  585 |
  586 |             const cnt = await browser.elementByCss('h1').text()
> 587 |             expect(cnt).toBe('0')
      |                         ^
  588 |
  589 |             await browser.elementByCss('#inc').click()
  590 |             await check(() => browser.elementByCss('h1').text(), '1')

  at Object.toBe (e2e/app-dir/actions/app-action.test.ts:587:25)

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

sokra · 2024-02-28T08:28:05Z

packages/next/src/server/config-schema.ts

@@ -375,7 +375,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
        bundlePagesExternals: z.boolean().optional(),
        staticWorkerRequestDeduping: z.boolean().optional(),
        useWasmBinary: z.boolean().optional(),
-        useLightningcss: z.boolean().optional(),
+        useSwcCssForTurbopack: z.boolean().optional(),


I guess we should move it to experimental.turbo.useSwcCss

I guess we should move it to experimental.turbo.useSwcCss

test/e2e/app-dir/next-font/next-font.test.ts

sokra · 2024-03-07T09:20:15Z

test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap

 > 1 | @import "./boom.css"
-    |         ^^^^^^^^^^^^
+    |  ^


The spans where better before

lightningcss does not provide any span information to fix this regression.
It only stores the starting location.

sokra · 2024-03-07T09:20:38Z

test/development/acceptance-app/__snapshots__/ReactRefreshLogBox.test.ts.snap

+"./index.module.css
 Parsing css source code failed
-> 1 | button {}
-    | ^^^^^^
-
-Selector is not pure (pure selectors must contain at least one local class or id)"
+Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))"


This is missing line and column info

lightingcss does not provide span information here because it is backed by cssparser and selectors, which are developed by the servo team.

kdy1 self-assigned this Feb 27, 2024

kdy1 requested review from timneutkens, ijjk, shuding, huozhi, a team, feedthejim, ztanner and wyattjoh as code owners February 27, 2024 03:41

ijjk added Turbopack Related to Turbopack with Next.js. created-by: Turbopack team PRs by the turbopack team type: next labels Feb 27, 2024

kdy1 marked this pull request as draft February 27, 2024 03:41

kdy1 mentioned this pull request Feb 27, 2024

feat(turbopack): Enable lightningcss for turbopack by default vercel/turbo#7524

Merged

ijjk added area: tests Font (next/font) Related to Next.js Font Optimization. labels Feb 27, 2024

kdy1 force-pushed the kdy1/lcss-on branch 2 times, most recently from e52a955 to 1b9d9d5 Compare February 28, 2024 06:30

sokra reviewed Feb 28, 2024

View reviewed changes

test/e2e/app-dir/next-font/next-font.test.ts Outdated Show resolved Hide resolved

kdy1 force-pushed the kdy1/lcss-on branch 3 times, most recently from 5cb2087 to 1069fda Compare March 6, 2024 05:58

sokra reviewed Mar 7, 2024

View reviewed changes

kdy1 force-pushed the kdy1/lcss-on branch 3 times, most recently from 955bee9 to c718e93 Compare March 8, 2024 00:04

kdy1 added 13 commits March 11, 2024 11:26

Update tests

07c3723

typo

f7610aa

Update tests

800626a

Update test

a9f1d6e

Update test

3b7debd

Update test

16017d9

Update snapshot

5c1f6d2

Fix diff

c1cb2ea

swc_css

5a9648e

namespace

46379eb

Rename

f0a5ed0

Revert

6250b64

link next.js

8f0ef8b

kdy1 force-pushed the kdy1/lcss-on branch from f0220dc to 8f0ef8b Compare March 11, 2024 02:27

kdy1 marked this pull request as ready for review March 11, 2024 02:27

kdy1 requested a review from a team as a code owner March 11, 2024 02:27

kdy1 marked this pull request as draft March 11, 2024 02:28

move

02aa99d

kdy1 marked this pull request as ready for review March 11, 2024 02:30

revert

e95e189

sokra approved these changes Mar 11, 2024

View reviewed changes

kdy1 added 3 commits March 11, 2024 14:42

Update test regex

fc90c5a

Fix a test

623719b

Update jest snapshot

1416ebd

kdy1 enabled auto-merge (squash) March 11, 2024 05:49

Update jest snapshot

cc472e4

kdy1 merged commit d55699d into canary Mar 11, 2024
68 checks passed

kdy1 deleted the kdy1/lcss-on branch March 11, 2024 06:49

github-actions bot added the locked label Mar 25, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(turbopack): Enable `lightningcss` for turbopack by default #62565

feat(turbopack): Enable `lightningcss` for turbopack by default #62565

kdy1 commented Feb 27, 2024 •

edited

ijjk commented Feb 27, 2024 •

edited

ijjk commented Feb 27, 2024 •

edited

sokra Feb 28, 2024

sokra Mar 7, 2024

sokra Mar 7, 2024

kdy1 Mar 7, 2024

sokra Mar 7, 2024

kdy1 Mar 7, 2024 •

edited

feat(turbopack): Enable lightningcss for turbopack by default #62565

feat(turbopack): Enable lightningcss for turbopack by default #62565

Conversation

kdy1 commented Feb 27, 2024 • edited

Turbopack

What?

Why?

How?

ijjk commented Feb 27, 2024 • edited

Stats from current PR

ijjk commented Feb 27, 2024 • edited

Failing test suites

sokra Feb 28, 2024

Choose a reason for hiding this comment

sokra Mar 7, 2024

Choose a reason for hiding this comment

sokra Mar 7, 2024

Choose a reason for hiding this comment

kdy1 Mar 7, 2024

Choose a reason for hiding this comment

sokra Mar 7, 2024

Choose a reason for hiding this comment

kdy1 Mar 7, 2024 • edited

Choose a reason for hiding this comment

feat(turbopack): Enable `lightningcss` for turbopack by default #62565

feat(turbopack): Enable `lightningcss` for turbopack by default #62565

kdy1 commented Feb 27, 2024 •

edited

ijjk commented Feb 27, 2024 •

edited

ijjk commented Feb 27, 2024 •

edited

kdy1 Mar 7, 2024 •

edited