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

Some really great feedback @Loirooriol, thanks!

> > 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.

I think that would satisfy > 99% of use cases, so if it makes things easier, let's do that.

> > 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).

I think that’s probably fine. I don’t see `@starting-style` in that list, but pretty sure that’s just an omission.

> 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).

No strong opinion, fine to go with whichever option is easiest to implement. The former also makes debugging easier, as dev tools don’t need to catch up and design new UI for this, it just works (this is a low priority reason as we don't design syntax to aid debugging, but it's still a small benefit).

I think using more than one `:at()` in the same selector list is pretty rare, and using more than two is practically nonexistent, so while combinatorial explosions are _possible_, they don’t seem very _likely_ to come up in regular use. To prevent malicious use we could perhaps set a reasonable upper bound for the number of `:at()`s that can be used in a selector list.

> > .dark, :at(container style(--dark: 1)) { /* declarations */ }
> >     
> >       
> >     
> > 
> >       
> >     
> > 
> >     
> >   
> > becomes:
> > .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.

Ah good point.

> > 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
> 
> .small-foo,
> .foo @media(width < 500px) @layer {
>   /* declarations */
> }
> (If a combinator needs to be a delim token, then `.foo @ media(width < 500px) @ layer`)

Oooh that's a very good point! I really like this. Funny, I’m usually the one shouting "won't someone _please_ think of combinators?" and I totally didn't think of them this time 😅 

I was trying to avoid an actual `@` to make the grammar easier and require fewer syntactic changes. 
We’ve previously sanctioned a `/foo/` syntax for future combinators, so we could use that:

```css
.foo /at media(width < 500px)/ /at layer/ {
   /* declarations */
}
```

But obviously, the syntax you’re proposing is **by far** the most natural, so if the grammar can accommodate it, that would be **fantastic**. Perhaps @tabatkins can shed some light on this.

The main requirement is that going forwards, future grouping rules should not require spec changes to be used in that way, but if we define it in the way you just described, that seems to be satisfied. 👍🏼 

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11969#issuecomment-2743832011 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 16:11:41 UTC