vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.79k stars 390 forks source link

fix(language-service): ignore css rename when use typescript-semanitc rename #4681

Open linghaoSu opened 1 month ago

linghaoSu commented 1 month ago

fix https://github.com/vuejs/language-tools/issues/4677

When performing a rename, if the rename action is done on the name itself rather than on the . (dot), it triggers both the typescript-semantic and css plugins. However, if the rename is performed on the . (dot), only the css plugin's rename operation is triggered.

  1. When both typescript-semantic and css plugins are triggered:

The typescript-semantic plugin correctly generates the modification based on the TypeScript files generated by Vue.

On the other hand, the css plugin analyzes the CSS block and extracts the range including the . for the rename operation. When we trigger the rename, the content we input does not include the ., but the target range for replacement does include it, leading to a misalignment issue.


  .foo
// typescript-semantic
->.foo1

// css
      ! This is the leftover content from the TypeScript plugin above
->foo11
  ^^^^
   Generated by the CSS plugin
  1. When only the css plugin is triggered:

In this case, the input needs to include the entire selector, including the .. However, triggering the rename only for the CSS part does not update the class names in the template area, so the desired effect is not achieved.

linghaoSu commented 1 month ago

I'm not entirely sure if this is the best approach, but it seems to resolve the issue effectively.

KazariEX commented 1 month ago

This solves another problem: renaming variables in v-bind() does not take effect on the source definition.

However, this will make the normal CSS renaming behavior unavailable. We might need to reimplement it here.