Make mtk classes more specific to avoid CSS conflicts

[cipacda]

Currently the editor classes are in the format .mtk${number} format, and are not very specific.

With the use with other libraries, this might conflict with generic css (i.e. .parent span {color: inherit}). Making it more specific, will avoid that and mtk classes should always be inside .monaco-editor as per my understanding.

[alexdima]

Thank you!

[mjbvz]

Hey @cipacda, we had to revert this since it caused issues in a few cases: #106312

Did you run into a specific problem with the generated class names conflicting the class names from a library? If so, can you share more info about it. I'm just trying to understand if we to try re-applying the change this iteration

[cipacda]

Hey @mjbvz ,

The issue that I encountered was that if there are other libraries in the application that for example will have a css of .container > span { color: red }, they will overwrite the CSS settings applied from the auto generated .mtk{number} classes as the other library will take precedence, having a more specific definition.

Thanks for looking into this,
Ciprian

[mjbvz]

Ok. That seems like a bad css rule to me. Even with this fix, I think any other more specific rules would trigger same issue, such as .a .b > span { color: red; }

[cipacda]

I agree it's a bad css rule, but if that happens in a 3rd party library there's no easy way to fix this (I got this issues when using vscode editor inside a rich text editor). If the vscode CSS classes are more specific it gives possibility to overcome this issue. I managed to find a workaround locally, but I think this could help others as well.

[alexdima]

@cipacda But how did this rule .container > span { color: red } match editor tokens, since the HTML looks like this:

<div style="top:0px;height:18px;" class="view-line"><span><span class="mtk6">const</span><span class="mtk1">&nbsp;myCar&nbsp;=&nbsp;</span><span class="mtk6">new</span><span class="mtk1">&nbsp;</span><span class="mtk22">Car</span><span class="mtk1">();</span></span></div>

The spans with .mtk do not have a parent dom node with the class name .container in there.

[cipacda]

My example was a generic one, sorry. And the actual issue I had was with something like .container span { color: red }, with container being a class from the parent rich text editor.

I mistyped the above css rule in hurry, my bad.