fix(css): ensure order of extracted CSS

Without this the order of the extracted CSS rules is defined by the order `renderChunk` of the css plugin is called.
So with this the order of CSS rules is always in order of the output chunks of the bundle.

Signed-off-by: Ferdinand Thiessen <[email protected]>

packages/vite/src/node/plugins/css.ts

@@ -7,6 +7,7 @@ import postcssrc from 'postcss-load-config'
 import type {
  ExistingRawSourceMap,
  ModuleFormat,
+ OutputAsset,
  OutputChunk,
  RenderedChunk,
  RollupError,
@@ -903,17 +904,19 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
  .map((chunk) => [chunk.preliminaryFileName, chunk]),
  )
 
- function collect(fileName: string) {
- const chunk = bundle[fileName]
+ function collect(chunk: OutputChunk | OutputAsset) {
  if (!chunk || chunk.type !== 'chunk' || collected.has(chunk)) return
  collected.add(chunk)
 
- chunk.imports.forEach(collect)
+ chunk.imports.forEach((importName) => collect(bundle[importName]))
  css += chunkCSSMap.get(chunk.preliminaryFileName) ?? ''
  }
 
- for (const chunkName of chunkCSSMap.keys())
- collect(prelimaryNameToChunkMap.get(chunkName)?.fileName ?? '')
+ for (const chunk of Object.values(bundle)) {
+ if (chunk.type === 'chunk' && (chunk as OutputChunk).isEntry) {
+ collect(chunk)
+ }
+ }
 
  return css
  }