All styles are broken after putting prime vue into CSS Layers

[Rolanddoda]

Describe the bug

I have a project where there are many legacy css files. After upgrading from 3.34.1 to 3.40.1 all the styles broke: buttons, dialogs, tables, etc

This is because PrimeVue styles are now added under a layer which means that they have lower specificity. How can such a change can be added to PrimeVue without any breaking-change notice?

Reproducer

https://stackblitz.com/edit/t3ecaz?file=src%2Fstyle.css

PrimeVue version

3.40.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[tugcekucukoglu]

The latest PrimeVue versions use @layer css that brings breaking changes. The demo that you've sent needs some updates. For example:

button:not([data-pc-name="button"]){ // other styles }

[Rolanddoda]

@tugcekucukoglu nowhere in the releases you mention any breaking changes:

Also, since you seem to be using releases and versioning, you don't use Semantic Versioning:

Given a version number MAJOR.MINOR.PATCH, increment the:

MAJOR version when you make incompatible API changes
MINOR version when you add functionality in a backward compatible manner
PATCH version when you make backward compatible bug fixes

So you are saying that "latest versions bring breaking changes" but you publish them as PATCH and MINOR versions.

As for the demo, I don't see why I need any update. It's a link to a minimal reproduction and I don't see why I have to use button:not([data-pc-name="button"]){ // other styles } when clearly, the intention of the demo is to show that by adding CSS layers you alter the specificity of existing CSS which means breaking many people's apps and making it difficult to upgrade.

[304NotModified]

related #4504

[matthew-dean]

This is indeed a terrible breaking change. PrimeVue is not usable as a styled system after 3.40.0. See: #4504 (comment)