[css-cascade-6] "Add @import scope()" syntax, allow reordering

Note that the Media Query part still needs to appear last in the grammar
due to #10972.

Author: andruud

css-cascade-6/Overview.bs

@@ -92,19 +92,23 @@ Importing Style Sheets: the ''@import'' rule</h2>
 
 <pre class='prod'>
 		@import [ <<url>> | <<string>> ]
-		        [ layer | layer(<<layer-name>>) ]?
-		        <<import-conditions>> ;
+		        [[ layer | layer(<<layer-name>>) ]
+		         || [ scope( [ (<<scope-start>>) ]? [ to (<<scope-end>>) ]? ) | <<scope-start>> ]
+		         || <<supports-import-condition>>]?
+		        <<media-import-condition>>?;
 
-		<dfn export>&lt;import-conditions></dfn> = [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]?
-		                     <<media-query-list>>?</pre>
+		<dfn export>&lt;supports-import-condition></dfn> = [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]
+		<dfn export>&lt;media-import-condition></dfn> = <<media-query-list>></pre>
 
 	where:
 
 	* the <<url>> or <<string>>
 		gives the URL of the style sheet to be imported.
 
-	* the optional ''layer'' keyword or ''layer()'' function
-		assigns the contents of the style sheet
+	and optionally:
+
+	* the ''layer'' keyword or ''layer()'' function,
+		which assigns the contents of the style sheet
 		into its own anonymous [=cascade layer=]
 		or into the named [=cascade layer=].
 
@@ -113,9 +117,24 @@ Importing Style Sheets: the ''@import'' rule</h2>
 		but is subject to any [=import conditions=]
 		(just as if declared by an ''@layer'' rule wrapped
 		in the appropriate [=conditional group rules=]).
+	* the ''scope()'' function,
+		which [=scopes=] the [=style rules=] within the stylesheet,
+		using the [=scoping roots=] and [=scoping limits=]
+		as described by [[#scope-limits]].
+
+		Note: While the [=style rules=] within the imported stylesheet
+		become [=scoped=],
+		they do not become [=nested style rule|nested=].
+		In particular,
+		top-level selectors are not re-interpreted as [=relative selectors=],
+		and the ''&'' pseudo-class maintains its non-nested behavior.
+
+	* the [=import conditions=],
+		<<supports-import-condition>> and <<media-import-condition>>,
+		which state the conditions under which the ''@import'' rule applies.
 
-	* the optional <<import-conditions>>
-		states the [=import conditions=] under which it applies.
+	Issue(10972): Accept <<media-import-condition>> at any point
+		after the URL/string.
 
 	<div class="example">
 		The following <a href="#conditional-import">conditional <css>@import</css> rule</a>
@@ -137,6 +156,15 @@ Importing Style Sheets: the ''@import'' rule</h2>
 		</pre>
 	</div>
 
+	<div class="example">
+		The following imports a stylesheet, and scopes the style rules
+		to elements matching <code>.card</code>.
+
+		<pre>
+		@import url("card.css") scope(.card);
+		</pre>
+	</div>
+
 	If a <<string>> is provided,
 	it must be interpreted as a <<url>> with the same value.
 
@@ -963,6 +991,11 @@ Changes since the 21 March 2023 Working Draft</h3>
 	Significant changes since the
 	<a href="https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/">21 March 2023 Working Draft</a> include:
 
+	* Added the <code>@import scope()</code> syntax,
+		and the ability to specificy ''layer()'', ''scope()'', and ''supports()''
+		in any order.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/7348">Issue 7348</a>)
+
 	* Allowed [=declarations=] directly within ''@scope''.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/10389">Issue 10389</a>)