Repository: TypeScript
Issue: "function" semantic token applied instead of "decorator", thus cannot configure correct syntax highlighting
Labels: Bug,Help Wanted

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported directly to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->
- VS Code Version: 1.70.1
- OS Version: Windows 11 Enterprise (21H2)

Steps to reproduce:
1. Create a theme;
2. Enable semantic highlighting;
3. Configure TextMate scopes for functions and decorators;
4. Configure "decorator" token under "semanticTokenColors";
5. The decorators calls are identified as functions instead of decorators (should be able since it is prefixed with "@").

Details:
I created a custom theme with semantic syntax highlighting enabled, but I faced a problem with decorators in TypeScript, specifically, I believe VS Code fails to understand that something prefixed with and "@" is a decorator and not a function. As a result, the applied color for syntax highlight is inherited from the "function" semantic token type (which inherits from TextMate scopes) as you can see below.

> The decorators used are from NestJS framework.

**With semantic highlighting enabled - does not highlight the way I want**
![image](https://user-images.githubusercontent.com/9747155/184642371-5f5eb33e-e282-4898-9c1b-1f60ed9b4b94.png)

**With semantic highlighting disabled - works**
![image](https://user-images.githubusercontent.com/9747155/184642510-656a6e2e-eb2b-4fe1-ad71-3e99b89101d0.png)

**My theme configuration**

```json
{
    "semanticHighlighting": true,
    "semanticTokenColors": {
        "decorator": { 
            "foreground": "#808000",  // tried using this token, but since vs code reports that it is "function", this never get applied.
            "fontStyle": "bold"
        }
    } 
    "tokenColors": [
        {
            "name": "Decorators",
            "scope": [
                "punctuation.decorator",
                "meta.decorator entity.name.function"
            ],
            "settings": {
                "foreground": "#808000", // applies correctly if semantic highlighting is disabled, which is correct
                "fontStyle": ""
            }
        },
        {
            "name": "Classes - Methods",
            "scope": [
                "entity.name.function"
            ],
            "settings": {
                "foreground": "#1EB540", // This is the color that get applied on the decorator when semantic highlighting is enabled
                "fontStyle": "bold"
            }
        }
    ]
}
```

I already tried many things and I could not find a solution. Am I missing something here?

If you need the full theme file, you can get it here: https://github.com/giancarlo-dm/vivid-monokai-vscode