🐛 BUG: Syntax highlighting in braces

[cdtut]

Describe the Bug

Words inside braces have wrong highlighting. They are different from same words outside braces.

Steps to Reproduce

Write in vscode and see highlighting.

<div>word</div>
{true && <div>word</div>}

[Princesseuh]

I suspect the theme you're using is theming text in the JSX scope wrongly or perhaps has a custom theme just for JSX. Outside of expressions, we match (as best as we can) HTML highlighting and looking at all the theme I have installed, our text color matches's always HTML and only a few themes are handling JSX wrongly, in most themes they're the same color. We specifically use the text.astro scope to use the proper color for text.

There's unfortunately nothing we can do about themes theming specific embedded languages differently from Astro.

[cdtut]

Found workaround.

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "meta.tag",
      "settings": {
        "foreground": "#FFFFFF"
      }
    }
  ]
}

Can meta.tag refer to same value as text.astro/source.astro so they are always same color?

[Princesseuh]

We could probably set meta.tag on the content of the tag like JSX does, yes! We followed HTML in this regard where the content is always text.

Would you be willing to send a PR for this? I can't quite remember how we handle tag content so can't pinpoint the line just now, but the syntax file is here and should be fairly documented: https://github.com/withastro/language-tools/blob/main/packages/vscode/syntaxes/astro.tmLanguage.src.yaml

[goulvenclech]

Sadly @cdtut , HTML and JSX have different approaches to syntax highlighting. JSX chose to have a meta.tag pattern matching tags and their content, while HTML chose to differentiate tags and text (tags content).

Astro chose to follow HTML, and it seems impossible to make these philosophies coexist 😕 @Princesseuh maybe you should close this issue?

[Princesseuh]

Yeah, after investigating it seems like it's impossible to make everything work. You end up either breaking themes that highlight JSX's meta.tag a particular way, or you break those that highlight text a particular way. It's quite wonky. Other frameworks that uses JavaScript's TextMate grammar + HTML also have a similar issue.

Since:

• There's a workaround
• It doesn't affect a lot of themes
• We generally align with HTML when possible

I'll just close this, apologies for the inconveniences. In the future, if we choose the completely own syntax highlighting inside expressions, we could fix this then, but it's a fairly consequential task.