Wrap CSS chunk items in a @layer (#3542)
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.
