microsoft / microsoft/monaco-editor
[Bug] Support CSS :has() pseudo-class
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Reproducible in vscode.dev or in VS Code Desktop?
- Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Monaco Editor Playground and reproduce the CSS diagnostic for h1:has(~ span). Compare the behavior with VS Code and the resolution referenced in issue #147353; done means this selector produces no syntax error while normal CSS validation still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100