bug: typescript grammar return tokens that contains same color for all scopes

[jefrydco]

Description

Using this code:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };

function area(s: Shape) {
  if (s.kind === "circle") {
    return Math.PI * s.radius * s.radius;
  } else if (s.kind === "square") {
    return s.x * s.x;
  } else {
    return (s.x * s.y) / 2;
  }
}

and nord themes, it returns the following theme token:

[
  [
    {
      "content": "type Shape =",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "type Shape =",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  | { kind: \"circle\"; radius: number }",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  | { kind: \"circle\"; radius: number }",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  | { kind: \"square\"; x: number }",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  | { kind: \"square\"; x: number }",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  | { kind: \"triangle\"; x: number; y: number };",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  | { kind: \"triangle\"; x: number; y: number };",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [],
  [
    {
      "content": "function area(s: Shape) {",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "function area(s: Shape) {",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  if (s.kind === \"circle\") {",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  if (s.kind === \"circle\") {",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "    return Math.PI * s.radius * s.radius;",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "    return Math.PI * s.radius * s.radius;",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  } else if (s.kind === \"square\") {",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  } else if (s.kind === \"square\") {",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "    return s.x * s.x;",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "    return s.x * s.x;",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  } else {",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  } else {",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "    return (s.x * s.y) / 2;",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "    return (s.x * s.y) / 2;",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "  }",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "  }",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  [
    {
      "content": "}",
      "color": "#D8DEE9FF",
      "explanation": [
        {
          "content": "}",
          "scopes": [
            {
              "scopeName": "documentation.injection.ts",
              "themeMatches": []
            }
          ]
        }
      ]
    }
  ],
  []
]

The color code are all #D8DEE9FF.

Expected

The color code is correctly match with theme declaration.

Additional Context

I only check typescript, JS and HTML. JS and HTML are working well but not for typescript.

TypeScript:

JS:

HTML:

I think it also related with #105

[VladimirMikulic]

@jefrydco set the mode to "typescript" for TypeScript code and it will work. Mode "ts" doesn't work at the moment, but I've submitted a fix so we should have this resolved soon.

[orta]

This fix was deployed with 0.9.0 👍🏻

[leafac]

Thank you all for this. I’m running 0.9.0 and ts is working again.