fix(build): Prevent duplicate CSS for hydrated client components

[P4tt4te]

Changes

Fix #12303

The root cause was a divergence between the server and client builds:
Server Build: Correctly processes all stylesheets needed for a page, including those from components, and links them in the final HTML.
Client Build: When processing a hydrated component as a separate entry point, it incorrectly generates a redundant, standalone CSS file for that component's styles.

Fix:

• The inlineStylesheetsPlugin now removes any "orphaned" CSS assets that are left over from the client build, preventing empty or duplicate files from appearing in the final output.

Testing

I created a new fixture named "css-deduplication", which is basically the framework-react template.

Three tests were added for this fixture:

For the inlineStylesheets: 'never' case, we check that the main CSS file does not already contain the styles from any other .css files present in the build folder.

For the inlineStylesheets: 'always' case:

• We test that the build folder does not contain any unwanted .css files.
• We test that the content of <style> tags is not duplicated (this test already passes without this PR).

Docs

I have added detailed comments to the code to explain the new logic for future maintainers.
I believe this is enough since it's an internal fix, but I'm happy to add formal documentation if you think it's needed!

[changeset-bot]

🦋 Changeset detected

Latest commit: 60f55de

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #14142 will not alter performance

_{Comparing P4tt4te:style/duplicated-css-files (60f55de) with main (722bba0)¹}

Summary

✅ 6 untouched

Footnotes

1. No successful run was found on main (4f1afc3) during the generation of this report, so 722bba0 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[ematipico]

@P4tt4te thank you for the contribution, and sorry for the late answer. It would be great if we could add a new test.

[P4tt4te]

Hi @ematipico, no problem about the delay. I'll create a test and update the branch in a few days.

[P4tt4te]

@P4tt4te thank you for the contribution, and sorry for the late answer. It would be great if we could add a new test.

Hi @ematipico,
I added three tests. Do you think that's enough, or did I miss any test cases?

[forberg]

@ematipico @matthewp is this something we can see merged eventually? 🙏 :)

[florian-lefebvre]

We have not forgotten about it FYI, sorry if we're being slow! We have reduced capacity ATM and in Amsterdam for ViteConf

[matthewp]

Love the comments added to explain how it works!