CSS updates require a dev server restart when using workspace Vue package

[spacedawwwg]

Astro Info

Astro                    v4.3.7
Node                     v18.18.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/vue

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

N/A

Describe the Bug

When updating CSS inside Vue components outside the Astro project root, referenced by the src attribute, the styles do not update until the dev server is restarted. Reloading the page does not fix the issue, only fully restarting the dev server does.

<style src="./Component.css"></style>

What's the expected result?

For the CSS to update

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zev1hp

Participation

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

[spacedawwwg]

/cc @hippotastic

[bluwy]

This seems to happen in a normal Vite project too. In the repro, if I initialize a Vite app besides the Astro project, HMR isn't working correctly.

I can't quite tell why it works in non-monorepos though. I know that files outside of Vite's root are not watched file changes by default, unless you explicitly import the file, however @vitejs/plugin-vue isn't registering the file with this.addWatchFile, nor have an import chain to it. It only has:

import "/@fs/Users/bjorn/Work/repros/astro-vue-hmr/packages/ui/src/components/VueExample/VueExample.css?vue&type=style&index=0&src=4e9bb8cf&scoped=4e9bb8cf&lang.css";

Even if I manually watch that file, it is not reacting to the changes. But anyways, I think @vitejs/plugin-vue has a bug with handling changes from dependencies. I'll close this for now as its not a bug in Astro. I'd suggest reporting this upstream.