To replace a dashed function |dashed function|, with a list of |arguments|: 1. Let |function| be the result of dereferencing the |dashed function|'s name as a [=tree-scoped reference=]. If no such name exists, return the [=guaranteed-invalid value=]. 2. For each |arg| in |arguments|, [=substitute arbitrary substitution functions=] in |arg|, and replace |arg| with the result. Note: This may leave some (or all) arguments as the [=guaranteed-invalid value=], triggering [=default values=] (if any). 3. If |dashed function| is being substituted into a property on an element, let |calling context| be a [=calling context=] with that element and that property Otherwise, it's being substituted into a descriptor on a "hypothetical element", while evaluating another [=custom function=]. Let |calling context| be a [=calling context=] with that "hypothetical element" and that descriptor. 4. [=Evaluate a custom function=], using |function|, |arguments|, and |calling context|, and return the [=equivalent token sequence=] of the value resulting from the evaluation.

	@function --max-plus-x(--list, --x) {
	  result: calc(max(var(--list)) + var(--x));
	}
	div {
	  width: --max-plus-x({ 1px, 7px, 2px }, 3px); /* 10px */
	}
	

	@function --foo(--x) {
	  result: --foo(10);
	}
	

	@function --bar() {
	  --x: --bar();
	  result: 1;
	}
	

	@function --baz(--x) {
	  @media (unknown-feature) {
	    result: --baz(42);
	  }
	  result: 1;
	}

	

	@function --baz(--x) {
	  --y: 10px;
	  result: calc(var(--x) + var(--y));
	}

	div {
	  --x: --baz(1px);
	  --y: --baz(2px);
	  width: var(--x);  /* 11px */
	  height: var(--y); /* 12px */
	}
	

To evaluate a custom function |custom function|, given a [=calling context=] |calling context| and a list of CSS values |arguments|, returning a CSS value: 1. Let |substitution context| be a [=substitution context=] containing &bs<<;"function", |custom function|&bs>>;. Note: Due to [=tree-scoped names|tree-scoping=], the same function name may appear multiple times on the stack while referring to different [=custom functions=]. For this reason, the [=custom function=] itself is included in the [=substitution context=], not just its name. 2. [=guarded|Guard=] |substitution context| for the remainder of this algorithm. If |substitution context| is marked as [=cyclic substitution context|cyclic=], return the [=guaranteed-invalid value=]. 3. If the number of items in |arguments| is greater than the number of [=function parameters=] in |custom function|, return the [=guaranteed-invalid value=]. 4. Let |registrations| be an initially empty set of [=custom property registrations=]. 5. For each [=function parameter=] of |custom function|, create a [=custom property registration=] with the parameter's name, a syntax of the [=parameter type=], an inherit flag of "true", and no initial value. Add the registration to |registrations|. 6. If |custom function| has a [=custom function/return type=], create a [=custom property registration=] with the name "return" (violating the usual rules for what a registration's name can be), a syntax of the [=custom function/return type=], an inherit flag of "false", and no initial value. Add the registration to |registrations|. 7. Let |argument rule| be an initially empty [=style rule=]. 8. For each [=function parameter=] of |custom function|: 1. Let |arg value| be the value of the corresponding argument in |arguments|, or the [=guaranteed-invalid value=] if there is no corresponding argument. 2. Let |default value| be the parameter's [=default value=]. 3. Add a [=custom property=] to |argument rule| with a name of the parameter's name, and a value of ''first-valid(|arg value|, |default value|)''. 9. [=Resolve function styles=] using |custom function|, |argument rule|, |registrations|, and |calling context|. Let |argument styles| be the result. 10. Let |body rule| be the [=function body=] of |custom function|, as a [=style rule=]. 11. For each [=custom property registration=] of |registrations| except the registration with the name "result", set its initial value to the corresponding value in |argument styles|, set its syntax to the [=universal syntax definition=], and prepend a [=custom property=] to |body rule| with the property name and value in |argument styles|. 12. [=Resolve function styles=] using |custom function|, |body rule|, |registrations|, and |calling context|. Let |body styles| be the result. 13. If |substitution context| is marked as a [=cyclic substitution context=], return the [=guaranteed-invalid value=]. Note: Nested [=arbitrary substitution functions=] may have marked |substitution context| as [=cyclic substitution context|cyclic=] at some point after step 2, for example when resolving '@function/result'. 14. Return the value of the '@function/result' property in |body styles|.

To resolve function styles, given a [=custom function=] |custom function|, a style rule |rule|, a set of [=custom property registrations=] |registrations|, and a [=calling context=] |calling context|, returning a set of [=computed value|computed=] styles: 1. Create a "hypothetical element" |el| that acts as a child of |calling context|'s element. |el| is [=featureless=], and only [=custom properties=] and the '@function/result' descriptor apply to it. 2. Apply |rule| to |el| to the [=specified value=] stage, with the following changes: * Only the [=custom property registrations=] in |registrations| are visible; all other [=custom properties=] are treated as unregistered. * The [=inherited value=] of |calling context|'s property is the [=guaranteed-invalid value=]. * On custom properties, the [=CSS-wide keywords=] have the following effects:

''initial''

Resolves to the initial value of the custom property within |registrations|.

''inherit''

Resolves like an ''inherit()'' function with the custom property name as its one and only argument. Note: This ensures that a [=function parameter=] defaulted to ''inherit'' is reinterpreted using the local [=parameter type=].

