🐛 BUG: Inconsistent highlighting of class names

[pikeas]

Describe the Bug

In a .astro file, the language server sets the language as, well, "Astro". This results in syntax highlighting that is inconsistent with other filetypes containing HTML content.

<div class="foo bar baz"></div>

Place the above in a .html or .vue file and the tag scope is html:string, which is then colored based on editor theme preferences. In a .astro file, the tag scope is astro:string, which instead applies fallback highlighting rules.

(In VS Code, scope can be checked with the command "Inspect Editor tokens and scopes".)

The language for frontmatter is set as Javascript or Typescript, and the same is true for <script>. For a consistent experience, non-script HTML tags should have their language set to html.

This may not work in practice due to Astro's variable syntax. Hopefully someone familiar with the language server protocol can find a way to reconcile things so everything works smoothly, possibly using the same mechanisms as the Vue extension.

[Princesseuh]

I unfortunately do not think we can do this like Vue does, Vue can do that easily because all the HTML is inside the template tag and thus, they know where to apply the text.html.derivative pattern. We're closer to Svelte in that regard, which has the same issue you're pointing out.

Something I also don't like about the Vue way of doing it is that by using the HTML definitions, it "corrupt" the HTML syntax, even inside .html files

Nonetheless, TextMate language files are so insanely complex that there's probably a way to do this, but from a quick exploration, I couldn't find a way to, sorry! I plan to revisit our syntax file in the future, hopefully we'll be able to find a solution then!