PrimeVue with Vite 5: Missing common CSS Styles

[cuberinooo]

Describe the bug

Im using the latest PrimeVue Version 3.48.0 and I just upgraded Vite from 4 to 5. After migration the common styles of each primevue components are not loaded anymore. I saw that they have some breaking changes: See https://vitejs.dev/guide/migration.html.

E.g. On the screenshot you can see some styles of the multiselect component which are not loaded anymore when I upgrade vite to 5.

Btw. I use Prestige Template and all styles of the template are loaded properly. These are included on the main.ts file.

Has anybody faced the same issue? Is there are workaround to fix this ? Im not even sure if this problem is related to primevue. Since only the upgrade from vite changes the behaviour. But I want to make sure if I have to change the import of the styles. Since Primevue did also some changes on styles. E.g. the primevue.min.css got removed and also they added @layer. (See https://github.com/primefaces/primevue/issues/4647 or: https://github.com/primefaces/primevue/issues/4110)

Maybe that`s useful to know: I use TS and everything is configured to ESM. We did not import a theme. As I said only the prestige template were used and imported to main.ts and the other styles were coming directly from primevue components.

Reproducer

PrimeVue version

3.48.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Upgrade to vite 5 from 4 and see that the common styles of each primevue components are not loaded anymore.

Expected behavior

Common Styles of each primevue component should loaded

[mertsincan]

Interesting! We'll check and get back to you. I set a milestone for it.

[marknn3]

I wanted to create a new issue, but it looks like this issue is related/similar: Since PrimeVue 3.48.0 styles are missing in the html head. This seems unrelated to vite4->5 migration as stated by the OP. With PrimeVue v3.47.2: With PrimeVue v3.48.0 (No other changes):

Minimum source to reproduce the issue: primevue-style-issue-3.48.0.zip

[marknn3]

Found the issue! Since PrimeVue 3.48.0 styles are being moved to theme files (#5214). This does require an update of the theme files bundled with existing projects. This is technically a breaking change, because is does require a manual copy of the theme file(s) after this PrimeVue version upgrade.

[cuberinooo]

@marknn3 nice on finding that. Ye, that is definitly a breaking change ! My fix for this was exactly taking one of the themes. Problem here was that it changed some styles which I had to change it manually. There should be a "default" theme like the one that we allready had.

[eneeio-nm]

I too am surprised that this change wasn't flagged as a major release. It's going to take a couple of additional days dev time to upgrade our web platform to utilise the latest PrimeVue release (3.48.x).

[eneeio-nm]

I wanted to create a new issue, but it looks like this issue is related/similar: Since PrimeVue 3.48.0 styles are missing in the html head. This seems unrelated to vite4->5 migration as stated by the OP.

I agree - this doesn't have anything to do with upgrade Vite from 4 to 5.

[tugcekucukoglu]

For more information please check #5214