@unocss/astro doesn't work with client:only components

[kidonng]

UnoCSS version

0.50.4

Describe the bug

Astro has a client:only directive that skips server rendering of components. Currently this directive makes UnoCSS's Astro integration unaware of the component and skips generating styles for it.

It is mentioned changing page-ssr to page here works:

unocss/packages/astro/src/index.ts

Line 66 in 87b414a

injectScript('page-ssr', injects.join('\n'))

This does generate correct CSS, however the CSS file is not imported in the generated HTML, so the fix is not that simple.

Reproduction

https://stackblitz.com/edit/node-6xfq8u

Notice how in the generated CSS, .text-blue in Astro component is present, but .text-red in Svelte component with client:only is missing.

System Info

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sibbng]

It will work if you nest your components under components folder.

Alternatively, you can provide additional files in extraContent option:

extraContent: {
  filesystem: ['src/component.svelte']
},

[kidonng]

I did notice this:

unocss/packages/astro/src/index.ts

Line 46 in 87b414a

options.extraContent.filesystem.push(resolve(fileURLToPath(config.root), 'src/components/**/*').replace(/\\/g, '/'))

However I never thought it would be the culprit. Just opened a #2326 for this.

Meanwhile, I think the info you provided is helpful enough to be in the README, I will also open a pull request for this.