search

ajaxorg / ace

Ace (Ajax.org Cloud9 Editor)
https://ace.c9.io
Other
26.73k stars 5.28k forks source link

CSS level4 :has() & :is() pseudo-class fail to validate #5661

Closed dpierangeli closed 5 days ago

dpierangeli commented 6 days ago

Describe the feature

Describe the feature CSS supports :has() and :is() pseudo classes as baseline from 2023.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

But ACE shows validation error when using them

there were #5129 and #5018 but now they are closed

Use Case

I'd like validation support for this pseudo-classes to use them in ace editor

Proposed Solution

please add validation support for :has() and :is() pseudo classes to use them in editor

Other Information

No response

Acknowledgements

ACE version used

latest (1.36.3)

marinsokol5 commented 5 days ago

Hey,

I can't seem to reproduce it within https://ace.c9.io/build/kitchen-sink.html when pasting something like:

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
  margin-bottom: 0;
}

That being said, sadly the current language support within Ace repository, which is responsible for CSS validation, https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/css/csslint.js, is deprecated and out of support. We have no plans to improve it as of right now, and are still coming up with a better official communication on this topic.

My recommendation would be to switch to using ace-code NPM package together with ace-linters, since their CSS support (https://github.com/mkslanc/ace-linters/blob/main/packages/ace-linters/src/services/css/css-service.ts) is based on a much newer and better maintained internal library, the same one powering VS Code.