vuejs/vue-syntax-highlight

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

wopian opened this issue · 9 comments

wopian commented

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

Screenshot 2022-05-18 at 17 40 33

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 commented

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

This code snippet isn't broken in sublime though:

CleanShot 2022-05-18 at 12 48@2x

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.

  • 👍2
odanado commented

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

2022-08-22 23 57 25

ref: https://github.com/odan-sandbox/vue-github-syntax-highlight-broken/blob/main/src/components/HelloWorld.vue
  • 👍2
hfhchan-plb commented

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

sparr commented

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 commented

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?

  • 👍5
KyeRussell commented

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

  • 👍5
RyStanley89 commented

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