Order of <link> tags in HTML not preserved in prod build #8739
Description
Describe the bug
In index.html I dynamically load a static CSS file from publicDir:
<link rel="stylesheet" href="/src/App.css"/>
<link rel="stylesheet" href="/custom.css"/>This works fine in dev mode and the links are ordered as defined, but in the prod build, vite renders the link tags in a different order, e.g. bundled style files seem to always append to end of <head> which breaks the order (and in turn the CSS precedence):
<link rel="stylesheet" href="/custom.css"/>
<script type="module" crossorigin src="/assets/index.84aa3832.js"></script>
<link rel="stylesheet" href="/assets/index.62f502b0.css">Issue #6375 sounds similar but the root cause might be a different one as in this case, CSS is not loaded via JS, but directly from HTML.
Reproduction
https://github.com/silverwind/vite-style-order
System Info
not relevantUsed 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 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.