Components not being highlighted in VS Code

[subz390]

Am I missing something? I didn't put this in a bug report because I'm not sure whether it's even a bug or is it just me? You know when you have a sense that something's different but can't quite understand what it is... I'm at that stage.
I think it's since the most recent Svelte for VS Code v101.3.0 update. Why are my <Component /> tags white instead of blue? That's the first question, and then when I hover over them... well I can't even remember if this is what I should be getting.
But somehow I imagine or expect more info than that. But it's more the point that I think I remember my <Components /> being blue before. And the <FetchEverything /> is only blue because I'm hovering over it, it's white aka unrecognised.
Any ideas?

Svelte for VS Code v101.3.0

*** VS Code ***
Version: 1.47.2 (user setup)
Commit: 17299e413d5590b14ab0340ea477cdd86ff13daf
Date: 2020-07-15T18:22:06.216Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.17763

[jasonlyu123]

We separate components tag to a separate syntax token entity in #315. I guess you're using dark(visual studio)? Seems like the es class would also be white in this theme

[subz390]

Can you change the colour of that?

[jasonlyu123]

Sorry, I can't change your theme. But you can override your theme if you don't like the color:

{
    "editor.tokenColorCustomizations": {
        "[Visual Studio Dark]": {
            "textMateRules": [
                {
                    "settings": {
                        "foreground": "#569CD6",
                    },
                    "scope": "support.class.component.svelte"
                }
            ],
        },
    }
}

you can either put it in your global or workspace setting.json. Change "[Visual Studio Dark]" to whatever you're using now.

[jasonlyu123]

To be clear, the issue is that we added a new kind of syntax highlight. But the theme you are using either not support it or it highlight that as white color. If we change it to another syntax highlight kind, there might be another theme not highlight it.

[subz390]

Thank you for the override options to add to settings.json very much appreciated.
I understand (and support) the reason behind adding a different syntax highlight for component tags.

However I'm confused why you didn't use support.class.component.svelte as it's a Svelte component not a tsx component. Or am I missing something?

[jasonlyu123]

Yeah, you were right, that's indeed quite confusing. I merge and released it too rushed. Changed it to support.class.component.svelte would have the same effect because the highlight the original PR trying to achieve is inherited from support.class. Change it to support.class.component.svelte would clear the confusion and give the theme author more room for customization. Will do, Thanks

[jasonlyu123]

You'll change the scope of the customization to support.class.component or support.class.component.svelte after it released.