[css-mixins-1][css-values-5] Move the definition of <syntax> to V&U 5, since we'll be using it in multiple places.

Author: tabatkins

css-values-5/Overview.bs

@@ -17,12 +17,18 @@ Inline Github Issues: no
 Default Highlight: css
 </pre>
 <pre class='link-defaults'>
-spec:css-values-4; type: dfn; text: determine the type of a calculation
+spec:css-values-4; type: dfn;
+	text: determine the type of a calculation
+	text: keyword
+	text: identifier
 spec:selectors-4; type: dfn; text: selector
 spec:css-conditional-5; type:type; text:<size-feature>
 spec:css-conditional-5; type:dfn; text:container feature
 spec:css-conditional-5; type:type; text:<container-name>
+spec:css-mixins-1; type:dfn; text:custom function
+spec:css-properties-values-api; type:dfn; text: supported syntax component names
 spec:html; type:element; text:link
+spec:infra; type:dfn; text:list
 </pre>
 <style>
 code, small { white-space: nowrap }
@@ -94,7 +100,7 @@ Commas in Function Arguments</h4>
 	Specifically:
 
 	* A [=comma-containing production=] can either start with a "{" token, or not.
-	* If it does not start with a "{" token, 
+	* If it does not start with a "{" token,
 		then it cannot contain commas or {} blocks,
 		in addition to whatever specific restrictions it defines for itself.
 		(The production stops parsing at that point,
@@ -127,7 +133,7 @@ Commas in Function Arguments</h4>
 		need to include commas.
 		When this is the case,
 		wrapping the values in {}
-		allows their commas to be distinguished 
+		allows their commas to be distinguished
 		from the function's argument-separating commas:
 
 		<pre>
@@ -169,7 +175,7 @@ Commas in Function Arguments</h4>
 	due to [=arbitrary-substitution functions=] like ''var()''.
 	For example, ''font-family: random-item(--x, {var(--list1)}, monospace)''
 	will work correctly
-	regardless of whether the ''--list1'' custom property 
+	regardless of whether the ''--list1'' custom property
 	contains a comma-separated list or not.
 
 	[=Functional notations=] are serialized without {} wrappers whenever possible.
@@ -194,6 +200,88 @@ Commas in Function Arguments</h4>
 	Other contexts <em>may</em> define that they use [=non-strict comma-containing productions=],
 	but it <em>should</em> be avoided unless necessary.
 
+<h3 id=css-syntax>
+Specifying CSS Syntax in CSS: the <<syntax>> type</h3>
+
+Some features in CSS,
+such as the ''attr()'' function,
+[=registered custom properties=],
+or [=custom function parameters=],
+allow you to specify how <em>another</em> value is meant to be parsed.
+This is declared via the <<syntax>> production,
+which resembles a limited form of the CSS [=value definition syntax=]
+used in specifications to define CSS features,
+and which represents a [=syntax definition=]:
+
+<pre class="prod def" nohighlight>
+	<dfn><<syntax>></dfn> = '*' | <<syntax-component>> [ <<syntax-combinator>> <<syntax-component>> ]+
+	<dfn><<syntax-component>></dfn> = <<syntax-single-component>> <<syntax-multiplier>>?
+	                   | '<' transform-list '>'
+	<dfn><<syntax-single-component>></dfn> = '<' <<syntax-type-name>> '>' | <<ident>>
+	<dfn><<syntax-type-name>></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> = [ '#' | '+' ]
+</pre>
+
+A <<syntax-component>> consists of either
+a <<syntax-type-name>> between &lt;&gt; (angle brackets),
+which maps to one of the [=supported syntax component names=],
+or an <<ident>>, which represents any [=keyword=].
+Additionally,
+a <<syntax-component>> may contain a [[css-properties-values-api-1#multipliers|multiplier]],
+which indicates a [=list=] of values.
+
+Note: This means that <code>&lt;length&gt;</code>
+	and <code>length</code> are two different types:
+	the former describes a <<length>>,
+	whereas the latter describes a [=keyword=] <code>length</code>.
+
+Multiple <<syntax-component>>s may be [[css-properties-values-api-1#combinator|combined]]
+with a <code>|</code> <<delim-token>>,
+causing the syntax components to be matched
+against a value
+in the specified order.
+
+<div class='example'>
+	<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'>
+	<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=],
+	but would match an input <code>blue</code> as a <<color>>.
+</div>
+
+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 <<syntax-multiplier>>.</span>
+
+[=Whitespace=] is not allowed
+between the angle bracket <<delim-token>>s (<code>&lt;</code> <code>&gt;</code>)
+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>.
+
+
 <h2 id="level-4-extensions">
 Extensions to Level 4 Value Types</h3>