Add Support for Cascade Layers #43525
Replies: 6 comments 2 replies
-
|
https://www.npmjs.com/package/postcss-import will help you out here, but you might run into #47585 depending on your setup |
Beta Was this translation helpful? Give feedback.
-
|
@kyle-jorve were you able to resolve this issue? |
Beta Was this translation helpful? Give feedback.
-
|
@PixeledCode I went with a different method of using cascade layers, so I haven't tried anything new. Maybe this is solved in newer versions of Next, but I don't know. 🤷♀️ |
Beta Was this translation helpful? Give feedback.
-
|
Not solved. I'm still facing issue with imported cascade layer is not working. |
Beta Was this translation helpful? Give feedback.
-
|
What I did was put styles into cascade layers inside each stylesheet, then import them into a single stylesheet like this: This way the layer order is established by the order of the imports. It's not ideal, but it works. |
Beta Was this translation helpful? Give feedback.
-
|
Next.js version: 15.2.1-canary.5 This fix @layer priority for me, because next build add global css to the end of file. |
Beta Was this translation helpful? Give feedback.
-
|
Issue here: #55763 |
Beta Was this translation helpful? Give feedback.
-
|
With the release of Tailwind v4, this is now more urgent as the ecosystem upgrades to this version that makes heavy use of CSS Cascade Layers. In our projects, our apps typically import styles from some dependencies, then generate Tailwind styles that we often use to override those dependencies' styles. With Tailwind v3, CSS source order permitted this: @import url(~package/styles.css);
/* Style generated here can override package styles (above) thanks to source order */
@tailwind base;
@tailwind components;
@tailwind utilities;With Tailwind v4, however, Tailwind-generated styles are all wrapped in CSS layers (e.g. @import url(~package/styles.css);
/* These styles are now layered, so cannot override package styles (above) */
@import "tailwindcss";A straightforward fix for this would be to specify the layer to import dependency styles into: @layer theme, base, components, utilities;
@import url(~package/styles.css) layer(components);
/* Styles in the 'utilities' layer will now override package styles (above) */
@import "tailwindcss";…but this is not supported in Next.js. So the only work-around is, as @kyle-jorve noted, is to update the dependencies' styles to wrap them in |
Beta Was this translation helpful? Give feedback.
-
Verify canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.17.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.5
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0
What browser are you using? (if relevant)
Chrome Version 107.0.5304.107
How are you deploying your application? (if relevant)
No response
Describe the Bug
I've created an _index.css file which I am importing into _app.tsx, like so:
import "../styles/base/_index.css";In _index.css I'm importing stylesheets into layers, like so:
However, when I run the dev environment, this is the result:
This leads me to believe that Next does not yet support cascade layers.
Expected Behavior
A cascade layer shouldn't be added to the media attribute of a style tag. Rather, the styles themselves should be wrapped in the layer declaration. Example:
Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
https://github.com/kyle-jorve/portfolio-site-next
To Reproduce
Run
npm run dev. Inspect the stylesheets in the<head>.Beta Was this translation helpful? Give feedback.
All reactions