Skip to content

Renaming ref unexpectedly affects CSS class selector in <style> #4660

@L33Z22L11

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions