[css-cascade] Split declaration and supports-condition in grammar, per SimonSapin's suggestion

Author: fantasai

css-cascade/Overview.bs

@@ -68,10 +68,13 @@ Importing Style Sheets: the ''@import'' rule</h2>
 	or else the ''@import'' rule is invalid.
 	The syntax of ''@import'' is:
 
-	<pre class='prod'>@import [ <<url>> | <<string>> ] [ supports( <<supports-condition>> ) ]? <<media-query-list>>? ;</pre>
+	<pre class='prod'>
+		@import [ <<url>> | <<string>> ]
+		        [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]?
+		        <<media-query-list>>? ;</pre>
 
 	where the <<url>> or <<string>> gives the URL of the style sheet to be imported,
-	and the optional <<supports-condition>> and <<media-query-list>>
+	and the optional [<<supports-condition>>|<<declaration>>] and <<media-query-list>>
 	(collectively, the <dfn>import conditions</dfn>)
 	state the conditions under which it applies.
 
@@ -128,10 +131,23 @@ Conditional ''@import'' Rules</h3>
 		</pre>
 	</div>
 
-	A <dfn><<media-query>></dfn> corresponds to the <code>media_query_list</code> production and is interpreted as a <a>media query</a>,
-	and a <dfn><<supports-condition>></dfn> corresponds to either a <code>supports_condition</code> production
-	or a <code>declaration</code> production interpreted as a <code>supports_declaration_condition</code> production
+	A <dfn><<media-query>></dfn> corresponds to the <code>media_query_list</code> production
+	and is interpreted as a <a>media query</a>,
+	and a <dfn><<supports-condition>></dfn> corresponds to a <code>supports_condition</code> production
 	and is interpreted as an ''@supports'' condition.
+	If a <dfn><<declaration>></dfn> (a <code>declaration</code> production) is given in place of a <<supports-condition>>,
+	it must be interpreted as a <code>supports_declaration_condition</code> production
+	(i.e. the extra set of parentheses is implied)
+	and treated as a <<supports-condition>>.
+
+	<div class="example">
+		For example, the following two lines are equivalent:
+		<pre class='lang-css'>
+		@import "mystyle.css" supports(display: flex);
+		@import "mystyle.css" supports((display: flex));
+		</pre>
+	</div>
+
 	The evaluation and full syntax of the <a>import conditions</a>
 	are defined by the <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> [[!MEDIAQ]]
 	and <a href="http://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS3-CONDITIONAL]] specifications.