Color for aliased tokens not applied correctly

[Cykyrios]

Is there an existing issue for this?

• [x] I have searched the existing issues

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

Code Sandbox link

No response

Bug report

I am using Docusaurus to build a code documentation site for a Godot GDScript library I'm working on. Prism's GDScript definition is completely outdated (because GDScript 2 was introduced with Godot 4), so I made my own version of the lexer, which works nicely. I also made a dark/light theme specifically for GDScript, making use of some of its specificities (documentation comments being colored differently from standard comments, builtin types, builtin objects, and user types being different, etc.), but I'm facing issues with the colors of such tokens not being applied as I expect them to.

Here is a small code example:

# A standard comment
## A documentation comment
func test_function(param: int) -> float:
    return called_function(param)

Here is the expected output (screenshot from the Godot editor): And how it looks currently with Docusaurus and my custom theme:

There are multiple instances of the same issue here: doc-comment is colored as comment, function-definition as function, and control-flow (for the return keyword) as keyword. Focusing on comments, my lexer is able to tokenize the first line as comment, and the second line as doc-comment. Following is an excerpt from my custom theme:

import type { PrismTheme } from "prism-react-renderer"
const theme: PrismTheme = {
  plain: {
    color: "#CDCFD2",
    backgroundColor: "#1D2229",
  },
  styles: [
    {
      types: ["doc-comment"],
      style: {
        color: "#99B3CC", // same result with #99B3CCCC and no opacity field
        opacity: 0.8,
      },
    },
    {
      types: ["comment"],
      style: {
        color: "#CDCFD2", // same result with #CDCFD280 and not opacity field
        opacity: 0.5,
      },
    },
    // etc.
  ],
}
export default theme

With my updated Prism definition for GDScript, the first comment line is being tokenized as class="token comment", and the second line as class="token doc-comment comment"; however, both get the exact same color (rgb(205, 207, 210)), and even the same opacity of 0.5. If I add fontStyle: "italic" to the doc-comment, however, only doc-comments correctly get stylized this way. Swapping the entries did not change the resulting behavior. However, if I remove the comment entry entirely, doc-comment tokens will get their color applied properly.

Is there any known issue with aliased keywords not applying their color properly?

(on a side note, you might want to update the report template to allow markdown preview and attaching screenshots, as I had to edit to add them)

[Cykyrios]

I managed to get things working the way I want with the following workaround: all aliased keywords are removed from the typescript theme, and instead styled from CSS; e.g. function is styled in CSS, while function-definition is styled in typescript. One exception for my use case is comment and doc-comment: I put both in CSS, as they can have extra tokens inside (such as TODO, FIXME and other such notes), which would otherwise inherit the opacity.

Still, this feels a bit hacky, but at least I can still leverage the typescript theme instead of having to define everything in CSS, so that works for me.