[css-mixins-1] Rename the <syntax> productions to make them unique. #10557

Author: tabatkins

css-mixins-1/Overview.bs

@@ -135,7 +135,7 @@ and the [=return type=] is optionally given by the <<css-type>> following the "r
 	</pre>
 
 	However,
-	any <<syntax>> that requires a <<combinator>>
+	any <<syntax>> that requires a <<syntax-combinator>>
 	needs to be wrapped in the <code>type()</code> function:
 
 	<pre class='lang-css'>
@@ -608,21 +608,19 @@ on [=function parameters=],
 or [=custom function=] return values.
 
 <pre class="prod def" nohighlight>
-
-<dfn><<type-name>></dfn> = angle | color | custom-ident | image | integer |
-	length | length-percentage | number |
-	percentage | resolution | string | time |
-	url | transform-function
-<dfn><<combinator>></dfn> = '|'
-<dfn><<multiplier>></dfn> = [ '#' | '+' ]
-<dfn><<syntax-component-name>></dfn> = '<' <<type-name>> '>' | <<custom-ident>>
-<dfn><<syntax-component>></dfn> = <<syntax-component-name>> <<multiplier>>? |
-	'<' transform-list '>'
-<dfn><<syntax>></dfn> = '*' | <<syntax-component>> [ <<combinator>> <<syntax-component>> ]+
-
+	<dfn><<syntax-type>></dfn> = angle | color | custom-ident | image | integer |
+		length | length-percentage | number |
+		percentage | resolution | string | time |
+		url | transform-function
+	<dfn><<syntax-combinator>></dfn> = '|'
+	<dfn><<syntax-multiplier>></dfn> = [ '#' | '+' ]
+	<dfn><<syntax-component-name>></dfn> = '<' <<syntax-type>> '>' | <<custom-ident>>
+	<dfn><<syntax-component>></dfn> = <<syntax-component-name>> <<syntax-multiplier>>? |
+		'<' transform-list '>'
+	<dfn><<syntax>></dfn> = '*' | <<syntax-component>> [ <<syntax-combinator>> <<syntax-component>> ]+
 </pre>
 
-A <<syntax-component>> consists of either a <<type-name>>,
+A <<syntax-component>> consists of either a <<syntax-type>>,
 which maps to one of the [=supported syntax component names=];
 or a <<custom-ident>>, which represents any [=keyword=].
 Additionally,
@@ -641,19 +639,21 @@ against a value
 in the specified order.
 
 <div class='example'>
-	<pre class='lang-css'>
-	&lt;percentage&gt; | &lt;number&gt; | auto
-	</pre>
+	<xmp class='lang-css'>
+		<percentage> | <number> | auto
+	</xmp>
+
 	The above, when parsed as a <<syntax>>,
 	would accept <<percentage>> values,
 	<<number>> values,
 	as well as the keyword <code>auto</code>.
 </div>
 
 <div class='example'>
-	<pre class='lang-css'>
-	red | &lt;color&gt;
-	</pre>
+	<xmp class='lang-css'>
+	red | <color>
+	</xmp>
+
 	The [=syntax definition=] resulting from the above <<syntax>>,
 	when used as a grammar for [=parse|parsing=],
 	would match an input <code>red</code> as an [=identifier=],
@@ -665,11 +665,11 @@ The <code>*</code> <<delim-token>> represents the [=universal syntax definition=
 The <code>&lt;transform-list&gt;</code> production
 is a convenience form equivalent to <code>&lt;transform-function&gt;+</code>.
 <span class=note>Note that <code>&lt;transform-list&gt;</code> may not
-	be followed by a <<multiplier>>.</span>
+	be followed by a <<syntax-multiplier>>.</span>
 
 [=Whitespace=] is not allowed
 between the angle bracket <<delim-token>>s (<code>&lt;</code> <code>&gt;</code>)
-and the <<type-name>> they enclose,
-nor is [=whitespace=] allowed to precede a <<multiplier>>.
+and the <<syntax-type>> they enclose,
+nor is [=whitespace=] allowed to precede a <<syntax-multiplier>>.
 
 Note: The [=whitespace=] restrictions also apply to <code>&lt;transform-list&gt;</code>.