[cssom] [css-conditional] Extend CSSStyleDeclaration to allow for nested at-rules

[LeaVerou]

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

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

[tabatkins]

Yes, it's fine syntax-wise, it just needs (a) definition in the grammar, and more importantly (b) exposure in CSSOM.

[LeaVerou]

@tabatkins Does it's fine mean it's already allowed in css-syntax or that it's no problem to add?

[tabatkins]

Already allowed in Syntax. Every block allows at-rules inside of it, they just have to decide whether they also allow declarations or qualified rules (since they clash syntactically).

[LeaVerou]

I suppose I can remove css-syntax from the issue then.

[jonathantneal]

Thanks for opening this thread, @LeaVerou. I have not found another thread. I think this issue can address Issue #1 from the specification:

ISSUE 1

1. Add an interface for the @nest rule.
2. Tie into the general work needed to let rules be nested into style rules.

As @tabatkins pointed out, at-rules are already allowed syntactically, as part of the algorithm to consume a list of declarations. Does this algorithm mean that at-rules (and soon nesting-rules) should be considered kinds of declarations? Knowing how to refer to these things will help me contribute ideas for the interface.

Are there existing ideas for how or where these nesting-rules will fit into the existing CSS Object Model?

Should the CSSOM interface for nesting rules be addressed as part of the resolution for #5649 to “resolve sep interfaces for declarations that declare different things”? (Perhaps this goes back to whether these nesting rules are declarations.)

[argyleink]

this can close because the feature was added to the spec here yeah?