Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 10, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 119 additions & 1 deletion css-mixins-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -787,13 +787,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
Expand Down Expand Up @@ -832,6 +879,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}
--------------------------------------------------------------------------------
Expand Down