Skip to content

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

Merged
matthewp merged 13 commits intowithastro:mainfrom
P4tt4te:style/duplicated-css-files
Oct 17, 2025
Merged

fix(build): Prevent duplicate CSS for hydrated client components#14142
matthewp merged 13 commits intowithastro:mainfrom
P4tt4te:style/duplicated-css-files

Conversation

@P4tt4te
Copy link
Contributor

@P4tt4te P4tt4te commented Jul 27, 2025 •
edited
Loading

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!

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jul 27, 2025
@changeset-bot
Copy link

changeset-bot bot commented Jul 27, 2025 •
edited
Loading

🦋 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
Copy link

codspeed-hq bot commented Jul 27, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #14142 will not alter performance

Comparing P4tt4te:style/duplicated-css-files (60f55de) with main (722bba0)1

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. ↩

@P4tt4te P4tt4te force-pushed the style/duplicated-css-files branch from 3c07ab2 to 49acd37 Compare July 27, 2025 19:53
@P4tt4te P4tt4te closed this Jul 27, 2025
@P4tt4te P4tt4te reopened this Jul 27, 2025
@ematipico
Copy link
Member

ematipico commented Aug 14, 2025

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

@P4tt4te
Copy link
Contributor Author

P4tt4te commented Aug 15, 2025

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

@P4tt4te
Copy link
Contributor Author

P4tt4te commented Aug 18, 2025

@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?

@P4tt4te P4tt4te force-pushed the style/duplicated-css-files branch from 6a9f707 to 81fbc81 Compare August 18, 2025 21:53
@forberg
Copy link
Contributor

forberg commented Oct 5, 2025

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

@florian-lefebvre
Copy link
Member

florian-lefebvre commented Oct 8, 2025

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

matthewp
matthewp approved these changes Oct 17, 2025
View reviewed changes
Copy link
Contributor

@matthewp matthewp left a comment

Choose a reason for hiding this comment

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

Love the comments added to explain how it works!

matthewp
matthewp reviewed Oct 17, 2025
View reviewed changes
@matthewp matthewp merged commit 73c5de9 into withastro:main Oct 17, 2025
23 checks passed
@astrobot-houston astrobot-houston mentioned this pull request Oct 17, 2025
Merged
@P4tt4te P4tt4te deleted the style/duplicated-css-files branch October 17, 2025 22:24
@simensfo simensfo mentioned this pull request Oct 22, 2025
Closed
1 task
richardnbanks pushed a commit to richardnbanks/astro-loader-youtube that referenced this pull request Oct 22, 2025
@richardnbanks
chore(deps): update npm (#22)
8b3152a 
This PR contains the following updates:

| Package | Change | Age | Confidence |
|---|---|---|---|
| [astro](https://astro.build) ([source](https://github.com/withastro/astro/tree/HEAD/packages/astro)) | [`5.14.6` -> `5.14.8`](https://renovatebot.com/diffs/npm/astro/5.14.6/5.14.8) | [![age](https://developer.mend.io/api/mc/badges/age/npm/astro/5.14.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/astro/5.14.6/5.14.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) |
| [googleapis](https://github.com/googleapis/google-api-nodejs-client) | [`164.0.0` -> `164.1.0`](https://renovatebot.com/diffs/npm/googleapis/164.0.0/164.1.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/googleapis/164.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/googleapis/164.0.0/164.1.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) |

---

### Release Notes

<details>
<summary>withastro/astro (astro)</summary>

### [`v5.14.8`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#5148)

[Compare Source](https://github.com/withastro/astro/compare/[email protected]@5.14.8)

##### Patch Changes

- [#&#8203;14590](withastro/astro#14590) [`577d051`](withastro/astro@577d051) Thanks [@&#8203;matthewp](https://github.com/matthewp)! - Fixes image path resolution in content layer collections to support bare filenames. The `image()` helper now normalizes bare filenames like `"cover.jpg"` to relative paths `"./cover.jpg"` for consistent resolution behavior between markdown frontmatter and JSON content collections.

### [`v5.14.7`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#5147)

[Compare Source](https://github.com/withastro/astro/compare/[email protected]@5.14.7)

##### Patch Changes

- [#&#8203;14582](withastro/astro#14582) [`7958c6b`](withastro/astro@7958c6b) Thanks [@&#8203;florian-lefebvre](https://github.com/florian-lefebvre)! - Fixes a regression that caused Actions to throw errors while loading

- [#&#8203;14567](withastro/astro#14567) [`94500bb`](withastro/astro@94500bb) Thanks [@&#8203;matthewp](https://github.com/matthewp)! - Fixes the actions endpoint to return 404 for non-existent actions instead of throwing an unhandled error

- [#&#8203;14566](withastro/astro#14566) [`946fe68`](withastro/astro@946fe68) Thanks [@&#8203;matthewp](https://github.com/matthewp)! - Fixes handling malformed cookies gracefully by returning the unparsed value instead of throwing

  When a cookie with an invalid value is present (e.g., containing invalid URI sequences), `Astro.cookies.get()` now returns the raw cookie value instead of throwing a URIError. This aligns with the behavior of the underlying `cookie` package and prevents crashes when manually-set or corrupted cookies are encountered.

- [#&#8203;14142](withastro/astro#14142) [`73c5de9`](withastro/astro@73c5de9) Thanks [@&#8203;P4tt4te](https://github.com/P4tt4te)! - Updates handling of CSS for hydrated client components to prevent duplicates

- [#&#8203;14576](withastro/astro#14576) [`2af62c6`](withastro/astro@2af62c6) Thanks [@&#8203;aprici7y](https://github.com/aprici7y)! - Fixes a regression that caused `Astro.site` to always be `undefined` in `getStaticPaths()`

</details>

<details>
<summary>googleapis/google-api-nodejs-client (googleapis)</summary>

### [`v164.1.0`](https://github.com/googleapis/google-api-nodejs-client/blob/HEAD/CHANGELOG.md#16410-2025-10-20)

[Compare Source](googleapis/google-api-nodejs-client@googleapis-v164.0.0...googleapis-v164.1.0)

##### Features

- run the generator ([#&#8203;3820](googleapis/google-api-nodejs-client#3820)) ([fd02f58](googleapis/google-api-nodejs-client@fd02f58))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS45OS4xMSIsInVwZGF0ZWRJblZlciI6IjQxLjk5LjExIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->

Reviewed-on: https://code.richardbanks.dev/richard/astro-loader-youtube/pulls/22
Co-authored-by: Renovate Bot <[email protected]>
Co-committed-by: Renovate Bot <[email protected]>
@ematipico ematipico mentioned this pull request Oct 23, 2025
Merged
@astrobot-houston astrobot-houston mentioned this pull request Oct 23, 2025
Merged
@claude claude bot mentioned this pull request Nov 2, 2025
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@matthewp matthewp matthewp approved these changes

Assignees

@matthewp matthewp

@ematipico ematipico

Labels

pkg: astro Related to the core `astro` package (scope)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

CSS is duplicated across external files

5 participants

@P4tt4te @ematipico @forberg @florian-lefebvre @matthewp