New @layer implementation

[tugcekucukoglu]

No description provided.

[riskysciolism]

This indeed IS a breaking change! Custom CSS styles declared outside of a layer will override styles declared in a layer, regardless of specificity!

[zakainsworth]

This is very frustrating. As @riskysciolism mentioned, this IS a breaking change! The use of PrimeVue with Bootstrap 4 is broken after this update as Bootstrap 4 does not use layers.

[Flink91]

This is a breaking change for our team too, would've been nice to see that immediately

[sven-meye]

From my point of view, this is also a breaking change that can have significant impacts on the organization of styling. Unfortunately, the change affects us as well. In our case, the border-radius in p-buttonset is no longer overwritten, as our previous implementation defined a general border-radius outside of a layer.

[dt-ebermudez]

Hi

How is this new feature implemented? @tugcekucukoglu @cagataycivici

[cjbathras]

For those of us forced to support older browsers (my customer uses Chrome 79... don't ask why, just accept that they are waaay behind the times) this is a breaking change that took me the last two days to track down. Would be great if there was a way to toggle whether we want to use this feature or not.

[matthew-dean]

Please roll this back. This lowers specificity below any styles that are declared globally. This means that if, for example, someone has a "normalize" stylesheet that sets a ul to have a bottom margin (which is extremely common), then when PrimeVue attempts to set something like a dropdown's list items to not have a margin, it WILL NOT APPLY.

See the following:

An existing Bootstrap or normalize CSS will override anything now defined in PrimeVue's CSS.

[matthew-dean]

Note that even if the PrimeVue team is committed to @layer (which no one using CSS should use unless they have complete control of ALL current and future CSS in their app), at the very least, this is a violation of semver, and should be rolled back in favor of a 4.0 release that (hopefully optionally) uses @layer.

[zakainsworth]

@tugcekucukoglu Do you have any response to these comments?

[philgruneich]

The @layer implementation is also breaking our project's code, with reset.css styles overriding PrimeVue styles. As mentioned before, this should be reserved to a 4.0 release instead.

[joakimc]

Same for my team regarding the @layer implementation. We are using our apps as children of a parent app belonging to another company, and things are breaking hard due to global styling like resets.

[milanio]

The @layer implementation is also breaking our code - we are using PrimeVue inside an app which needs to support Android 6.0. and Android System WebView (Chromium 95 based). As @layer is only supported from version Chrome 99, our app completely broke after minor PrimeVue update from 3.29 -> 3.47. Can this be somehow turned off?

[Anubarak]

Any way to turn that off?
It broke all our apps too. We either have to change our CSS or cannot update anymore.

Why are all complains ignored?

[riskysciolism]

For those who are still struggling. We solved our problem by explicitly assigning a layer to our own CSS styles and defining the order of the layers. I know this is annoying, but it solves the problem of overwriting. What bothers me is that this is still not marked as a breaking change.

@layer owncss, primevue;

@import url('primevue/theme.css');

@layer owncss { .class1.. }

[matthew-dean]

@riskysciolism Yes, that's ultimately what I did as well. The thing about the @layer feature is that if anything, anything at all in your CSS anywhere is using @layer, then EVERY PIECE OF CSS MUST BE WRAPPED IN @layer. There are no workarounds. The CSS @layer feature has no "opt-in" strategy. It's either all layers, or nothing uses layers.

So that's what I did. I wrapped any normalization or reset styles, custom styles, or just app specific styles in layers, and set the layer order. At the end of the day, once I figured it out, it wasn't necessarily that much work, but:

1. That of course still means this was a breaking change, so incorrect to release it ad-hoc in a minor version.
2. PrimeVue should have had a more extensive migration guide and release notes on this particular feature.

The fact that PrimeVue developers didn't do the above means they probably didn't fully understand @layer, which means they probably shouldn't have used it without fully understanding the implications, but 🤷

[vzakharov]

I’m so glad I found this thread. It broke my mind why everything all of a sudden started being super-ugly whenever I update. (For the record, the last normally working version for me was 3.43.0.) I still haven’t figured out how to fix this, but hopefully this thread will help. It’s mind-boggling how the team decided to make this a “minor” release.

[mattanger]

Adding another +1 to hopefully help highlight that this a BREAKING CHANGE, and there's nearly no documentation on it.

Thanks to @matthew-dean and @riskysciolism for the comments regarding wrapping everything in @layer. The fix itself didn't end up being that time consuming, but tracking down the cause was.

It's wild that a minor version update completely breaks the styles for this many people, and there's not even a hit of the possibility. It's hard to consider using primevue in the future when things like this happen.

[FVolral]

I had to rollback to previous version. I use bootstrap 4 and it breaks everything. I tried to set my reset.css in @layer, tried many solutions, lost a lot of time with it

[matthew-dean]

@FVolral If you have questions about this, let me know! I joined the PrimeFaces Discord, so you should be able to message me in there? 🤔 (I don't use DIscord very much, so I'm not sure.)

In short, though, if you wrap everything, and I mean everything, in a @layer, you can eventually get this to work. One quick way to get Bootstrap wrapped in @layer is to use a pre-processor like Less.js and wrap the Boostrap import in a @layer rule.

[FVolral]

@matthew-dean I finally managed to make it works. To do so, I had to migrate from Vue CLI to Vite in order to get rid of WebPack, which was generating a bundle that messed up the cascade layer order when in production.

[riskysciolism]

As a preliminary information and possible relief, it looks like CSS layers will be optional as of version 4.
Excerpt from the documentation: " In styled mode, when the cssLayer option is enabled at theme configuration, PrimeVue wraps the built-in style classes under the primevue cascade layer" and "The cssLayer is disabled by default to avoid compatibility issues with 3rd party CSS libraries [...]"

Take this with a grain of salt as I have not yet tested this and as version 4 is still in beta, this may of course still change.

[philgruneich]

Can we remove it from v3 since it is becoming a feature in v4?

[dsldiesel]

Let's stop being polite: primevue css developers are incompetent and they didn't see this coming.
I have my whole app broken and have no idea on how to proceed. Unfortunately there's no easy fix for all users and we need to find different solutions depending on project. This makes me blame again the developers. Updating primevue dependency is a terrible nightmare.

If there's an easy-to-adopt fix, can someone explain it better?

[FVolral]

@dsldiesel I disagree. If the CSS developers of PrimeVue are incompetent, then why are you using their libraries? I've been in the same situation as you. Yes, it's time-consuming. Like you, I had to go back over a good portion of my application's interface to fix issues. But I also know that if I hadn't used any library at all, I would have wasted a crazy amount of time reinventing the wheel. This kind of event is the price to pay, and you're paying it for free. Don't be stingy.

It's a breaking change, so there isn't really an 'easy way.' In the documentation, a few keys are given to solve this problem: putting the CSS reset in a layer, playing with the layer order: https://primevue.org/csslayer/. As mentioned earlier, if you're using vue-cli, you'll probably have to migrate to Vite.js. You'll have to make this migration sooner or later anyway because the vue-cli documentation itself recommends migrating to Vite.

[alex-maereanu]

So bad.. anyone found a workaround around this?

[FVolral]

So bad.. anyone found a workaround around this?

1. If you are using Vue-Cli, migrate to Vite because Webpack can disrupt your CSS layers in production when creating the final bundle.
2. Follow the documentation on ordering CSS layers: https://primevue.org/csslayer
3. Even after that, you will likely need to rework some parts of your application. If you are extensively using PrimeVue for your interface, it won't be a major issue. If not, it will require more effort. However, if you are accustomed to CSS and your app is well-organized, it won't be too much work. I managed.

[alex-maereanu]

Thanks @FVolral! But this will still be broken on Safari < 15.4 :(

[FVolral]

why are you using a so old version of safari ?