First-class plain CSS functions

Similar to the new calculation type, it would be fantastic to add first-class support for the var() function as a new variable type.

Desired Features

Meta type recognition

$custom-prop: var(--foo);
@debug meta.type-of($custom-prop); // "variable"

Inspection of name and values

$custom-prop: var(--foo, 8px);
@debug meta.var-name($custom-prop); // "--foo"
@debug meta.var-value($custom-prop); // 8px

Interpolation

$length: 8px;
$custom-prop: var(--bar, red);

.foo {
  color: var(--foo, $custom-prop);
  padding: var(--baz, $length);
}

.foo {
  color: var(--foo, var(--bar, red));
  padding: var(--baz, 8px);
}

Motivation

This would be of particular use to the Material Web team, which uses a custom Map data structure to manage CSS variables. This is necessary since a var() is a string and the type of the value is lost when attempting to parse/inspect it.

[nex3]

A more general way to do this would be to treat all plain-CSS functions as first-class values whose names and arguments could be directly inspected, rather than eagerly converting them to strings. So we’d something like meta.fn-name() and meta.fn-args() which work analogously to meta.calc-name() and meta.calc-args(). We could potentially even subsume the latter into the former by saying that calculations count as plain CSS functions for the purposes of built-in functions.

Interpolation

$length: 8px;
$custom-prop: var(--bar, red);

.foo {
  color: var(--foo, $custom-prop);
  padding: var(--baz, $length);
}

.foo {
  color: var(--foo, var(--bar, red));
  padding: var(--baz, 8px);
}

It’s worth noting that this already works as written today.

[asyncLiz]

I have started work on a proposal for this: #3446

That’s awesome! We’ll be following closely 😄