[css-nesting-1] Allow conditional nested rules to adopt context (#6483)

Co-authored-by: Lea Verou <lea@verou.me>

Author: argyleink

css-nesting-1/Overview.bs

@@ -466,11 +466,12 @@ Nesting Conditional Rules {#conditionals}
 -----------------------------------------------
 
 	A style rule can have any number of <a>conditional rules</a> inside of it, of any type,
-	intermixed with any number of declarations, in any order.
+	with rules required to come after declarations (see <a href="#mixing">Mixing Nesting Rules and Declarations</a>).
 
-	The presence of a nested conditional engages the same logic as if ''@nest'' was present.
-	The nested conditional rules must contain a <a>nesting selector</a> and follow the same
-	rules as outlined in <a href="#direct">direct nesting</a>.
+	If there are only declarations in the nested conditional, the nesting context is adopted.
+
+	In the presence of a <a>nesting selector</a>, the same
+	rules as outlined in <a href="#direct">direct nesting</a> should be used.
 
 	<div class="example">
 		For example, the following conditional nestings are valid:
@@ -480,14 +481,22 @@ Nesting Conditional Rules {#conditionals}
 			display: grid;
 
 			@media (orientation: landscape) {
-				& {
-					grid-auto-flow: column;
-				}
+				grid-auto-flow: column;
 			}
 		}
 		/* equivalent to
 			 .foo { display: grid; }
 
+			 @media (orientation: landscape) {
+				 & {
+					 grid-auto-flow: column;
+				 }
+			 }
+		 */
+
+		/* finally equivalent to
+			 .foo { display: grid; }
+
 			 @media (orientation: landscape) {
 				 .foo {
 					 grid-auto-flow: column;
@@ -499,14 +508,10 @@ Nesting Conditional Rules {#conditionals}
 			display: grid;
 
 			@media (orientation: landscape) {
-				& {
-					grid-auto-flow: column;
-				}
+				grid-auto-flow: column;
 
 				@media (min-inline-size > 1024px) {
-					& {
-						max-inline-size: 1024px;
-					}
+					max-inline-size: 1024px;
 				}
 			}
 		}
@@ -551,15 +556,6 @@ Nesting Conditional Rules {#conditionals}
 		But the following are invalid:
 
 		<pre class=lang-css>
-		.foo {
-			display: grid;
-
-			@media (orientation: landscape) {
-				grid-auto-flow: column;
-			}
-		}
-		/* Invalid because there's no nesting selector */
-
 		.foo {
 			color: red;
 
@@ -800,4 +796,4 @@ return the result of the following steps:
 				</ol>
 			<li>Append a newline followed by RIGHT CURLY BRACKET (U+007D) to |s|.
 			<li>Return |s|.
-</ol>
+</ol>