🐛 BUG: Svelte CSS won't work on build if inside a component with client:only directive

[outerlook]

What version of astro are you using?

0.25.4

What package manager are you using?

npm, (but local pnpm)

What operating system are you using?

Stackblitz, but local linux

Describe the Bug

Expected

1 - npm run dev ✅
2 - Observe components are blue and red ✅
3 - npm run build && npm run preview ✅
4 - Observe components continue to be blue and red ✅

Reproduced

1 - npm run dev ✅
2 - Observe components are blue and red ✅
3 - npm run build && npm run preview ✅
4 - Observe red is red, but blue isn't blue ❌

The difference in components is the client:XXX directive

I tried to understand better astro codes to understand this, but I failed to understand vite-plugins particpation, etc... if someone points the right direction I would try to submit a PR

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-cdtzxj?file=src/pages/index.astro

Participation

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

[songololo]

Same for me with vue components with client:only directive.

[outerlook]

Persists on 0.26.0
https://stackblitz.com/edit/github-cdtzxj-wai3qu?file=src%2Fpages%2Findex.astro

[LorenzoLeonardini]

The last version this worked properly was 0.25.2, something broke in the 0.25.3 release

[songololo]

Still happening on v1.0.0-beta.4

For me it only happens with client:only i.e. no issues if using the client:load directive where suitable.

[bholmesdev]

Initial findings: this is caused by our recent PR to prevent styles leaking to unrelated pages #2918

Dev-y notes mostly for myself: When building the page, client:only components are stripped from the top-level imports by esbuild since they aren't used for SSR. This function call is the culprit. Since we walk through all components imported by the page via ESM, we accidentally miss these client:only components.

☝️ Working on a fix to address the above! Hoping we don't need too many changes