-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wrap CSS chunk items in a @layer #3542
Wrap CSS chunk items in a @layer #3542
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
8 Ignored Deployments
|
write!(s, " ({layer})")?; | ||
} | ||
} | ||
Ok(ModuleId::String(s).cell()) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This implementation is shared with EcmascriptChunkContextVc
.
Benchmark for 31b19dbClick to view benchmark
|
|
Adding this comment from @sokra if another issue arises in the future:
|
4c1c09b
to
cd47b8b
Compare
crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js
Outdated
Show resolved
Hide resolved
cd47b8b
to
512ad61
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. We should keep in mind that this currently breaks users using @layer
. We can later fix that by moving our @layer
into the user layer.
crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js
Outdated
Show resolved
Hide resolved
Benchmark for cf4a3e2
Click to view full benchmark
|
8b6c84e
to
43d96bb
Compare
43d96bb
to
4c9cfa7
Compare
Benchmark for a2fa9d7
Click to view full benchmark
|
In Turbopack, as a consequence of our lazy compilation model, CSS chunks can contain duplicate CSS chunk items. This can cause issues with precedence. Take the following example: Initial CSS chunk: ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ /* other chunk item */ h1 { font-size: 4rem; } /* ... */ ``` Dynamic CSS chunk (loaded after the first page load completes) ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ ``` In this example, when the page first loads, the following rule will be applied: ```css h1 { font-size: 4rem; } ``` But as soon as the dynamic CSS chunk loads, the following rule will be applied instead: ```css h1 { font-size: 2rem; } ``` However, from the order of rules in the initial load, we know that the former should still apply. We can remedy this particular issue by wrapping each CSS chunk item into its own [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) (thanks @sokra for the idea!). This ensures that when a CSS chunk item is re-encountered at a later time, it is automatically de-duplicated thanks to the inherent CSS layering algorithm. This is not an issue in Next.js as we can't have duplicated CSS chunk items.
…49736102+kodiakhq[bot]@users.noreply.github.com> # New Features - vercel/turbo#3540 - vercel/turbo#3549 - vercel/turbo#3465 - vercel/turbo#3550 - vercel/turbo#3495 - vercel/turbo#3624 - vercel/turbo#3600 - vercel/turbo#3676 - vercel/turbo#3689 # Fixes - vercel/turbo#3437 - vercel/turbo#3542 - vercel/turbo#3531 - vercel/turbo#3552 - vercel/turbo#3551 - vercel/turbo#3597 - vercel/turbo#3644 - vercel/turbo#3623 - vercel/turbo#3634 - vercel/turbo#3574 - vercel/turbo#3673 - vercel/turbo#3675 - vercel/turbo#3723 - vercel/turbo#3677 - vercel/turbo#3717 - vercel/turbo#3701 # Performance Improvements - vercel/turbo#3361 - vercel/turbo#3619 --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
In Turbopack, as a consequence of our lazy compilation model, CSS chunks can contain duplicate CSS chunk items. This can cause issues with precedence. Take the following example: Initial CSS chunk: ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ /* other chunk item */ h1 { font-size: 4rem; } /* ... */ ``` Dynamic CSS chunk (loaded after the first page load completes) ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ ``` In this example, when the page first loads, the following rule will be applied: ```css h1 { font-size: 4rem; } ``` But as soon as the dynamic CSS chunk loads, the following rule will be applied instead: ```css h1 { font-size: 2rem; } ``` However, from the order of rules in the initial load, we know that the former should still apply. We can remedy this particular issue by wrapping each CSS chunk item into its own [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) (thanks @sokra for the idea!). This ensures that when a CSS chunk item is re-encountered at a later time, it is automatically de-duplicated thanks to the inherent CSS layering algorithm. This is not an issue in Next.js as we can't have duplicated CSS chunk items.
In Turbopack, as a consequence of our lazy compilation model, CSS chunks can contain duplicate CSS chunk items. This can cause issues with precedence. Take the following example: Initial CSS chunk: ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ /* other chunk item */ h1 { font-size: 4rem; } /* ... */ ``` Dynamic CSS chunk (loaded after the first page load completes) ```css /* ... */ /* chunk item A */ h1 { font-size: 2rem; } /* ... */ ``` In this example, when the page first loads, the following rule will be applied: ```css h1 { font-size: 4rem; } ``` But as soon as the dynamic CSS chunk loads, the following rule will be applied instead: ```css h1 { font-size: 2rem; } ``` However, from the order of rules in the initial load, we know that the former should still apply. We can remedy this particular issue by wrapping each CSS chunk item into its own [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) (thanks @sokra for the idea!). This ensures that when a CSS chunk item is re-encountered at a later time, it is automatically de-duplicated thanks to the inherent CSS layering algorithm. This is not an issue in Next.js as we can't have duplicated CSS chunk items.
### Description The fix introduced in #3542 was a workaround for CSS in dynamic imports being included multiple times in a page, potentially overriding precedence of earlier chunks, but introduced its own precedence issue (the semantics of `@layer` are not fully compatible with our use case). This is no longer necessary since #4056 made it so dynamic imports no longer include items from the parent chunk. ### Testing Instructions create-next-app with app support now looks visually identical with and without --turbo. Snapshots.
In Turbopack, as a consequence of our lazy compilation model, CSS chunks can contain duplicate CSS chunk items. This can cause issues with precedence. Take the following example:
Initial CSS chunk:
Dynamic CSS chunk (loaded after the first page load completes)
In this example, when the page first loads, the following rule will be applied:
But as soon as the dynamic CSS chunk loads, the following rule will be applied instead:
However, from the order of rules in the initial load, we know that the former should still apply.
We can remedy this particular issue by wrapping each CSS chunk item into its own
@layer
(thanks @sokra for the idea!). This ensures that when a CSS chunk item is re-encountered at a later time, it is automatically de-duplicated thanks to the inherent CSS layering algorithm.This is not an issue in Next.js as we can't have duplicated CSS chunk items.