Skip to content

Comments

fix: Move CSS collection to generateBundle for Vite 6 & 7 compatibility#339

Open
dc-riskhub wants to merge 2 commits intoWJSoftware:mainfrom
dc-riskhub:fix/vite-7-css-collection
Open

fix: Move CSS collection to generateBundle for Vite 6 & 7 compatibility#339
dc-riskhub wants to merge 2 commits intoWJSoftware:mainfrom
dc-riskhub:fix/vite-7-css-collection

Conversation

@dc-riskhub
Copy link

@dc-riskhub dc-riskhub commented Jan 29, 2026

Problem

In Vite 6 & 7, chunk.viteMetadata.importedCss is not populated when the renderChunk hook runs. This causes the CSS map to be empty, resulting in micro-frontend CSS not being loaded in production.

Root Cause

The plugin currently collects CSS in the renderChunk hook, but Vite 6/7 only populates viteMetadata.importedCss after all renderChunk hooks have completed. When the plugin checks for CSS files, the metadata is still empty.

Solution

Move CSS collection from the renderChunk hook to the generateBundle hook, where viteMetadata.importedCss is fully populated.

Changes

  • Removed CSS collection logic from renderChunk hook
  • Added CSS collection logic to generateBundle hook before injecting the cssMap
  • Added defensive null checks for importedCss and imports arrays
  • Added explanatory comment about Vite 7 compatibility

Testing

Verified with a monorepo containing 7+ micro-frontends on Vite 7.2.7:

Before fix:

cssInjectedDictionary="{\"main\":[]}"

After fix:

cssInjectedDictionary="{\"main\":[\"assets/vpss(@riskhub/actions-man)main-xxx.css\"]}"

All micro-frontend CSS now loads correctly in production builds.

Related

This issue was mentioned in #87 where the workaround was to use inlineDynamicImports: true. This fix resolves the root cause, allowing proper code splitting while maintaining CSS loading.

In Vite 7, chunk.viteMetadata.importedCss is not populated when the
renderChunk hook runs, causing the CSS map to be empty. This results
in micro-frontend CSS not being loaded in production.

This fix moves CSS collection from renderChunk to generateBundle,
where viteMetadata.importedCss is fully populated.

Changes:
- Removed CSS collection logic from renderChunk hook
- Added CSS collection logic to generateBundle hook
- Added defensive null checks for importedCss and imports arrays

Fixes CSS loading issues in Vite 7+ projects.
Copy link
Contributor

@webJose webJose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it work in Vite v6 as well?

@dc-riskhub
Copy link
Author

I've not had the chance to test it in Vite 6, but I when I get a spare moment, I'll do so and report back.

@dc-riskhub
Copy link
Author

@webJose I tested in Vite 6.4.1 and can confirm it works. This fix relies on Rollup's hook execution order, which doesn't change across these versions of Vite. This means the CSS map is populated properly in both Vite 6 and 7. 👍

Also pushed a fix for the map tests too.

@dc-riskhub dc-riskhub changed the title fix: Move CSS collection to generateBundle for Vite 7 compatibility fix: Move CSS collection to generateBundle for Vite 6 & 7 compatibility Jan 30, 2026
@webJose
Copy link
Contributor

webJose commented Jan 30, 2026

Thanks for testing. My PC fried and i had to buy a new one. I should get it today. In the meantime i'm using a tablet but I cannot add trusted publishing to the repo with it. Must wait for the new hardware.

@dc-riskhub
Copy link
Author

My pleasure, sorry to hear your machine went kaput. If there are any other changes you'd like me to consider, do let me know.

Many thanks!

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.

2 participants