[textmate] Semantic highlighting styles are overruled by the TM scopes

[kittaakos]

I am not sure if it is related to a recent TM change or the monaco update but it is broken in Theia. LSs cannot provide custom colors anymore.

See: https://github.com/theia-ide/yangster/pull/65#issuecomment-422367974

[kittaakos]

If I switched back before the [textmate] Use vscode-textmate, for instance to b6e09bdf, it works.

Also, it seems, there is some sort of precedence between the auto-generated inline class names. For instance, if the inlineClassName of the TM style is mtk6 and the style from the LS is mtk8, then the style from the LS wins. If the other way around, then the TM class overrides the style from the LS.

POC @ Monaco Editor Playground with the following code:

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "javascript"
});

var decorations = editor.deltaDecorations([], [
    { range: new monaco.Range(2,2,2,5), options: { inlineClassName: 'mtk22' }},
    { range: new monaco.Range(7,2,7,5), options: { inlineClassName: 'mtk6' }},
]);

The unc part is overriding the rule for function. It does not work for ers in Person although the spans are correct in the DOM.

<span><span class="mtk22">P</span><span class="mtk22 mtk6">ers</span><span class="mtk22">on</span><span class="mtk1">.prototype.getAge&nbsp;=&nbsp;</span><span class="mtk6">function</span><span class="mtk1">&nbsp;()&nbsp;{</span></span>

[kittaakos]

To clarify things here:

• TM scopes will be mapped into built-in CSS class names.
• The TM scopes will be translated into CSS class names with the following format mtk${NUMBER}.
• If there are multiple classes applied to the same DOM element, the class name with the higher ${NUMBER} will win.
• It was just a coincident it worked previously.

Proposed solution:

• When we're applying the semantic highlighting styles (from the LS), we have to delete all decorations that have mtk${NUMBER} class, and the number is smaller than the number for the semantic highlighting decoration.

[kittaakos]

Proposed solution:

• When we're applying the semantic highlighting styles (from the LS), we have to delete all decorations that have mtk${NUMBER} class, and the number is smaller than the number for the semantic highlighting decoration.

This is not possible, as the editor does not know about the syntax colored tokens as decorations. Instead of that, we need to customize the renderer, when we merge the TM tokens with the inline decorations: https://github.com/Microsoft/vscode/blob/c7b13ccb535e3035eb7a9afc1d1c74e0fb11c9ed/src/vs/editor/common/viewLayout/viewLineRenderer.ts#L602-L652

[kittaakos]

https://github.com/Microsoft/monaco-editor/issues/1070