[csswg-drafts] [css-syntax] [cssom] [css-conditional] Extend CSSStyleDeclaration to allow for nested at-rules (#5172)

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

== [css-syntax] [cssom] [css-conditional] Extend CSSStyleDeclaration to allow for nested at-rules ==
I strongly suspect this is a duplicate, but I can't find anything, so I'm gonna go ahead and post, just in case it hasn't been discussed before.

At-rules nested inside CSS rules have been proposed many times (@apply, @nest etc). In addition, nesting @supports and media queries inside CSS style rules would be incredibly useful and would allow things like

```css
#foo {
 width: 10em;
 @supports(width: min(1em, 1px)) {
  width: max(0em, 10em - var(--scrolltop));
 }
}
```

which would allow using fallbacks and MQ overrides more succinctly and keep everything in the same place.

The more CSS variables are adopted, the more `@supports` will need to be utilized for overriding fallbacks, since the cascade can't be used for fallbacks anymore. This leads to a lot of repetitive code, and a lot of disconnected code that one needs to hunt down to understand how the stylesheet works. Something like this would at least allow for keeping selectors DRY. 

Parsing-wise, @tabatkins has often proposed at-rules that are nested on the same level as CSS declarations, so I imagine it's fine syntax-wise and something that needs to happen anyway on the syntax level, even with restrictions on the type of at-rules that can be nested.

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

Received on Friday, 5 June 2020 04:15:24 UTC