Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] css: complex :has and nesting not supported #4071

Closed
1 of 2 tasks
Vendicated opened this issue Jul 11, 2023 · 6 comments
Closed
1 of 2 tasks

[Bug] css: complex :has and nesting not supported #4071

Vendicated opened this issue Jul 11, 2023 · 6 comments
Assignees
Labels
css feature-request Request for new features or functionality

Comments

@Vendicated
Copy link

Vendicated commented Jul 11, 2023

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

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

@florinpop17
Copy link

Any updates on this? 👀

@aeschli
Copy link
Contributor

aeschli commented Nov 7, 2023

The latest vscode-css-languageservice has support for that syntax.

@hediet Can you update the json/css/html service when making the Monaco release?

@aeschli aeschli assigned hediet and unassigned aeschli Dec 19, 2023
@hediet hediet added the feature-request Request for new features or functionality label Jan 3, 2024
@Vendicated
Copy link
Author

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 🚎

@Cynosphere
Copy link

#4492 seems to have resolved this, meaning 0.49.0 will be the release that fixes this

@AndersMad
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests

6 participants