[ +] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[ +] Provide a description in this issue that describes the bug.
[+] 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.
For those who (like me) had to ship and need a temporary workaround: Depending on your project, you may be able to use build.cssCodeSplit to extract a single css file which has the classes in the correct order.
I see the wisdom in Remix of having "per-page" css loaders in this case - JS imports and CSS cascade generally follow an inverse relationship, right? So the most correct CSS cascade will need about one CSS chunk per page..
I'm having related a related issue but perhaps also different? Every time I run vite build it slices all of the css code above the media queries in one of my components off. I checked the compiled css and half of that module is no where to be found. Any update on this? I tried disabling code splitting but it didn't seem to work, or perhaps my config file was wrong..
Applying styles in the wrong order is a deal breaker for using vite.
I don't understand - why is this issue still open and more importantly, how are people actually developing with vite when you cannot trust the css order?
Speaking of cascade layers, if you're using css modules (which is likely if you're hitting this issue), you could try out https://github.com/DefinedNet/postcss-assign-layer to assign all of your components to a separate layer from your global / utility layers. This doesn't work with the cascade layers polyfill, but I think browser support is good enough you shouldn't need the polyfill anymore.
Another option for avoiding this issue is to not code-split your app. There are tradeoffs there, but it's something to consider.
I don't understand - why is this issue still open and more importantly, how are people actually developing with vite when you cannot trust the css order?
@adamxi I also encountered a similar problem in project. In our project we use Vue3, and to make global styles more basic, we imported them into main.js before importing App.vue, so on the final page in the chunk tree, global styles are imported first, and more specific ones in tags
Describe the bug
Vite injects css assets in wrong order with dynamic import and css modules.
Reproduction
Repo to reproduce
For example:
import styles from './button.module.css'
type ButtonProps = { children: string className?: string onClick?: () => void }
function Button({ children, className, onClick }: ButtonProps) { return <button className={classnames(styles.button, className)} onClick={onClick}>{children} }
export default Button
import Button from "../../components/button/button"
import styles from './home.module.css'
function HomePage() { return
Home page
}
export default HomePage
P.S. You can reproduce this but with cssCodeSplit: true or false.
System Info
Output of
npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
:Used package manager:
Logs
Before submitting the issue, please make sure you do the following
I see the wisdom in Remix of having "per-page" css loaders in this case - JS imports and CSS cascade generally follow an inverse relationship, right? So the most correct CSS cascade will need about one CSS chunk per page..
I'm having related a related issue but perhaps also different? Every time I run vite build it slices all of the css code above the media queries in one of my components off. I checked the compiled css and half of that module is no where to be found. Any update on this? I tried disabling code splitting but it didn't seem to work, or perhaps my config file was wrong..
In my case css injection seem to be sorted by name.
replace
app
withzpp
inmanualChunks
This seems to still be an issue. Really killing me. Any updates?
is there any update on this?
Applying styles in the wrong order is a deal breaker for using vite. I don't understand - why is this issue still open and more importantly, how are people actually developing with vite when you cannot trust the css order?
Because it isn't fixed yet. Have you considered that this may be a difficult problem?
There are solutions to manage cascade order that do not depend on CSS order. Have you considered reading the thread that you're commenting on?
Speaking of cascade layers, if you're using css modules (which is likely if you're hitting this issue), you could try out https://github.com/DefinedNet/postcss-assign-layer to assign all of your components to a separate layer from your global / utility layers. This doesn't work with the cascade layers polyfill, but I think browser support is good enough you shouldn't need the polyfill anymore.
Another option for avoiding this issue is to not code-split your app. There are tradeoffs there, but it's something to consider.