vitejs · dejour · Nov 5, 2025 · Nov 5, 2025
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -1049,9 +1049,16 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
                 const { importedCss, importedAssets } = (
                   bundle[file] as OutputChunk
                 ).viteMetadata!
-                importedCss.forEach((file) =>
-                  chunk.viteMetadata!.importedCss.add(file),
-                )
+                // Preserve original import order: ensure CSS coming from imported
+                // pure CSS chunks appears before the parent's existing CSS.
+                if (importedCss.size > 0) {
+                  const parentCss = chunk.viteMetadata!.importedCss
+                  const ordered = new Set<string>([
+                    ...importedCss,
+                    ...parentCss,
+                  ])
+                  chunk.viteMetadata!.importedCss = ordered
+                }
                 importedAssets.forEach((file) =>
                   chunk.viteMetadata!.importedAssets.add(file),
                 )

diff --git a/playground/css-order-manual-chunks/__tests__/order.spec.ts b/playground/css-order-manual-chunks/__tests__/order.spec.ts
@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest'
+import { isBuild, page, readFile } from '~utils'
+
+describe.runIf(isBuild)('build', () => {
+  test('css links respect import order with manualChunks', async () => {
+    const html = readFile('dist/index.html') as string
+    // expect lib.css link appears before entry css link (index.css)
+    const libHref = /href="(.*?)\/assets\/lib-([\w-]+)\.css"/g
+    const indexHref = /href="(.*?)\/assets\/index-([\w-]+)\.css"/g
+
+    const libMatch = libHref.exec(html)
+    const indexMatch = indexHref.exec(html)
+
+    expect(libMatch, 'lib.css link should exist').toBeTruthy()
+    expect(indexMatch, 'index.css link should exist').toBeTruthy()
+
+    expect(libMatch!.index).toBeLessThan(indexMatch!.index)
+  })
+})
+
+test('runtime style precedence matches import order', async () => {
+  // lib.css sets .box { color: green }, base.css sets .box { color: red }
+  // If lib.css is loaded before index.css, final color should be red
+  const color = await page.$eval('#app', (el) => getComputedStyle(el).color)
+  expect(color).toBe('rgb(255, 0, 0)')
+})
diff --git a/playground/css-order-manual-chunks/base.css b/playground/css-order-manual-chunks/base.css
@@ -0,0 +1,3 @@
+.box {
+  color: red;
+}
diff --git a/playground/css-order-manual-chunks/index.html b/playground/css-order-manual-chunks/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSS Order Manual Chunks</title>
+  </head>
+  <body>
+    <div id="app">css order manual chunks</div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/playground/css-order-manual-chunks/lib.css b/playground/css-order-manual-chunks/lib.css
@@ -0,0 +1,3 @@
+.box {
+  color: green;
+}
diff --git a/playground/css-order-manual-chunks/main.js b/playground/css-order-manual-chunks/main.js
@@ -0,0 +1,5 @@
+// simulate third-party big css split via manualChunks
+import './lib.css'
+import './base.css'
+
+document.getElementById('app').className = 'box'
diff --git a/playground/css-order-manual-chunks/vite.config.js b/playground/css-order-manual-chunks/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.endsWith('/lib.css')) return 'lib'
+        },
+      },
+    },
+  },
+})