New themes: @layer tag priority

[am0nshi]

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

[melloware]

Related to: #5124

Related to: #4987

[jerlam06]

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.
So the question of the author is: is there a way to use css like we used to do before v10?

[melloware]

@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.

[jerlam06]

@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.

[melloware]

They are working on that but for now I provided a workaround: #5188 (comment)

[am0nshi]

@jerlam06 Hey Jerlam, i found a workaround, maybe it would be useful for your case.
There is separate repo with SCSS source files, key points you could find here:
https://github.com/primefaces/primereact-sass-theme/blob/main/themes/lara/lara-light/indigo/theme.scss
https://github.com/primefaces/primereact-sass-theme/blob/main/theme-base/_components.scss#L6
So, you could re-combine manually the theme for your purposes

[shubhsaur]

@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 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

[C0ZEN]

They are working on that but for now I provided a workaround: #5188 (comment)

It has been so long now, and this workaround is not working on my side.
I'm still unable to migrate to Prime 10...

[melloware]

@C0ZEN what doesn't work? What platform are you using to do builds CRA? Vite? NextJS?

[C0ZEN]

@C0ZEN what doesn't work? What platform are you using to do builds CRA? Vite? NextJS?

Vite.
The workaround that you provided is actually improving the UI, but it's not enough in my case due to other third libraries imports that don't suit well with the layer changes.

[melloware]

got it