Class names hydration mismatches when using SSR and SCSS styles with module

[Gwynerva]

Describe the bug

Without module attribute on <style> Vue SSR correctly handles updates to .scss files that are imported via @use ... at-rule.
However, with module attribte it fails to watch changes to style files or something else breaks with hydration mismatches related to hashed class names so only making manual changes to .vue file will re-sync the updates.

It is also not related to flexible path options when using @use. The bug occurs no matter how you use style files: with .scss extension and without it, omitting _ at the beginning or not.

Reproduction

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

Steps to reproduce

Just create an external .scss file, define any mixin and then @include that mixin in any .vue file <style lang="scss" module> tag.
Changing the .scss fill will break all files that @use this style file.

System Info

Everywhere

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• 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.

[hi-ogawa]

I couldn't grasp you description in details, but can you confirm the same issue happens for simple css too? without @use and such?

<style lang="css" module>
.header {
  /* hydration error after changing this to `color: green` */
  color: red
}
</style>

What's happening looks normal in terms of Vite's behavior, so you might need to check with renderer side. Probably asking on https://github.com/vitejs/vite-plugin-vue/ is better.

---

Also can you check this #146? It looks like there's a known issue with css module hmr.

[edison1105]

duplicate of #146
The root cause is that the HMR reload triggers hydration.
This is a bug in vuejs/core, I will create a PR to fix this.