[css-nesting] Define nestable at-rules more completely.

Author: tabatkins

css-nesting-1/Overview.bs

@@ -576,29 +576,37 @@ Syntax {#syntax}
  ██████   ███████  ██    ██ ████████
 -->
 
-Nesting Nesting Other At-Rules {#conditionals}
------------------------------------------
+Nesting Other At-Rules {#conditionals}
+--------------------------------------
 
 	In addition to [=nested style rules=],
-	this specification allows <dfn export>nested conditional group rules</dfn>
-	inside of [=style rules=].
+	this specification allows <dfn export>nested group rules</dfn>
+	inside of [=style rules=]:
+	any at-rule whose body contains [=style rules=]
+	can be nested inside of a [=style rule=] as well.
 
 	When nested in this way,
-	the contents of a [=conditional group rule=] are parsed as <<style-block>>
+	the contents of a [=nested group rule=] are parsed as <<style-block>>
 	rather than <<stylesheet>>:
 
-	* Properties can be directly used,
-		applying to the same elements as the parent rule
-		(when the [=conditional group rule=] matches)
 	* [=Style rules=] are [=nested style rules=],
 		with their [=nesting selector=] taking its definition
 		from the nearest ancestor [=style rule=].
+	* Properties can be directly used,
+		acting as if they were nested in a <code>& {...}</code> block.
 
-	Issue: Do @media/etc gain a <code>.style</code> attribute
-	to expose their properties,
-	or do we pretend properties are wrapped in a ''& {...}'' rule,
-	so we can just reflect them in the <code>.cssRules</code> attribute?
-	(<a href="https://github.com/w3c/csswg-drafts/issues/7850">Issue 7850</a>)
+	<div class=note>
+		Specifically, these rules are capable of being [=nested group rules=]:
+
+		* all the [=conditional group rules=] (''@media'', ''@supports'')
+		* ''@layer''
+		* ''@scope''
+		* ''@container''
+	</div>
+
+	The meanings and behavior of such [=nested group rules=]
+	is otherwise unchanged,
+	unless otherwise specified.
 
 	<div class="example">
 		For example, the following conditional nestings are valid:
@@ -705,6 +713,88 @@ Nesting Nesting Other At-Rules {#conditionals}
 		</pre>
 	</div>
 
+	All directly-nested properties are treated
+	as if they were collected together, in order,
+	and nested in a [=nested style rule=]
+	with the selector ''&'',
+	and placed before all other child rules.
+
+	<div class=example>
+
+		For example, the earlier example:
+
+		<pre highlight=css>
+		.foo {
+			display: grid;
+
+			@media (orientation: landscape) {
+				grid-auto-flow: column;
+			}
+		}
+		/* equivalent to
+			.foo {
+				display: grid;
+
+				@media (orientation: landscape) {
+					& {
+						grid-auto-flow: column;
+					}
+				}
+			}
+		*/
+		</pre>
+
+		is in fact <em>exactly</em> equivalent,
+		producing the exact same CSSOM structure.
+		The {{CSSMediaRule}} object
+		will have a single {{CSSStyleRule}} object
+		in its <code highlight=js>.childRules</code> attribute,
+		containing the 'grid-auto-flow' property.
+	</div>
+
+	Issue: Need to modify the serialization rules,
+	as in <a href="https://github.com/w3c/csswg-drafts/issues/7850#issuecomment-1288883780">this comment</a>,
+	to remove the wrapping rule
+	when the first child rule is <code>& {...}</code>.
+
+### Nested ''@scope'' Rules {#nesting-at-scope}
+
+	When the ''@scope'' rule is a [=nested group rule=],
+	an ''&'' in the <<scope-start>> selector
+	refers to the elements matched
+	by the nearest ancestor style rule.
+
+	For the purposes of the style rules in its body
+	and its own <<scope-end>> selector,
+	the ''@scope'' rule is treated as an ancestor style rule,
+	matching the elements matched by its <<scope-start>> selector.
+
+	<div class=example>
+		That is, the following code:
+
+		<pre highlight=css>
+		.parent {
+			color: blue;
+
+			@scope (& > .scope) to (& .limit) {
+				& .content {
+					color: red;
+				}
+			}
+		}
+		</pre>
+
+		is equivalent to:
+
+		<pre highlight=css>
+		.parent { color: blue; }
+		@scope (.parent > .scope) to (.parent > .scope .limit) {
+			.parent > .scope .content {
+				color: red;
+			}
+		}
+		</pre>
+	</div>
 
 <!--
 ██     ██ ████ ██     ██ ████ ██    ██  ██████