search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
39.83k stars 3.55k forks source link

[Bug] Support CSS :has() pseudo-class #4457

Open ghost opened 5 months ago

ghost commented 5 months ago

Reproducible in vscode.dev or in VS Code Desktop?

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

Playground

Monaco Editor Playground Code

HTML:

<div id="container" style="height: 100%">
    <h1>I am an H1</h1>
    <span>I am a span</span>
</div>

CSS:

h1:has(~ span)
{
  color: red;
}

Reproduction Steps

Use the :has() pseudo-class with a selector function to trigger the syntax error.

Actual (Problematic) Behavior

Functionally, the code behaves as expected. However, the editor displays the following syntax error:

) expectedcss(css-rparentexpected)
<h1 :has>
⋮
<span>
[Selector Specificity](https://microsoft.github.io/monaco-editor/playground.html?source=v0.47.0): (0, 0, 2)

Expected Behavior

There should be no syntax error, similar to using the exact same code in VS Code.

Additional Context

VS Code has resolved this in issue #147353.

j4k0xb commented 5 months ago

duplicate: https://github.com/microsoft/monaco-editor/issues/4071