Wrap CSS chunk items in a @layer #3542
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
8 Ignored Deployments
|
alexkirsz
commented
Jan 31, 2023
| write!(s, " ({layer})")?; | ||
| } | ||
| } | ||
| Ok(ModuleId::String(s).cell()) |
There was a problem hiding this comment.
This implementation is shared with EcmascriptChunkContextVc.
Benchmark for 31b19dbClick to view benchmark
|
|
|
Adding this comment from @sokra if another issue arises in the future:
|
alexkirsz
force-pushed
the
alexkirsz/web-456-client-adds-css-modules-stylesheets-not
branch
from
4c1c09b
to
cd47b8b
Compare
wbinnssmith
reviewed
Jan 31, 2023
crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js
Outdated
Show resolved
Hide resolved
alexkirsz
force-pushed
the
alexkirsz/web-456-client-adds-css-modules-stylesheets-not
branch
from
cd47b8b
to
512ad61
Compare
sokra
approved these changes
Jan 31, 2023
wbinnssmith
reviewed
Jan 31, 2023
crates/next-dev-tests/tests/integration/next/font-google/basic/pages/index.js
Outdated
Show resolved
Hide resolved
wbinnssmith
approved these changes
Jan 31, 2023
Benchmark for cf4a3e2
Click to view full benchmark
|
alexkirsz
force-pushed
the
alexkirsz/web-456-client-adds-css-modules-stylesheets-not
branch
from
8b6c84e
to
43d96bb
Compare
alexkirsz
force-pushed
the
alexkirsz/web-456-client-adds-css-modules-stylesheets-not
branch
from
43d96bb
to
4c9cfa7
Compare
Benchmark for a2fa9d7
Click to view full benchmark
|
alexkirsz
deleted the
alexkirsz/web-456-client-adds-css-modules-stylesheets-not
branch
mehulkar
pushed a commit
that referenced
this pull request
Feb 1, 2023
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.
timneutkens
pushed a commit
to vercel/next.js
that referenced
this pull request
Feb 10, 2023
…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>
jridgewell
pushed a commit
to vercel/next.js
that referenced
this pull request
Mar 10, 2023
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.
sokra
pushed a commit
to vercel/next.js
that referenced
this pull request
Mar 13, 2023
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.
Merged
kodiakhq bot
pushed a commit
that referenced
this pull request
Mar 14, 2023
### 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.