[css-mixins-1] Flesh out CSSFunctionRule (#11832)

* [css-mixins-1] Flesh out CSSFunctionRule

CSSFunctionRule has so far ignored the existence of a prelude
in the @function rule. This adds CSSOM support for the function
name, return type, and parameters.

* Update css-mixins-1/Overview.bs

* Update css-mixins-1/Overview.bs

* Update css-mixins-1/Overview.bs

---------

Co-authored-by: Anders Hartvoll Ruud <[email protected]>
Co-authored-by: Tab Atkins Jr. <[email protected]>

css-mixins-1/Overview.bs

@@ -789,13 +789,60 @@ or acting as if nothing exists at that location otherwise.
 CSSOM {#cssom}
 ==============
 
+The {{CSSFunctionRule}} Interface {#the-function-interface}
+-----------------------------------------------------------
+
 The {{CSSFunctionRule}} interface represents a ''@function'' rule.
 
 <pre class='idl' export>
 [Exposed=Window]
-interface CSSFunctionRule : CSSGroupingRule { };
+interface CSSFunctionRule : CSSGroupingRule {
+	readonly attribute CSSOMString name;
+	sequence&lt;FunctionParameter&gt; getParameters();
+	readonly attribute CSSOMString returnType;
+};
 </pre>
 
+<dl dfn-for=CSSFunctionRule dfn-type=attribute>
+	<dt><dfn>name</dfn>
+	<dd>
+		The name of the [=custom function=].
+
+	<dt><dfn>returnType</dfn>
+	<dd>
+		The [=custom function/return type=] of the [=custom function=],
+		represented as a [[css-properties-values-api-1#syntax-strings|syntax string]].
+		If the [=custom function=] has no return type,
+		returns <code>"type(*)"</code>.
+</dl>
+
+
+<pre class='idl' export>
+dictionary FunctionParameter {
+	required CSSOMString name;
+	required CSSOMString type;
+	CSSOMString? defaultValue;
+};
+</pre>
+
+<dl dfn-for=FunctionParameter>
+	<dt>name
+	<dd>
+		The name of the [=function parameter=].
+
+	<dt>type
+	<dd>
+		The [=parameter type|type=] of the [=function parameter=],
+		represented as a [[css-properties-values-api-1#syntax-strings|syntax string]],
+		or <code>"type(*)"</code> if the [=function parameter|parameter=] has no type.
+
+	<dt>defaultValue
+	<dd>
+		The [=default value=] of the [=function parameter=],
+		or `null` if the argument does not have a default.
+</dl>
+
+
 While declarations may be specified directly within a ''@function'' rule,
 they are not represented as such in the CSSOM.
 Instead, consecutive segments of declarations
@@ -834,6 +881,77 @@ Note: This also applies to the "leading" declarations in the ''@function'' rule,
 	</pre>
 </div>
 
+<div algorithm>
+To <dfn export>serialize a CSSFunctionRule</dfn>,
+return the concatenation of the following:
+
+	1. The string <code>"@function"</code> followed by a single SPACE (U+0020).
+	2. The result of performing <a>serialize an identifier</a>
+		on the name of the [=custom function=],
+		followed by a single LEFT PARENTHESIS (U+0028).
+	4. The result of [=serialize a function parameter=]
+		on each of the [=custom function's=] [=function parameter|parameters=],
+		all joined by <code>", "</code>
+		(COMMA U+002C, followed by a single SPACE U+0020).
+	5. A single RIGHT PARENTHESIS (U+0029).
+	6. If the [=custom function=] has [=custom function/return type=],
+		and that [=custom function/return type=]
+		is not the [=universal syntax definition=] ("*"):
+		* A single SPACE (U+0020),
+			followed by the string <code>"returns"</code>,
+			followed by a single SPACE (U+0020).
+		* The result of performing [=serialize a CSS type=]
+			on that [=custom function/return type|type=],
+			followed by a single SPACE (U+0020).
+
+	7. A single LEFT CURLY BRACKET (U+007B),
+		followed by a SPACE (U+0020).
+
+	8. The result of performing [=serialize a CSS rule=]
+		on each rule in cssRules,
+		filtering out empty strings,
+		all joined by a single SPACE (U+0020).
+
+		Note: [=Serialize a CSS rule=] can return an empty string
+			when serializing an empty {{CSSFunctionDeclarations}} rule.
+
+	9. A single SPACE (U+0020),
+		followed by a single RIGHT CURLY BRACKET (U+007D).
+</div>
+
+<div algorithm>
+To <dfn export>serialize a function parameter</dfn>,
+return the concatenation of the following:
+
+	1. The result of performing <a>serialize an identifier</a>
+		on the name of the [=function parameter=].
+	2. If the [=function parameter=] has a [=parameter type|type=],
+		and that [=parameter type|type=]
+		is not the [=universal syntax definition=]:
+		* A single SPACE (U+0020),
+			followed by the result of performing [=serialize a CSS type=]
+			on that [=parameter type|type=].
+	3. If the [=function parameter=] has a [=default value=]:
+		* A single COLON (U+003A),
+			followed by a single SPACE (U+0020),
+			followed by the result of performing [=serialize a CSS value=]
+			on that value.
+</div>
+
+<div algorithm>
+To <dfn export>serialize a CSS type</dfn>,
+return the concatenation of the following:
+	1. If the <<css-type>> consists of a single <<syntax-component>>,
+		return the corresponding [[css-properties-values-api-1#syntax-strings|syntax string]].
+	2. Otherwise,
+		return the concatenation of the following:
+			* The string <code>"type("</code>,
+				i.e. <code>"type"</code>
+				followed by a single LEFT PARENTHESIS (U+0028).
+			* The corresponding [[css-properties-values-api-1#syntax-strings|syntax string]].
+			* The string <code>")"</code>,
+				i.e. a single RIGHT PARENTHESIS (U+0029).
+</div>
 
 The {{CSSFunctionDeclarations}} Interface {#the-function-declarations-interface}
 --------------------------------------------------------------------------------