Merge pull request #5645 from w3c/css-nesting-1]_nested-conditionals

[css-nesting-1] initial idea for nested conditionals

Author: Adam Argyle

css-nesting-1/Overview.bs

@@ -432,6 +432,94 @@ The Nesting At-Rule: ''@nest'' {#at-nest}
 		</pre>
 	</div>
 
+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.
+
+  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>. 
+
+  <div class="example">
+    For example, the following conditional nestings are valid:
+
+    <pre class="lang-css">
+    .foo {
+      display: grid;
+
+      @media (orientation: landscape) {
+        & { 
+          grid-auto-flow: column; 
+        }
+      }
+    }
+    /* equivalent to
+       .foo { display: grid; }
+
+       @media (orientation: landscape) {
+         .foo { 
+           grid-auto-flow: column; 
+         }
+       }
+     */
+
+    .foo {
+      color: red;
+
+      @media (min-width: 480px) {
+        & > .bar,
+        & > .baz { 
+          color: blue;
+        }
+      }
+    }
+    /* equivalent to
+       .foo { color: red; }
+
+       @media (min-width: 480px) {
+         .foo > :is(.bar, .baz) { 
+           color: blue;
+         }
+       }
+     */
+    </pre>
+
+    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;
+      
+      @media (min-width: 480px) {
+        & h1, h2 { color: blue; }
+      }
+    }
+    /* Invalid because not all selectors in the list
+       contain a nesting selector */
+
+    .foo {
+      color: red;
+      
+      @nest @media (min-width: 480px) {
+        & { color: blue; }
+      }
+    }
+    /* Invalid because @nest expects a selector prelude, 
+       instead a conditional rule was provided */
+    </pre>
+  </div>
+
 Mixing Nesting Rules and Declarations {#mixing}
 -----------------------------------------------
 
@@ -440,7 +528,8 @@ Mixing Nesting Rules and Declarations {#mixing}
 	intermixed with any number of declarations,
 	in any order.
 
-	The relative ordering of <a>nested style rules</a> and other declarations <strong>is</strong> important;
+	The relative ordering of <a>nested style rules</a>, <a>nested conditional rules</a> and 
+	other declarations <strong>is</strong> important;
 	it's possible for a given style rule and a <a>nested style rule</a> within it to match the same element,
 	and if the specificity of the two rules is otherwise equivalent,
 	the relative order in the stylesheet of the applicable declarations