Renaming ref unexpectedly affects CSS class selector in <style>

[L33Z22L11]

Vue - Official extension or vue-tsc version

v2.0.28

VSCode version

1.92.0

Vue version

3.4.36

TypeScript version

5.5.4

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 4.03 GB / 15.86 GB
  Binaries:
    Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Steps to reproduce

<script setup>
const elementname = ref()
</script>

<template>
    <div ref="elementname" class="elementname" />
</template>

<style scoped>
.elementname {
    display: block;
}
</style>

1. Rename the ref attribute.

What is expected?

• CSS class selector in the <style> tag should remain unchanged after renaming the ref.

What is actually happening?

• Class name in template remains unchanged, but the CSS class selectors in the <style> tag are incorrectly renamed across multiple files.

Link to minimal reproduction

No response

Any additional comments?

No response

[KazariEX]

Not sure if it's related to volarjs/volar.js#176