monaco-editor
monaco-editor copied to clipboard
[Bug] css: complex :has and nesting not supported
Reproducible in vscode.dev or in VS Code Desktop?
- [X] 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
https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0#XQAAAAJ4AQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzhVW-_1uhs0-3YGTBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugsKicTiIibGJnM64NkWjFr9YyL9XE678ZXezYsdzgVBbYT22XlvtijHB81ik2u_zx4JOKJcfHrUOtdFngfPYWvVNAI07lZ9UayTORIpeLwbzyX1rB-VGw2Kg0ZJJL-4eIRr4bm28M2Yhy40sDx6RekTRmc8x95JYBNq5MLIYFqk06M-blV1OcMTAl4bdtRqD7fIAfX3-CA6A5expv0WPp0k-1HFvpG8cE_1DkwX9CW5CsoasnU_aoZdLLr_6w0VtA
Monaco Editor Playground Code
const value = /* set from `myEditor.getModel()`: */ `
.foo {
.bar {
display: none;
}
}
.foo:has(> .bar) {
display: block;
}
`;
// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
value,
language: "css",
automaticLayout: true,
});
Reproduction Steps
Open / Copy paste example, run and observe errors in preview
Actual (Problematic) Behavior
Both css nesting and complex :has selectors like :has(> .foo)
result in syntax errors, while the same css works correctly in VSCode and once applied to a page in any modern browser supporting these features
Expected Behavior
the code should be correctly parsed without syntax errors
Additional Context
This is still an issue in the latest dev release v0.41.0-dev.20230710
Any updates on this? 👀
The latest vscode-css-languageservice has support for that syntax.
@hediet Can you update the json/css/html service when making the Monaco release?
there have been two releases since, neither of which seem to have updated the service; most recently 0.46.0 3 days ago. is this still being tracked? would be awesome if this issue could be resolved 🚎
#4492 seems to have resolved this, meaning 0.49.0 will be the release that fixes this
i can confirm this issue is no longer reproducible on 0.49.0! thanks for resolving it
https://microsoft.github.io/monaco-editor/playground.html?source=v0.49.0-dev-20240503#XQAAAAJ4AQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzhVW-_1uhs0-3YGTBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugsKicTiIibGJnM64NkWjFr9YyL9XE678ZXezYsdzgVBbYT22XlvtijHB81ik2u_zx4JOKJcfHrUOtdFngfPYWvVNAI07lZ9UayTORIpeLwbzyX1rB-VGw2Kg0ZJJL-4eIRr4bm28M2Yhy40sDx6RekTRmc8x95JYBNq5MLIYFqk06M-blV1OcMTAl4bdtRqD7fIAfX3-CA6A5expv0WPp0k-1HFvpG8cE_1DkwX9CW5CsoasnU_aoZdLLr_6w0VtA
note that this was in 0.49-dev-* but seemed to have gone from the 0.49-rc + final - but its back again in 0.50-dev