Svelte highlighting seems to be not working

[stevepopovich]

Describe the bug

Hi folks, hubber here from the mobile team. Svelte highlighting seems to be broken and has been for months. I am trying to get to the bottom of what is going on and need some direction, hoping y'all can help.

Highlighting in this https://github.com/Lleweraf/supachat/blob/latest/src/components/ChatInput.svelte is broken, both on dotcom and on mobile.

Expected behaviour

We should see svelte code highlighted properly

Related discussion

This is the original issue we are tracking on mobile.

[lildude]

@stevepopovich I recently got to the bottom of this in https://github.com/github/linguist/discussions/6164

In short, the grammar is using regex matches in the scope names but GitHub's very old syntax highlighter (prettylights) doesn't expand these so subsequent rules aren't found.

The old highlighter isn't going to be fixed so the options are:

• update the grammar to take this limitation into account, or
• confirm the tree-sitter grammar is at least as complete as the Textmate-based grammar and renders correctly and then I can lobby to have that added to the new highlighter (treelights) instead (Linguist has no direct influence on the treelights grammars).

I'm waiting to hear back on that discussion, but in short this isn't a Linguist issue but rather a grammar/highlighter issue.

[lildude]

I've done some quick testing in dev using the tree-sitter grammar and it looks promising and much better than the Textmate grammar:

I'm going to submit a PR proposing to add the Svelte tree-sitter grammar. We'll see how it goes.

[stevepopovich]

Amazing! Thank you. Sorry I was in the wrong spot, things have gotten confusing for me trying to figure out who owns the problem.

[lildude]

So it turns out my local dev env was not actually pulling in the treesitter grammar when testing. It was actually pulling in the TextMate grammar from Linguist v7.20.0 which means the TextMate grammar was working properly then and started failing after that.

More deets in my response at https://github.com/github/linguist/discussions/6164#discussioncomment-4215301

[stevepopovich]

So once https://github.com/github/github/pull/248502 is deployed, this is expected to be fixed?

[lildude]

Yup.

[lildude]

And we're back to working Svelte syntax highlighting (below should look like the screenshot above):

<script>
  const notWorking = 'I am not highlighted';
</script>

{#each something as s}
  <p on:click={doSomething}>
    Our tags are highlighted correctly
  </p>
{/each}

<style>
  .not-highlighted {
    color: 'black'; // because it isn't highlighted bar
  }
</style>

<template>
  {#each something as s}
    <p on:click={doSomething}>
      Now we aren't working.
    </p>
  {/each}
</template>