[css-values-4] Properly define valdef notation for functional notatio…

…ns. #2921

css-values-4/Overview.bs

@@ -118,7 +118,8 @@ Component Value Types</h3>
 		These are written as the function's name,
 		followed by an empty parentheses pair,
 		between <css>&lt;</css> and <css>></css>,
-		e.g. <<calc()>>.
+		e.g. <<calc()>>,
+		and references the correspondingly-named [=functional notation=].
 
 	5. Other non-terminals.
 		These are written as the name of the non-terminal
@@ -340,6 +341,58 @@ Component Values and White Space</h3>
 	In this case, a space would be required before the ''2''
 	to get this parsed as the two lengths ''1em'' and ''2em''.
 
+
+	<h3 id="component-functions">
+	Functional Notation Definitions</h3>
+
+	The syntax of a [=functional notation=] is defined
+	as a sequence of:
+
+	1. The function's name written as an identifier
+		followed by an open parenthesis
+		(such as ''example(''),
+		or the <<function-token>> production
+		to indicate a function with an arbitrary name.
+
+	2. The function's arguments, if any,
+		expressed using the [=value definition syntax=].
+
+	3. A literal closing parenthesis.
+
+	The function’s arguments are considered <em>implicitly grouped</em>,
+	as if surrounded by brackets (''[ ... ]'').
+
+	<div class=example>
+		For example, a grammar like:
+
+		<xmp class=prod>
+			example( <length> , <length> )
+		</xmp>
+
+		will match a function whose name is "example"
+		and whose arguments match "<<length>> , <<length>>".
+	</div>
+
+	<div class=example>
+		For example, the Selectors grammar defines pseudo-classes generically,
+		allowing any possibly function name after the initial colon:
+
+		<xmp class=prod>
+			<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
+		</xmp>
+
+		This represents <em>any</em> function name,
+		with <<any-value>> as the function arguments.
+	</div>
+
+	<div class="example">
+		Since the [=functional notation=] <em>implicitly groups</em> its contents,
+		the effect of any combinator inside it
+		is scoped to the function’s argument.
+		For example, the [=functional notation=] syntax definition
+		''example( foo | bar )'' is equivalent to ''example( [ foo | bar ] )''.
+	</div>
+
 <h3 id="value-examples">
 Property Value Examples</h3>
 
@@ -2867,6 +2920,7 @@ Functional Notations</h2>
 	immediately inside the parentheses.
 	Functions can take multiple arguments,
 	which are formatted similarly to a CSS property value.
+	See [[#component-functions]].
 
 	Note: Some legacy <a>functional notations</a>, such as ''rgba()'', use commas unnecessarily,
 	but generally commas are only used to separate items in a list,
@@ -2883,8 +2937,9 @@ Functional Notations</h2>
 		</pre>
 	</div>
 
-	The [=math functions=] are defined in [[#math]].
-
+	The [=math functions=] are defined below.
+	Other [=functional notations=] are defined in their own modules;
+	for example the [=color functions=] are defined in [[CSS-COLOR-4]].
 
 <!--
  ██████     ███    ██        ██████    ███ ███