[themes] Flattening of text mate scopes leads to wrong coloring

[isidorn]

• Open nodeAppInsightsTelemtryAppender.ts#40
• Notice broken colouring of comments inside contructor arguments

Other problematic languages with deep scope hierarchies:

• JSX tags
• Java

[aeschli]

Problem is the flattening of the text mate scopes

[anyong]

Is there any progress on this issue? Judging by the other issues linked here, I'm assuming this is the same problem; it happens about half the time I do object destructuring in a render method with JSX, depending on where the newlines are.

[mikemimik]

I believe this is still an issue with destructuring in ES6

let {
  first,
  second,
  third
} = destructVar;
let otherVar = 6;

The second let wont be coloured correctly.
I have a large class module and the static methods defined after a large variable destructuring (multiline) aren't coloured correctly.

[RichieAHB]

I'm noting a lot of issues in Javascript. For example, passing objects as function parameters is just a whiteout in monokai ...

[ghost]

@aeschli, could you point to the syntax highlighting heuristic code which disambiguate these tokens, so we can try to fix it?

[aeschli]

Flattening happens at https://github.com/Microsoft/vscode/blob/master/src/vs/editor/node/textMate/TMSyntax.ts#L324
The challenge is the API ripple through the editor model APIs as well as fixing the color matching that is currently done with using CSS.

[Velok]

Don't know if I understand this correct.. One problem is the interference of the scopes because they are handled as css classes attached to the span tokens in the editor.

For example:

A class block gets the scope meta.class -> css classes meta class
The classname itself entity.name.class -> entity name class
A method declaration in the class block meta.method.declaration -> ..
The methodname itself entity.name.function

So the methodname token gets this classes: meta class entity name declaration method function

If you want to style classname and methodname the highlighting depends on the order in the tmTheme file. This is because the token has the css-class class from the scope meta.class and the class function from entity.name.function. So if you style the classname after the methodname in the tmTheme File it will override the style of the methodname.

How can this be fixed?

One approach is to add the scopes as they are to the html span-tokens i.e. entity.name.function meta.class (or with dashes instead of the periods) instead of entity name function meta class.

Other ideas?