🐛 BUG: CSS modules not bundled in built sites if using client:only vue components imported via alias

[songololo]

What version of astro are you using?

1.0.0-beta.17

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

CSS modules not bundled when building sites if using client:only vue components imported via alias

This is a similar issue to existing (closed) issues where CSS modules imported to client:only vue (or other) components are ignored when building a site:

• Add client:only CSS to their pages #3113
• 🐛 BUG: Svelte CSS won't work on build if inside a component with client:only directive #2966
• 🐛 BUG: Vue components styles are missing in the production build when client:only #2225

These issues are now resolved and closed, however, the issue still arises when importing a component via an alias.

For example:

• It works when using import Counter from '../components/Counter.vue';
• But not when using import Counter from '@src/components/Counter.vue';

Note - this issue is not a problem in development mode, so you have to build then preview the site to see the problem in action.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-fwoavp-wvrbax

Participation

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

[pmochine]

Probably related to #2575 as well

[jasikpark]

I'm having the same problem w/ <Carousel client:only/> in React when Carousel.tsx imports CSS - it seems that since only the astro root is added and none of the other assets, the CSS doesn't get included in the bundle. The dev server works fine for it though.

currently v0.26.1

[FredKSchott]

I can confirm on the latest v1.0.0-beta as well. This is only client:only, and not any other client:* that I tested. More investigation needed.

[matthewp]

This is caused by an upstream bug: rollup/plugins#1190. Tracking that and can follow-up when it's complete.

[matthewp]

Appears to still be happening: https://stackblitz.com/edit/github-fwoavp-hrx2y2?file=package.json

[matthewp]

@bluwy this might be fixed by that new resolution idea we discussed. Assigning to you, but this can be checked after the refactor.

[bluwy]

Looks like this is fixed in Astro 1.2.0, #4699

[stefanullinger]

I am still seeing a similar issue in Astro 1.6.0 and @astrojs/react 1.2.2. After deploying to Vercel the components are displayed unstyled in the browser.

[joechipjoechip]

Using version 4.0.6 and the issue is still there .. :/