The order of `<style>` and `<link rel="stylesheet">` changes after build

[fango256]

Hi, I've been struggling with an issue that causes our override CSS rules to fail on some builds. In our production app it is actually inconsistent - however the simple local reproduction repository i've linked to seems to reproduce consistently.

When using a single entrypoint the generated index.html correctly outputs vendor.css followed by the local css (index.css). However when i include a second entrypoint with exactly the same content as the first entrypoint the generated index.html files have the CSS defined in the wrong order in all entrypoints. The CSS is ordered correctly in Vite serve mode.

Using main.js

import { VApp } from "vuetify/lib";
console.log(VApp);

import '../style.css'

document.querySelector('#app').innerHTML = `
  <div class="v-application theme--light">I should have a blue background as my CSS is overridden in style.css</v-application>
`

With one entrypoint in correctly outputs:

...
<link rel="stylesheet" href="/assets/vendor.06e82a89.css">
<link rel="stylesheet" href="/assets/main.b16cdc1a.css">
...

But including a second entrypoint with the same js content flips the CSS ordering in both the output html files:
build/index.html

...
<link rel="stylesheet" href="/assets/style.0cc4c6eb.css">
<link rel="stylesheet" href="/assets/vendor.06e82a89.css">
...

build/entrypoint2/index.html

...
<link rel="stylesheet" href="/assets/style.0cc4c6eb.css">
<link rel="stylesheet" href="/assets/vendor.06e82a89.css">
...

Reproduction

https://github.com/fango256/vite-css-ordering-issue

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 40.92 GB / 63.92 GB
  Binaries:
    Node: 16.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (93.0.961.38)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vite: ^2.5.4 => 2.5.6

Used Package Manager

npm

Logs

No response

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 https://github.com/vuejs/vue-next 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.

[cdll]

Same issue here with react@17.0 and @material-ui/core@4.12.

[intrnl]

Also having the same issue, I tried bisecting Vite on my project to see if it's just a recent change but it seems the issue has been present since 2.0.0.

Edit: Ah, it seems that mine is a different issue entirely (relating to chunk preloading).

[molily]

I think I ran into the same issue with <link> + <style> (no JS).

This is my minimal reproducible example:
https://github.com/molily/vite-style-order

index.html

<link rel="stylesheet" href="./base.css" />
<style> body { color: blue; } </style>

another.html

<link rel="stylesheet" href="./base.css" />
<style> body { color: red; } </style>

dist/index.html (note the wrong order)

<link rel="stylesheet" href="/assets/index.ca90b8db.css">
<link rel="stylesheet" href="/assets/base.05db2039.css">

dist/another.html (note the wrong order)

<link rel="stylesheet" href="/assets/another.fca6b6f0.css">
<link rel="stylesheet" href="/assets/base.05db2039.css">

The order is correct in vite dev, broken in production build, just like @fango256 described.

My workaround is to not use <style> but <link rel="stylesheet"> directly, then the dist output is basically the same (three generated .css files: base.*.css, index.*.css, another.*.css) but the order is correct.

[worldtok]

I have same issue while working with bootstrap 5.2.2

[louia]

Any update on these ?

[benskz]

I'm running into the same issue.

I'm unable to do a similar workaround to @molily since the styling that's in the style tag is coming from a library.

[worldtok]

I ran into this error while importing css and scss files together while retaining the extensions for the css files.
As I fiddle around the code, I found out that the issues occur as a result of importing css files and scss together and at the same time adding an extension to the css import code

This code throws the issues as the css file is imported first instead of scss file

@import './scss/file'; // .scss file
@import './chunk-1.css'; // .css file

This resolves as expected importing the scss file before the css file

@import './scss/file'; // .scss file
@import './chunk-1'; // .css file

I was importing everything into a sass file

[jordan-erisman]

Any updates to this issue?

[alexdeia]

It is a real problem. Why is there so little written about her? I try to fix this by !important prop (but it is awful workaround)

[haroldiedema]

Just to confirm; We're trying to migrate from webpack to vite in a Vue 2 + Vuetify application. Due to the fact that Vuetify uses lots of !important rules in their CSS files, we sort-of "hacked around" it by loading another CSS file after it with even more !important rules (yes, I know... 😅).

However, this doesn't work in Vite due to the wrong CSS order. This issue is kind of a blocker for us as well.