Monaco-editor: "transparent" is not a supported color

[fabiospampinato]

monaco-editor version: 0.19.3
Playground code that reproduces the issue:

monaco.editor.defineTheme('myCustomTheme', {
    base: 'vs',
    inherit: true,
    rules: [
        { token: 'comment', foreground: 'transparent' }
    ]
});

monaco.editor.create(document.getElementById("container"), {
    value: '<div>',
    language: "text/html",
    theme: "myCustomTheme"
});

transparent should be handled correctly just as red and #00000000 are handled correctly already.

[fabiospampinato]

Actually I don't think red is handled correctly either, I think Monaco defaults to red, which is pretty confusing if one sets red as it would seem that it's working while it's not.

A comprehensive map of all available keyword colors is available here: https://github.com/fabiospampinato/khroma/blob/fa81639c242fdcf6492c36e2fb85f04664e042da/src/color/keyword.ts#L13-L161

[fabiospampinato]

Apparently not even rgb(a) colors are supported, probably neither are hsl(a) colors. I think everything that's a valid CSS color should be supported.

As a workaround I'm resorting to converting all colors to hex dynamically, but that has a small performance cost (~0.2ms to convert ~50 colors on my machine) and perhaps more importantly there's a loss in accuracy when converting to hex as decimal values get rounded.

[alexdima]

Currently, the format is #RRGGBBAA because individual color components are needed in the editor, e.g. when painting the minimap, which is backed by an ImageData (an Uint8ClampedArray)

[fabiospampinato]

As part of this thing I wrote a few functions that allow you to get every possible channel from every possible CSS color, it's as fast as I could make it. If you want to integrate that with the editor just let me know and I'll make a standalone package for it.

[alexdima]

@fabiospampinato That looks cool. Unfortunately, we only take dependencies in VS Code if we really really really need to in order to keep our code size down.