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

edge case for highlight in vue setup #4589

Closed Simon-He95 closed 2 months ago

Simon-He95 commented 2 months ago

Vue - Official extension or vue-tsc version

latest

VSCode version

latest

Vue version

latest

TypeScript version

latest

System Info

No response

Steps to reproduce

image

code

<script setup lang="ts">
type IType = Record<string,string>
</script>
<template>
  <div id='app'>
    <div class="list1" fw600 font-size-10 color-red>
      <div class="item" mb-5>item1</div>
      <div class="item" mb-5>item2</div>
      <div class="item" mb-5>item3</div>
    </div>
    <div class="list2">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
    <i fw-500 font-size-6>list2的样式写在了Custom css中</i>
    <br />
    <i fw-500 font-size-6>注释掉 config 中important:'#app',list2的样式才会生效</i>
  </div>
</template>
<style scoped>
/* Write custom CSS here, and transformer support. For example: */
.list2 {
  @apply fw600 font-size-10 color-red;
}

.list2 > .item {
  @apply mb-5;
}
</style>

What is expected?

when setup last with type xxx, will lead to highlight collapse

What is actually happening?

when setup last with type xxx, will lead to highlight collapse

Link to minimal reproduction

No response

Any additional comments?

No response

so1ve commented 2 months ago

Duplicate of https://github.com/vuejs/language-tools/issues/2060