Syntax highlighting breaks with dynamic object literal in v-bind

[Mattyon]

Vue - Official extension or vue-tsc version

2.2.8

VSCode version

1.99.1

Vue version

3.5.0

TypeScript version

n/a

System Info

package.json dependencies

Steps to reproduce

Create a Vue component with the following snippet:

<template>
  <div v-bind="{ class: foo[bar] }">
    Text
  </div>
</template>

<script setup>
const foo = 'name'
const bar = { name: 'text-bold' }
</script>

What is expected?

Syntax highlighting remains correct

What is actually happening?

Syntax highlighting breaks after the v-bind (when the [bar] part is added)

Link to minimal reproduction

No response

Any additional comments?

Seems like downgrading Vue - official to version <2 fixes the issue.

[KazariEX]

I cannot reproduce this. Can you disable all other extensions and check if the problem still persists?

[Mattyon]

Apparently this is reproducible with the combination of Vue - Official and WindiCSS IntelliSense plugins.

[KazariEX]

It seems that the problem is caused by this file: https://github.com/windicss/windicss-intellisense/blob/95aa33e/syntax/windi.attr.json

I think it would be better to open an issue at this repo.

[KazariEX]

It seems that this repo is no longer under maintenance?

[Mattyon]

Thanks for helping me solve this issue. I guess the best way is to abandon WindiCSS as it's an ancient relic at this point anyways. Closing.