Variables

CSS variables in animated values: a value that's wholly a var() is resolved against an element, so var(--accent) animates from or to the colour it stands for. values is the Key rule a binding adds for an element's own animations.

import * as Variables from "@wardic/dom/Variables"

Variables.isValue("var(--gap)") // true
Variables.resolve(element, "var(--gap)") // what `--gap` computes to on `element`

Its exports also name types the module doesn't export: its internal types.

Functions

isValue()

function isValue(value): value is string;

Whether value is a Variable value: a string that's wholly a var().

Parameters

value

unknown

Returns

value is string

resolve()

function resolve(element, value): Option<Value>;

What a Variable value stands for on element: its custom property's computed value, else its fallback, a fallback that is itself a Variable value followed up to 4 deep. None when nothing resolves. Reads the element's computed style.

Parameters

element

Element

value

string

Returns

Option<Value>

values()

function values(element): KeyRule;

The Key rule for element's Variable values: a pair with one at either end blends what they resolve to on element, through the rules after it and then by value, and lands on its target as written. It declines a pair with none, and one that doesn't resolve.

yield* buildLegs.pipe(InterpolatorRegistry.withKeyRules([Variables.values(element)]))