Optional chaining operator (?.) in <template> breaks syntax highlighting on GitHub

[wopian]

I don't use Sublime Text (so can't check the new branch), but this issue appears on GitHub which uses this repository for syntax highlighting and is using the latest version of the master branch.

The optional chaining operator (?.) causes the file to stop syntax highlighting the rest of the file when it is used in an attribute inside <template>

With optional chaining operator:

<script setup lang="ts">
  const hello = {}
</script>
<template>
	<div v-if="hello?.world" />
</template>
<style>
	div {
      font-size: 16px;
    }
</style>

Screenshot

Without optional chaining operator:

<script setup lang="ts">
  const hello = {}
</script>
<template>
	<div v-if="hello.world" />
</template>
<style>
	div {
      font-size: 16px;
    }
</style>

[skyronic]

The .tmLanguage definitions - used by linguist hasn't been updated for a while.

This code snippet isn't broken in sublime though:

I'll look into if it's possible to update the .tmLanguage but I can't comment on how feasible it is without taking a closer look.

[odanado]

I found the same problem too.
vue-syntax-highlight is used for syntax highlighting on GitHub
https://github.com/github/linguist/blob/master/grammars.yml

ref: https://github.com/odan-sandbox/vue-github-syntax-highlight-broken/blob/main/src/components/HelloWorld.vue

[Leland]

Chiming in with another instance in the wild on GitHub: https://github.com/divamgupta/diffusionbee-stable-diffusion-ui/blob/b2a2a041757db280e2218a96dd1ca6c06617bfce/electron_app/src/StableDiffusion.vue#L41

[hfhchan-plb]

+1, it causes all the subsequent CSS to show up as invalid too, as the parser believes it's still in JS mode.

[hfhchan-plb]

See also: github-linguist/linguist#6001

[sparr]

Another example in the wild: https://github.com/snapshot-labs/snapshot/blob/3151610c3121d7ffe07cf2b8e811de341c7866ad/src/components/Ui/Avatar.vue

And a shorter test case:

<a>
	<b v-if="c?.d" />
</a>

[kaiarrowood]

We have numerous instances of this in our repos. The nullish coalescing operator ?? also breaks the syntax highlighting. Vue 3 is pushing heavily towards typescript so instances of this are just going to get more and more common. Has there been any movement on this issue since it's been created?

[KyeRussell]

If it helps get a sense of severity: just checking in to say that also I've run into this several times.

[RyStanley89]

This issue continues to affect many users. Any assistance from contributors in resolving this would be greatly appreciated.

[yuichkun]

Not that it's a fix for this repo, but as to address the breaking syntax on GitHub, I've made a PR to linguist so that they use supposedly newer/maintained vuejs/language-tools for Vue.js grammar source.

It's approved, but won't be there until they make the next release (could be a few months)

[yuichkun]

It's approved, but won't be there until they make the next release (could be a few months)

It's out now and I've confirmed that it fixed the syntax break on my side 🎉