FormidableLabs / FormidableLabs/prism-react-renderer
Color for aliased tokens not applied correctly
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 149
- PR merge metrics
- No merged PRs in 30d
Description
### 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:
```gdscript
# 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:
```typescript
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)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.