Skip to content

CSS still shared too widely between client:only islands in latest Astro 6.x #17043

Description

@ollisal

Astro Info

Astro                    v6.4.6
Node                     v24.15.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node
Integrations             astro-localized-routing
                         webview-routing
                         @astrojs/sitemap
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Follow-up to Issue #16453 , which has longer description and bot generated exploration of the problem

When using client:only islands, in a production build, Astro associates page island entrypoints with side-effect imported CSS/Less/... modules through the JS bundle chunks loaded on the page. With rollup bundling heuristics, often some common utilities (e.g. remeda/lodash type lib functions, date/i18n etc helpers, ...) end up in a shared chunk together with another source module that imports CSS. And then all pages that (transitively) import one of those utility modules also get all CSS in that chunk, even if they don't import anything that imports that CSS. This doesn't happen for client:load islands however.

Our apologies for us so far having been unable to conclusively test the fix proposed in issue #16453. This is due to us so far having been update from Astro 5 to 6 in our production app, as some of the fragile legacy code that ends up in the app seems to break, likely due to the associated astrojs/react + vitejs-plugin-react major version updates. But that's unrelated to the client:only CSS leak issue, which so far occurred identically with the latest Astro 5 and 6 versions.

What's the expected result?

Only CSS directly or transitively imported from current page's source modules are linked/loaded on the page, regardless of what other source modules happen to end up in a shared JS chunk on the page.

I will be testing the candidate fix now on our production app, on a work-in-progress branch updating to Astro 6

Link to Minimal Reproducible Example

https://github.com/ollisal/astro-client-only-css-leak-repro

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P4: importantViolate documented behavior or significantly impacts performance (priority)pkg: astroRelated to the core `astro` package (scope)

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions