[NEXT-983] app router CSS handling seems incompatible with CSS Cascade Layers - no way to guarantee that CSS that defines layers can be loaded before any usage of the CSS layers
#47585
Comments
philwolstenholme
changed the title
|
Having the same issue. How can I control/ensure that an imported css file always stays on the top? I use tailwind with some component library. When hot reload happens, the imported css will be always the last before the closing tag - wrecking havoc on my styles. |
|
@philwolstenholme sorry for the delay, was travelling when we first engaged. back now and going to look at this |
|
No need to apologise @gnoff :) Thanks for looking into it. |
philwolstenholme
changed the title
app router CSS handling seems incompatible with CSS Cascade Layers - no way to guarantee that CSS that defines layers can be loaded before any usage of the CSS layers
|
cc @shuding source issue |
|
@philwolstenholme the page css is supposed to be higher precedence than the layout css. we're looking into why it is out of order. The idea is that you would just define your layers in the root layouts css imports. the first import in that file should go first when we render the page and therefore you should have a stable order for your layers. For some reason the page css is being ordered first which is not expected. Once we fix the ordering I believe you should have all the tools necessary to stage the layers yourself without any special purpose APIs Thanks for bringing to our attention |
Perfect, that sounds like the behaviour I had expected/hoped for when I tried this out for the first time. Thanks for picking this up 🙂 |
shuding
added
the
linear: next
shuding
changed the title
app router CSS handling seems incompatible with CSS Cascade Layers - no way to guarantee that CSS that defines layers can be loaded before any usage of the CSS layersapp router CSS handling seems incompatible with CSS Cascade Layers - no way to guarantee that CSS that defines layers can be loaded before any usage of the CSS layers
### What?
This PR fixes misordered CSS `<link>` tags. CSS imports in inner layers
(e.g. a page) should always take precedence over outer layers (e.g. root
layout), but currently it's reversed.
### Why?
In layouts we usually define more general styles like globals, resets,
and layout specific things. And in inner layers and pages, things need
to be more detailed and override upper layers if there're any conflicts.
Previously we defined the component segment as
```tsx
<>
<Component {...props} />
{assets}
</>
```
which is necessary because of `findDOMNode` - if we put `assets` before
the component, we can't find the correct scrolling DOM and position for
that layer.
However, with `assets` being the last Float will receive the reversed
order of resources.
### How?
I changed the `createComponentTree` function to return a `Component` and
`assets` pair, so in the Layout Router they're no longer passed to the
scroll wrapper altogether but separately.
Closes NEXT-983
Fixes #47585, fixes #46347.
fix NEXT-656
---------
Co-authored-by: JJ Kasper <jj@jjsweb.site>
|
Looks like this might have a follow-up: #48807 |
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
(I'm not 100% sure if this is a Next issue or a RSC/React core issue)
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/next-js-css-cascade-layers-hkqesn
To Reproduce
<head>and note that the button background colours change. Now the 'state' styling has taken over the background colour – this is what we want!Describe the Bug
CSS Cascade Layers are an exciting feature in CSS with strong browser support. An example use case would be to make sure that utility classes could always override component styles, or that local styles could override imported shared company-wide styles to allow modifications on a per-app basis.
The order that the browser discovers layers is very important. Users of CSS cascade layers and Next.js need a way to define their layers before any other CSS is encountered by the browser, or else the order of the layers that the browser picks may not be what the developer wanted.
This seems difficult at the moment as layout CSS appears in the DOM after per-page or per-component styles:
Workarounds
To make sure it comes first I’ve had to add a new CSS file containing the layer definitions (e.g.
@layer default, theme, state;) to my public directory, and import it with aprecedenceprop that isn’t in the types :( This is a shame as it's a non-standard way of doing things and the file now isn't processed in the same way as my other CSS files:I am also considering undoing the above, but using https://github.com/ramonvictor/postcss-prepend-imports to import a CSS file that defines the layers into every CSS file, so it doesn't matter which one the browser encounters first. I'd rather not do this because of the unnecessary bytes.
Expected Behavior
I'd love any of these:
<link>element with aprecedenceprop value that will make it appear in the DOM order before any otherlink type="stylesheet"elements<style>@layer default, theme, state;</style>) that will appear in the DOM order before anylink type="stylesheet"elementsWhich browser are you using? (if relevant)
N/A
How are you deploying your application? (if relevant)
N/A
NEXT-983
The text was updated successfully, but these errors were encountered: