Bug #105014
closedCKEditor `contentsCss`: Selectors with `:has()` and `:where()` are not properly prefixed
100%
Description
Steps to reproduce:
1. Create and apply an RTE configuration with contentsCss
.
2. In the referenced CSS file, declare CSS using :has
and or :where
selectors.
3. Edit content in the backend, and inspect with the browser devtools. Selectors with :has
and :where
will not be applied. They seem to be missing in the constructed
CSS.
Example:
ul li:has(& > p.text-center) {
color: red;
}
Then, in the editor, create a list and center it. The list item will not be colored red. The devtools web inspector will not show any sign of these selectors.
Note that this isn't a nesting standard incompatibility. This does not work either:
ul li:has(> p.text-center) {
color: red;
}
Note that neither :has()
nor :where()
selectors work, but pseudo-classes like ::before
do.
According to AST explorer, css-tree
, the package used to preprocess editor CSS content, parses the :has
selector just fine: https://astexplorer.net/#/gist/244e2fb4da940df52bf0f4b94277db44/8f51276c0fcd8ce562da7cc695fb33d0b2fbef1a