csswg-drafts
csswg-drafts copied to clipboard
[css-cascade] @scope as a nested grouping rule and CSSNestedDeclarations
This came up when discussing #10389:
It is currently possible to place bare declarations directly in a @scope
rule if it's a nested grouping rule:
div {
@scope (#foo) {
color: green;
#bar {
width: 10px;
}
z-index: 42;
}
}
I think current WPTs (which haven't yet picked up #10234, nor the @nest
edit which came before it) require the above to desugar to:
div {
@scope (#foo) {
:scope { /* <== The selector and its specificity being the relevant part for this issue */
color: green;
z-index: 42;
}
#bar {
width: 10px;
}
}
}
(I think per specs that should strictly have been wrapped in a &{}
actually, but I apparently forgot to raise an issue for this).
As of #10234, I believe we now intend to desugar to:
div {
@scope (#foo) {
/* CSSNestedDeclarations { */
color: green;
/* } */
#bar {
width: 10px;
}
/* CSSNestedDeclarations { */
z-index: 42;
/* } */
}
}
Where the CSSNestedDeclarations
rules match whatever #foo
matches (but within the scope, obviously), and with ... the same specificity as #foo
? It's this specificity part I'm not sure about, as it doesn't seem consistent with how "implied stuff" in @scope
is intended to work. For example, the #bar
selector effectively gets an implied :where(:scope)
selector prepended (#10196), which adds no specificity.
So I wonder if we should specify that CSSNestedDeclarations
rules, when the appear directly beneath @scope
, should act as :scope {}
or :where(:scope) {}
rules? (@mirisuzanne)