Skip to content

Conversation

@dejour
Copy link
Contributor

@dejour dejour commented Nov 5, 2025

Description

This PR fixes CSS link order in generated HTML when using manualChunks to split CSS into separate chunks. Previously, when third-party CSS (like animate.css) was split into a separate chunk via manualChunks, the resulting CSS links in index.html would appear in the wrong order (e.g., index.css before animate.css), even though the source code imported them in the correct order.

Problem:
When pure CSS chunks are removed and their CSS files are merged into parent chunks' viteMetadata.importedCss, the merged CSS was being added after the parent's existing CSS, causing the final HTML to have the wrong link order.

Solution:
Modified the CSS merging logic in packages/vite/src/node/plugins/css.ts to prepend CSS from pure CSS chunks before the parent's existing CSS, preserving the original import order. This ensures that when CSS is injected into HTML, dependencies appear before the entry CSS.

Changes:

  • Updated generateBundle in cssPostPlugin to merge CSS from pure CSS chunks in the correct order
  • Added integration test in playground/css-order-manual-chunks to verify CSS link order respects import order

Testing:

  • Added e2e test that verifies CSS links in dist/index.html appear in the correct order when using manualChunks

Fixes #20995

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pls respect order of import if css output by manualChunks on build

1 participant