`<style>` HMR require save twice when exporting a type from a component

[serkodev]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-fbpwhbzy?file=src%2Fcomponents%2FFoo.vue

Steps to reproduce

Setup:

1. Create a Foo.vue component and export a type FooProps.
2. Add a <style> block in Foo.vue (e.g., setting background-color: red;).
3. Create a Bar.vue component and import the FooProps type from Foo.vue.
4. Use both <Foo /> and <Bar /> in App.vue.

Problem:

When running the development server with Vite, changing the background color in Foo.vue, you need to save the file twice for the styles to update in the browser.

What is expected?

After modifying the styles in Foo.vue and saving the file once, the changes should be reflected immediately.

What is actually happening?

The style updates are only applied after saving Foo.vue twice.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

I’m not sure whether this issue is related to Vue or Vite.

[edison1105]

this one is related to vite-plugin-vue.