Vite change the style order in production that cause the overwrite issue

[alokVishu]

Describe the bug

I am experiencing an issue with the Full calendar plugin in my Vuejs + Vite project where my custom styles are not being applied in production mode. This is due to Vite changing the order of the component's default styles and my custom styles, causing a conflict.

Reproduction

https://github.com/alokVishu/vite-style-overwrite-issue

Steps to reproduce

Run the project in development
yarn && yarn dev

run the project in production
yarn build && yarn preview

System Info

macOS: Ventura
google chrome

Used Package Manager

yarn

Logs

In Development Mode

In Production Mode

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[alokVishu]

I am also facing a similar issue with the apex chart in my Vuejs + Vite project. If you require a reproduction demo to demonstrate this issue, please let me know.

[alokVishu]

Hello @sapphi-red,

I have tried your latest release but the above issue is not solved yet. You can get this issue in the production build.

[sapphi-red]

The order now has consistency. You'll see the same thing happening during dev.

The reason why your style gets overridden is because the library injects style tags.

[alokVishu]

The order now has consistency. You'll see the same thing happening during dev.

The reason why your style gets overridden is that the library injects style tags.

What should I have to do now?

[sapphi-red]

You'd need to increase your style's specificity (e.g. adding !important).