any other [=CSS-wide keyword=]

Resolves to the [=guaranteed-invalid value=].

Note: ''initial'' references the [=custom property registration=] created from the [=function parameters=], letting you "reset" a property to the passed value. ''inherit'' inherits from the [=calling context=]'s element.\ On '@function/result', all [=CSS-wide keywords=] are left unresolved. Note: ''result: inherit'', for example, will cause the <> to evaluate to the ''inherit'' keyword, similar to ''var(--unknown, inherit)''. * For a given [=custom property=] |prop|, during [=property replacement=] for that property, the [=substitution context=] also includes |custom function|. In other words, the [=substitution context=] is &bs<<;"property", |prop|'s name, |custom function|&bs>>; Note: Due to dynamic scoping, the same property name may appear multiple times on the stack while referring to different [=custom properties=]. For this reason, the [=custom function=] itself is included in the [=substitution context=], not just its name. 3. Determine the [=computed value=] of all [=custom properties=] and the '@function/result' "property" on |el|, as defined in [[css-properties-values-api#calculation-of-computed-values]], with changes from the previous step, and the following: * Aside from references to [=custom properties=] (which use the values on |el| as normal) and numbers/percentages (which are left unresolved in custom properties, as normal), all values which would normally refer to the element being styled instead refer to |calling context|'s [=calling context/root element=]. Note: For example, ''attr()'' in a property, or ''@container'' queries in the rule. 4. Return |el|'s styles. Note: Only [=custom properties=] and the '@function/result' descriptor will be used from these styles.

	@function --mypi() {
	  result: 3;
	  result: 3.14;
	}
	

	@function --circle-area(--r) {
	  result: calc(pi * var(--r2));
	  --r2: var(--r) * var(--r);
	}
	

	@function --suitable-font-size() {
		result: 16px;
		@media (width > 1000px) {
			result: 20px;
		}
	}
	

	@function --suitable-font-size() {
		@media (width > 1000px) {
			result: 20px;
		}
		result: 16px;
	}
	

	@function --suitable-font-size() {
		--size: 16px;
		@media (width > 1000px) {
			--size: 20px;
		}
		result: var(--size);
	}
	

		@mixin --gradient-text(
			--from type(<>): mediumvioletred,
			--to type(<>): teal,
			--angle: to bottom right,
		) {
			color: env(--from, env(--to));

			@supports (background-clip: text) or (-webkit-background-clip: text) {
				@env --gradient: linear-gradient(env(--angle), env(--from), env(--to));
				background: env(--gradient, env(--from));
				color: transparent;
				-webkit-background-clip: text;
				background-clip: text;
			}
		}

		h1 {
			@apply --gradient-text(pink, powderblue);
		}
	

		h1 {
			@nest {
				@env --from: pink;
				@env --to: powderblue;
				@env --angle: to bottom right;
				color: env(--from, env(--to));

				@supports (background-clip: text) or (-webkit-background-clip: text) {
					@env --gradient: linear-gradient(env(--angle), env(--from), env(--to));
					background: env(--gradient, env(--from));
					color: transparent;
					-webkit-background-clip: text;
					background-clip: text;
				}
			}
		}
	

	<<@mixin>> = @mixin <> <>#? , @contents? )
	{
		<>
	}

	<<@contents>> = @contents [ { <> } ]?

	@mixin --one-column(@contents) {
		@media (width <= 800px) {
			@contents;
		}
	}
	@mixin --two-column(@contents) {
		@media (width > 800px) {
			@contents;
		}
	}
	body {
		@apply --one-column {
			display: flex;
			flex-flow: column;
		}
		@apply --two-column {
			display: grid;
			grid-template-columns: ;
		}
	}
	

<<@apply>> = @apply [ <> | <> ] [ { <> } ]?;

	.foo {
		@apply --one;
		/* Invokes the --one mixin, with no arguments or contents. */

		@apply --two(blue);
		/* Invokes --two with one argument, and no contents. */

		@apply --three {color: red;}
		/* Invokes --three with no arguments, but with contents. */

		@apply --four(blue) {color: red;}
		/* Invokes --four with both an argument and contents. */
	}
	

	.foo {
		@apply --no-args;
	}
	.bar {
		@apply --no-args();
	}
	

	@mixin --just-contents(@contents) {
		@contents { color: red; }
	}

	.foo {
		@apply --just-contents;
		/* substitutes with `color: red;` */
	}
	.bar {
		@apply --just-contents {};
		/* substitutes with nothing at all */
	}
	

	<<@env>> = @env <> <>? : <>? ;

[Exposed=Window]
interface CSSFunctionRule : CSSGroupingRule {
	readonly attribute CSSOMString name;
	sequence<FunctionParameter> getParameters();
	readonly attribute CSSOMString returnType;
};

dictionary FunctionParameter {
	required CSSOMString name;
	required CSSOMString type;
	CSSOMString? defaultValue;
};

	@function --bar() {
	  --x: 42;
	  result: var(--y);
	  @media (width > 1000px) {
	    /* ... */
	  }
	  --y: var(--x);
	}
	

	@function --bar() {
	  /* CSSFunctionDeclarations { */
	    --x: 42;
	    result: var(--y);
	  /* } */
	  @media (width > 1000px) {
	    /* ... */
	  }
	  /* CSSFunctionDeclarations { */
	    --y: var(--x);
	  /* } */
	}