[css-values-4][css-syntax-3] Consolidate valdef syntax definition.

Author: fantasai

css-syntax-3/Overview.bs

@@ -230,12 +230,30 @@ Error Handling</h3>
 			and seek forward until it finds a semicolon (or the end of the block).
 			It then starts fresh, trying to parse a declaration again.
 
-		<li>
+		<li id=autoclosing>
 			If the stylesheet ends while any rule, declaration, function, string, etc. are still open,
 			everything is automatically closed.
 			This doesn't make them invalid,
 			though they may be incomplete
 			and thus thrown away when they are verified against their grammar.
+
+			<div class='example'>
+				For example, the syntax of the ''translateX()'' function is:
+
+				<pre>translateX( <<translation-value>> )</pre>
+
+				However, the stylesheet may end with the function unclosed, like:
+
+				<pre>.foo { transform: translate(50px</pre>
+
+				The CSS parser parses this as a style rule containing one declaration,
+				whose value is a function named "translate".
+				This matches the above grammar,
+				even though the ending token didn't appear in the token stream,
+				because by the time the parser is finished,
+				the presence of the ending token is no longer possible to determine;
+				all you have is the fact that there's a block and a function.
+			</div>
 	</ul>
 
 	After each construct (declaration, style rule, at-rule) is parsed,
@@ -3444,67 +3462,7 @@ The <code>&lt;an+b></code> type</h3>
 <h2 id='rule-defs'>
 Defining Grammars for Rules and Other Values</h2>
 
-	[[css-values-4#value-defs]] defines how to specify a grammar for properties.
-	This section extends those definitions
-	to also allow specifying a grammar for rules.
-
-	Non-terminals representing the entire grammar of an [=at-rule=]
-	are written as an @ character followed by the at-rule's name,
-	between <css>&lt;</css> and <css>></css>,
-	e.g. <<@media>> to represent the ''@media'' rule.
-
-	The [[css-values-4#numeric-ranges|bracketed range notation]] can be used on
-	any of the numeric token non-terminals.
-
-	Several types of tokens are written literally, without quotes:
-
-	<ul>
-		<li><<ident-token>>s (such as <code>auto</code>, <code>disc</code>, etc), which are simply written as their value.
-		<li><<at-keyword-token>>s, which are written as an @ character followed by the token's value, like <code>@media</code>.
-		<li><<function-token>>s, which are written as the function name followed by a ( character, like <code>translate(</code>.
-		<li>The <<colon-token>> (written as <code>:</code>), <<comma-token>> (written as <code>,</code>), <<semicolon-token>> (written as <code>;</code>), <a href="#tokendef-open-paren">&lt;(-token></a>, <a href="#tokendef-close-paren">&lt;)-token></a>, <a href="#tokendef-open-curly">&lt;{-token></a>, and <a href="#tokendef-close-curly">&lt;}-token></a>s.
-	</ul>
-
-	Tokens match if their value is a match for the value defined in the grammar.
-	Unless otherwise specified, all matches are <a>ASCII case-insensitive</a>.
-
-	Note: Although it is possible, with <a>escaping</a>,
-	to construct an <<ident-token>> whose value ends with <code>(</code> or  starts with <code>@</code>,
-	such a tokens is not a <<function-token>> or an <<at-keyword-token>>
-	and does not match corresponding grammar definitions.
-
-	<<delim-token>>s are written with their value enclosed in single quotes.
-	For example, a <<delim-token>> containing the "+" <a>code point</a> is written as <code>'+'</code>.
-	Similarly, the <a href="#tokendef-open-square">&lt;[-token></a> and <a href="#tokendef-close-square">&lt;]-token></a>s must be written in single quotes,
-	as they're used by the syntax of the grammar itself to group clauses.
-	<<whitespace-token>> is never indicated in the grammar;
-	<<whitespace-token>>s are allowed before, after, and between any two tokens,
-	unless explicitly specified otherwise in prose definitions.
-	(For example, if the prelude of a rule is a selector,
-	whitespace is significant.)
-
-	When defining a function or a block,
-	the ending token must be specified in the grammar,
-	but if it's not present in the eventual token stream,
-	it still matches.
-
-	<div class='example'>
-		For example, the syntax of the ''translateX()'' function is:
-
-		<pre>translateX( <<translation-value>> )</pre>
-
-		However, the stylesheet may end with the function unclosed, like:
-
-		<pre>.foo { transform: translate(50px</pre>
-
-		The CSS parser parses this as a style rule containing one declaration,
-		whose value is a function named "translate".
-		This matches the above grammar,
-		even though the ending token didn't appear in the token stream,
-		because by the time the parser is finished,
-		the presence of the ending token is no longer possible to determine;
-		all you have is the fact that there's a block and a function.
-	</div>
+	[[css-values-4#value-defs]] defines how to specify a grammar for properties and other CSS syntactic constructions.
 
 <h3 id='block-contents'>
 Defining Block Contents: the <<block-contents>>, <<declaration-list>>, <<qualified-rule-list>>, <<declaration-rule-list>>, and <<rule-list>> productions</h3>

css-values-4/Overview.bs

@@ -116,11 +116,17 @@ Component Value Types</h3>
 
 	Component value types are designated in several ways:
 
-	1. <a href="#keywords">Keyword</a> values (such as <css>auto</css>, ''disc'', etc.),
-		which appear literally, without quotes (e.g. <code>auto</code>).
+	1. <a href="#keywords">Keyword</a> values (such as <code>auto</code>, ''disc'', etc.)
+		and at-keywords representing the start of an [=at-rule=],
+		which appear literally, without quotes (e.g. <code>auto</code> or <code>@media</code>).
+
+		Note: It is possible, with <a spec=css-syntax-3>escaping</a>, to construct a [=CSS identifier=]
+		whose value ends with <code>(</code> or  starts with <code>@</code>.
+		Such a token is an <<ident-token>> (i.e. a [=keyword=]),
+		not a <<function-token>> or an <<at-keyword-token>>.
 
 	2. Basic data types,
-		which appear between <css>&lt;</css> and <css>></css>
+		which appear between <code>&lt;</code> and <code>></code>
 		(e.g., <<length>>, <<percentage>>, etc.).
 		For <a>numeric data types</a>,
 		this type notation can annotate any range restrictions
@@ -130,7 +136,7 @@ Component Value Types</h3>
 		which represent the same pattern of values as a property bearing the same name.
 		These are written as the property name,
 		surrounded by single quotes,
-		between <css>&lt;</css> and <css>></css>,
+		between <code>&lt;</code> and <code>></code>,
 		e.g., <<'border-width'>>, <<'background-attachment'>>, etc.
 
 		These types <em>do not</em> include <a href="#common-keywords">CSS-wide keywords</a> such as ''inherit''.
@@ -139,9 +145,9 @@ Component Value Types</h3>
 		is a <a lt=# grammar>comma-separated repetition</a>,
 		the corresponding type
 		does not include the top-level <a lt=# grammar>comma-separated list multiplier</a>.
-		(E.g. if a property named <css>pairing</css> is defined as <css>[ <<custom-ident>> <<integer>>? ]#</css>,
-		then <css>&lt;\'pairing'></css> is equivalent to <css>[ <<custom-ident>> <<integer>>? ]</css>,
-		not <css>[ <<custom-ident>> <<integer>>? ]#</css>.)\
+		(E.g. if a property named <code>pairing</code> is defined as <code>[ <<custom-ident>> <<integer>>? ]#</code>,
+		then <code>&lt;\'pairing'></code> is equivalent to <code>[ <<custom-ident>> <<integer>>? ]</code>,
+		not <code>[ <<custom-ident>> <<integer>>? ]#</code>.)\
 
 		<details class=note>
 			<summary>Why remove the multiplier?</summary>
@@ -160,28 +166,32 @@ Component Value Types</h3>
 		</details>
 
 	4. Functional notations and their arguments.
-		These are written as the function's name,
+		These may be written literally as defined in [[#component-functions]],
+		or referenced by a non-terminal using the function's name,
 		followed by an empty parentheses pair,
-		between <css>&lt;</css> and <css>></css>,
+		between <code>&lt;</code> and <code>></code>,
 		e.g. <<calc()>>,
 		and references the correspondingly-named [=functional notation=].
 
 	5. Other non-terminals.
 		These are written as the name of the non-terminal
-		between <css>&lt;</css> and <css>></css>,
+		between <code>&lt;</code> and <code>></code>,
 		as in <<spacing-limit>>.
 		Notice the distinction between <<border-width>> and <<'border-width'>>:
 		the latter represents the grammar of the 'border-width' property,
 		the former requires an explicit expansion elsewhere.
 		The definition of a non-terminal is typically located near its first appearance in the specification.
 
-	Some property value definitions also include the slash (/),
-	the comma (,),
-	and/or parentheses as literals.
-	These represent their corresponding tokens.
-	Other non-keyword literal characters that may appear in a component value,
-	such as “+”,
-	must be written enclosed in single quotes.
+	6. Delimiters, which represent their corresponding tokens.
+		Slashes (<code>/</code>),
+		<a lt="," grammar>commas</a> (<code>,</code>),
+		colons (<code>:</code>),
+		semicolons (<code>;</code>),
+		parentheses (<code>(</code> and <code>)</code>),
+		and braces (<code>{</code> and <code>}</code>)
+		are written literally.
+		Other delimiters must be written enclosed in single quotes
+		(such as <code>'+'</code>).
 
 	<strong><dfn lt="," id='comb-comma' export grammar>Commas</dfn> specified in the grammar are implicitly omissible</strong> in some circumstances,
 	when used to separate optional terms in the grammar.