Syntax highlighting breaks when `typeof` is followed by `!==` in `v-if`

[rijenkii]

Vue - Official extension or vue-tsc version

Unknown, Reproduced in playground

VSCode version

N/A, Reproduced in playground

Vue version

3.5.14

TypeScript version

5.8.3

System Info

N/A

package.json dependencies

N/A

Steps to reproduce

1. Create a .vue file
2. Write following into it:

   <template>
     <template v-if="typeof 'string' === 'string'">
       <!-- Syntax highlighting is correct -->
     </template>
   
     <template v-if="typeof 'string' !== 'number'">
       <!-- Syntax highlighting is very broken -->
     </template>
   </template>

What is expected?

File to be correctly highlighted

What is actually happening?

Link to minimal reproduction

https://play.vuejs.org/#eNqNUtFqwjAU/ZXsvvhiM4YKQ9bBNnzYHrYxx54Co9ZrjaZJSG67ivjvSyp2DkR8KPSec27OySFbeLCW1xXCGO4IS6sywnuhGesmVidykQqgjUWzYD1PTuqix9I07QYB7U7YukoSNt1oyhq2lMVShY+CgknPcuMc5sSSZG9wfeR3keNVdNRVOUN3mWONbsNmzqxRn3T9N0AfyOdGL2TBV97o0Mg2bgjITWmlQvdmSRrtBYxZy0QuU8r8vLQYuQr7BzxfYr4+ga98EzEB7w49uhoFdBxlrkDa05PpKzbhvyNLM69UUJ8hP9AbVcWMe9ljpech9pGuTftcWuNiRZ9+0hBqf7hUDBqVu1YvIDyLpzNX/4s74MN2T+hdaPE71B7PDAUO+IjfDCNG/qtDR/yWD2D3CyZNzds=

Any additional comments?

After creating the issue I've noticed that syntax highlighting is also broken in github. Funny.

[KazariEX]

@zyoshoka Do you have any idea about this?

[zyoshoka]

This could be considered an upstream issue, as it is reproduced in the following Svelte highlight.

<script lang="ts">typeof 'string' !== 'string'</script><!-- broken -->

Both VS Code and GitHub use the official TypeScript tmLanguage, which apparently has problems related to typeof (microsoft/TypeScript-TmLanguage#978), so I suspect this is the cause.

[rijenkii]

See similar (same?) issue from 2021: #112.

Interesting note: github's linguist (thing that highlights code in the comments/issues) seems to use tree-sitter-typescript instead of TypeScript-TmLanguage for typescript (search for typescript on the vendor/README.md page).

Linguist seems to use grammar from this repo to highlight code (search vue on that same page).

[zyoshoka]

Yes, pure TypeScript code is highlighted by tree-sitter, but embedded TypeScript code within TextMate highlighting seems to reference the tmLanguage instead.