CSS Class reference/go to definition found in Vue Single File Components does not include `.` in the class name

[lethefrost]

Vue - Official extension or vue-tsc version

3.1.1

VSCode version

1.105.1

Vue version

vue@3.5.22

TypeScript version

typescript@5.9.2

System Info

System:
    OS: macOS 26.0.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 26.96 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.10.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 11.6.2 - /opt/homebrew/bin/npm
    pnpm: 10.13.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 141.0.7390.108
    Safari: 26.0.1

package.json dependencies

N/A

Steps to reproduce

This Vue Official vsc extension provides feature to find references and go to definition, and list all found references/definitions in the peek view, for css classes in a vue SFC. VSC merges reference entries with exactly the same string name automatically, so when you use multiple language service providers, it won't have many reference duplicates. Usually, other extensions providing such peek features (for example, CSS Peak, CSS Navigation, and more) include the character . at the beginning of a class name. However, this Vue Official extension does not include the . part when creating reference entries (for example, .test-class -> test-class), so the auto merge fails, and we will have duplicate css class entries in the peek view of .vue files when using along with other extensions.

For example, in this screenshot, class is defined in style/css but not used in template/html section,

the first two entries with blue marker 1️⃣ of .test are generated by other extension, including the ., and the third entry with yellow marker 2️⃣ of test is generated by Vue Official extension, without the leading .. Similarly, if there are references in the template/html part, there are even more duplicates:

What is expected?

Include the leading . in css class selectors like other extensions do so they can be merged and don't cause duplicate entries in the peek view.

What is actually happening?

. is not included.

Link to minimal reproduction

No response

Any additional comments?

Thank you!

[lethefrost]

Reference: pucelle/vscode-css-navigation#115

Maybe the . in class name is truncated in

language-tools/packages/language-core/lib/codegen/style/classProperty.ts

Line 20 in d45228a

classNameWithDot.slice(1),

[KazariEX]

The result of the CSS Navigation definitions contains the entire declaration.

[KazariEX]

Tsserver does not support customization of renaming results, so we have to ensure that these symbols do not contain . to maintain an exact match, otherwise the renaming will result in unexpected results.

[lethefrost]

Tsserver does not support customization of renaming results, so we have to ensure that these symbols do not contain . to maintain an exact match, otherwise the renaming will result in unexpected results.

Do you mean, in order to rename the same class in html template ("<element class="name" />) and css style (.name {...}), the class must have exactly the same string as their name, so . cannot be included? I don't have experiences in developing such language support extensions, so I'm not sure if I fully understood what you meant. I'd appreciate it if you could clarify a bit! Thank you.

[KazariEX]

Exactly. This is a limitation of implementing navigation based on typescript feature.

[lethefrost]

Exactly. This is a limitation of implementing navigation based on typescript feature.

Ah... what a pity. Would it be possible to add an option to not add the .-less entries into the peek view, so those .-less class names are only used for renaming, but won't cause duplicate entries in go-to-definition and reference list when working with other extensions?