[css-values-4][css-syntax-3] Define <foo()> and <@foo>, plus some light editorial rewriting. #5728

tabatkins · tabatkins · commit 18747eb3d6cf · 2022-10-10T15:35:09.000-07:00
diff --git a/css-syntax-3/Overview.bs b/css-syntax-3/Overview.bs
@@ -3263,15 +3263,17 @@ The <<urange>> type</h3>
 <h2 id='rule-defs'>
 Defining Grammars for Rules and Other Values</h2>
 
-	The <a href="https://www.w3.org/TR/css3-values/">Values</a> spec defines how to specify a grammar for properties.
-	This section does the same, but for rules.
+	[[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.
 
-	Just like in property grammars,
-	the notation <code>&lt;foo></code> refers to the "foo" grammar term,
-	assumed to be defined elsewhere.
-	Substituting the <code>&lt;foo></code> for its definition results in a semantically identical grammar.
+	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.
 
-	For numeric data types, this type notation can annotate any range restrictions using the bracketed range notation described in the <a href="https://www.w3.org/TR/css3-values/#numeric-ranges">Values</a> spec.
+	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:
 
diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs
@@ -88,38 +88,43 @@ Component Value Types</h3>
 
 	Component value types are designated in several ways:
 
-	<ol>
-		<li>
-			<a href="#keywords">keyword</a> values (such as <css>auto</css>, ''disc'', etc.),
-			which appear literally, without quotes (e.g. <code>auto</code>)
-
-		<li>
-			basic data types, which appear between <css>&lt;</css> and <css>></css>
-			(e.g., <<length>>, <<percentage>>, etc.).
-			For <a>numeric data types</a>,
-			this type notation can annotate any range restrictions
-			using the [[#numeric-ranges|bracketed range notation]] described below.
-
-		<li>
-			types that have the same range of values as a property bearing the same name
-			(e.g., <<'border-width'>>, <<'background-attachment'>>, etc.).
-			In this case, the type name is the property name (complete with quotes) between the brackets.
-			Such a type does <em>not</em> include <a href="#common-keywords">CSS-wide keywords</a> such as ''inherit'',
-			and also does not include any top-level <a href="#mult-comma">comma-separated-list multiplier</a>
-			(i.e. 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>).
-
-		<li>
-			non-terminals that do not share the same name as a property.
-			In this case, the non-terminal name appears between <css>&lt;</css> and <css>></css>,
-			as in <<spacing-limit>>.
-			Notice the distinction between <<border-width>> and <<'border-width'>>:
-			the latter is defined as the value 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.
-	</ol>
-
+	1. <a href="#keywords">Keyword</a> values (such as <css>auto</css>, ''disc'', etc.),
+		which appear literally, without quotes (e.g. <code>auto</code>).
+
+	2. Basic data types,
+		which appear between <css>&lt;</css> and <css>></css>
+		(e.g., <<length>>, <<percentage>>, etc.).
+		For <a>numeric data types</a>,
+		this type notation can annotate any range restrictions
+		using the [[#numeric-ranges|bracketed range notation]] described below.
+
+	3. Property value ranges,
+		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>,
+		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'',
+		and also <em>do not</em> include any top-level <a href="#mult-comma">comma-separated-list multiplier</a>
+		(i.e. 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>).
+
+	4. Functional notations and their arguments.
+		These are written as the function's name,
+		followed by an empty parentheses pair,
+		between <css>&lt;</css> and <css>></css>,
+		e.g. <<calc()>>.
+
+	5. Other non-terminals.
+		These are written as the name of the non-terminal
+		between <css>&lt;</css> and <css>></css>,
+		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 (,),
