Re: [csswg-drafts] [selectors][css-conditional] Pseudo-class that is syntactic sugar for wrapping in an `@rule` — any at-rule (#11969)

> syntactic sugar for wrapping in an `@rule` — any at-rule

I think this only makes sense for rules implementing the `CSSGroupingRule` interface, not any at-rule.

> essentially as an extension of nesting

Doing it this way implies restricting to [nested group rules](https://drafts.csswg.org/css-nesting/#nested-group-rules).

> operates merely as syntactic sugar

Do you mean that CSSOM would see the "rewritten" rules? Then you get into combinatorial explosions very easily.
Saying that `:at()` behaves as the rewritten form seems better (but probably considerably harder to implement).


> ```css
> .dark, :at(container style(--dark: 1)) { /* declarations */ }
> ```
> becomes:
> ```css
> .dark { /* declarations */ }
> @container style(--dark: 1) { & { /* declarations */ } }
> ```

Rather than `& { /* declarations */ }` it should probably be a [nested declarations rule](https://drafts.csswg.org/css-nesting/#nested-declarations-rule) so that it works with pseudo-elements and such.

> the relative order of `:at()` pseudo-classes if multiple are present is reflected in the nesting

This makes me think that it should be a combinator (could even go with `@`), not a pseudo-class

```css
.small-foo,
.foo @media(width < 500px) @layer {
  /* declarations */
}
```

(If a combinator needs to be a delim token, then `.foo @ media(width < 500px) @ layer`)

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11969#issuecomment-2741958366 using your GitHub account


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

Received on Friday, 21 March 2025 00:38:32 UTC