[css-cascade-5] Draft layer-import syntax (#5681)

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -122,15 +122,17 @@ Importing Style Sheets: the ''@import'' rule</h2>
 		as if they were written literally into the stylesheet at the point of the ''@import''.
 
 	Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet
-	(ignoring ''@charset''), or else the ''@import'' rule is invalid.
+	(ignoring ''@charset'' and empty [=@layer=] definitions), or else the ''@import'' rule is invalid.
 	The syntax of ''@import'' is:
 
 	<pre class='prod'>
 		@import [ <<url>> | <<string>> ]
+						[ layer(<<layer-ident>>?) ]?
 		        [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]?
 		        <<media-query-list>>? ;</pre>
 
 	where the <<url>> or <<string>> gives the URL of the style sheet to be imported,
+	the optional <<layer-ident>> assigns imported rules to the indicated [=cascade layer=],
 	and the optional [<<supports-condition>>|<<declaration>>] and <<media-query-list>>
 	(collectively, the <dfn export>import conditions</dfn>)
 	state the conditions under which it applies.
@@ -145,6 +147,16 @@ Importing Style Sheets: the ''@import'' rule</h2>
 		<pre>@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);</pre>
 	</div>
 
+	<div class="example">
+		The following layer imports load the style sheets into
+		the ''framework component'' layer, and an un-named layer, respectively:
+
+		<pre>
+		@import url("tabs.css") layer(framework component);
+		@import url("override.css") layer();
+		</pre>
+	</div>
+
 	If a <<string>> is provided,
 	it must be interpreted as a <<url>> with the same value.
 
@@ -1104,22 +1116,9 @@ Cascade Layers</h3>
 Declaring Cascade Layers: the ''@layer'' rule</h4>
 
 	The <dfn at-rule id="at-ruledef-layer">@layer</dfn> rule
-	defines an explicit [=cascade layer=],
-	with the option to assign style rules as either a block or an import.
-
-	The import syntax is:
-
-	<pre class='prod'>
-		@layer <<layer-ident>>? <<url>>;
-	</pre>
-
-	Such ''@layer'' import rules have the same restrictions and processing
-	as ''@import'' (see [[#at-import]]),
-	except that the imported rules are assigned to the indicated layer.
-
-	Issue(w3c/csswg-drafts#5681): Is ''@layer'' the proper way to handle layered url imports?
+	defines an explicit [=cascade layer=], with the option to assign style rules.
 
-	The block syntax is:
+	The block layer-assignment syntax is:
 
 	<pre class='prod'>
 		@layer <<layer-ident>>? {
@@ -1131,7 +1130,7 @@ Declaring Cascade Layers: the ''@layer'' rule</h4>
 	as a [=conditional rule=] [[CSS-CONDITIONAL-3]]
 	with a true condition.
 
-	In both cases the optional <dfn for='@layer'><<layer-ident>></dfn>
+	The optional <dfn for='@layer'><<layer-ident>></dfn>
 	is a [=CSS identifier=] (<<ident>>)
 	that represents its <dfn>layer name</dfn>.
 	If the [=layer name=] matches that of a [=cascade layer=]
@@ -1153,7 +1152,7 @@ Declaring Cascade Layers: the ''@layer'' rule</h4>
 	</pre>
 
 	Such empty ''@layer'' are allowed
-	anywhere either import ''@layer'' or block ''@layer'' rules are allowed.
+	anywhere either ''@import'' or other ''@layer'' rules are allowed.
 
 	Issue(w3c/csswg-drafts#5853): Provide an attribute for assigning link or style elements to cascade layers
 
@@ -1523,6 +1522,7 @@ Additions Since Level 4</h3>
 	The following features have been added since
 	<a href="https://www.w3.org/TR/css-cascade-4/">Level 4</a>:
 
+	* Added ''layer()'' option to [=@import=] definition.
 	* Added [=cascade layers=] to the [=cascade=] sort criteria.
 	* Defined style attributes as a distinct step of the [=cascade=] sort criteria.
 	* Introduced the ''@layer'' rule for defining cascade layers.