[csswg-drafts] [css-nesting] Problems with indiscriminately wrapping all parent selectors with `:is()` (#9492)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] Problems with indiscriminately wrapping all parent selectors with `:is()` ==
Opening per action item in today’s telcon ( https://github.com/w3c/csswg-drafts/issues/8738#issuecomment-1768977689  )

## Problem

We currently desugar [every nested rule using `:is()`](https://drafts.csswg.org/css-nesting/#nest-selector), even when it’s completely redundant. E.g. this:

```css
.foo, #bar {
 & {
  color: red;
 }
}
```

apparently becomes:

```css
:is(.foo, #bar) {
 color: red;
}
```

This is not only redundant, it actually has observable side effects: since `:is()` has a flat specificity equal to the specificity of its argument with the highest specificity, the second rule is not equivalent to the first.

But even worse, because `:is()` cannot do pseudo-elements, it means this doesn’t work at all:

```css
.foo::before {
 padding: 1em;
 @media (width < 500px) {
  padding: .5em;
 }
}
```

It would be rewritten like:

```css
.foo::before {
 padding: 1em;
}

@media (width < 500px) {
 :is(.foo::before) {
  padding: .5em;
 }
}
```

which is invalid.

It also means we cannot fix #8738 by wrapping bare declarations after rules in `& {}` because in pseudo-elements they could be ignored.

## Proposed solution

`& {}` should have no observable side effects. There is never a case where `&` needs `:is()` to be rewritten, so adding it not only introduces the problems discussed above, but is entirely redundant. 

So a quick fix to the pressing issues could be to simply special case `&`.

Later down the line, we may want to consider expanding the set of cases that don’t require `:is()` because there is no danger of combinatorial explosion. From a quick call with @fantasai it seems to us that e.g. cases where there are only simple selectors all the way up would not need `:is()`, but more research is needed.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9492 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 18 October 2023 17:26:13 UTC