8000 Syntax highlighting breaks when `typeof` is followed by `!==` in `v-if` · Issue #5370 · vuejs/language-tools · GitHub
[go: up one dir, main page]
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
rijenkii opened this issue May 18, 2025 · 4 comments
Open

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

rijenkii opened this issue May 18, 2025 · 4 comments
Labels
good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first upstream: typescript

Comments

@rijenkii
Copy link
rijenkii commented May 18, 2025 •
edited
Loading

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?

Image

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.
@rijenkii rijenkii changed the title Syntax highlighting breaks when typeof is followed by !== Syntax highlighting breaks when typeof is followed by !== in v-if May 18, 2025
@KazariEX
Copy link
Member

@zyoshoka Do you have any idea about this?

@KazariEX KazariEX added 🍰 p2-nice-to-have good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first and removed pending triage labels May 18, 2025
@zyoshoka
Copy link
Contributor

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
Copy link
Author
rijenkii commented May 19, 2025 •
edited
Loading

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first upstream: typescript
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rijenkii @KazariEX @zyoshoka
0