-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
New themes: @layer tag priority #5362
Comments
I do not think these issues are related. I also face the same issue. My company's app is huge and has a bunch of imported stylings (css/scss), and sometimes we override css rules in the many components using specificity. In the current state of our app, it is Impossible for us to use the css @layer feature, hence not possible as well to use the v10 of primereact. It is a real pity because I promoted primereact a lot within my company so that it slowly becomes our main react library. So not being able to use simple css import like post v10 is a real pain. |
@jerlam06 its possible all i had to do in my large company app was wrap my CSS with... @layer primereact {
...
} And your CSS should all go back to being correct. |
@melloware Thanks, that's actually working. But still need to go through the whole application to check if nothing is broken. Would be great to let us the possibility to import the whole css library like it used to be. |
They are working on that but for now I provided a workaround: #5188 (comment) |
@jerlam06 Hey Jerlam, i found a workaround, maybe it would be useful for your case. |
@melloware what if my org is using scss and in the main.scss its kind of importing all the scss files, how should i approach in this case to rectify the layer issue |
It has been so long now, and this workaround is not working on my side. |
@C0ZEN what doesn't work? What platform are you using to do builds CRA? Vite? NextJS? |
Vite. |
got it |
Describe the bug
Hey guys, I'm wondering - is it possible to divide theme into separate (possible scss) files to provide more flexible way to use it?
Current behaviour - we have a project with mixed styles (bootstrap, tailwind, pure CSS and primereact). Once new @layer options were added in theme css files, it automatically drop CSS rules priority according to "root" css styles, and this change smashed all primereact stylings in the project.
Possible solutions:
Provide several CSS theme "builds" without this @layer rule defined
Provide SCSS (or any other preprocessors) sources with construction like "@import "./theme_core.scss" layer(primereact)". It will allow to inject this styles directly into the projects with mixed stylings like ours (use direct theme_core.scss file).
https://github.com/primefaces/primereact/blob/master/public/themes/lara-light-indigo/theme.css#L292
Reproducer
No response
PrimeReact version
10.1.1
React version
18.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
Steps to reproduce the behavior
No response
Expected behavior
No response
The text was updated successfully, but these errors were encountered: