pantoken / packages/core/src / cssSyntaxForValue

Function: cssSyntaxForValue()

cssSyntaxForValue(value): string

Beta

Sniff the CSS @property syntax a concrete token should register under. Tokens Studio types don't map 1:1 to CSS syntax, so the value is inspected. Returns "*" (universal) for anything that isn't a single, computationally-independent typed token.

Parameters

value

string

A concrete value (no var() / light-dark()).

Returns

string

The @property syntax descriptor.

Examples

Typed single-token values

import { cssSyntaxForValue } from "@pantoken/core";

cssSyntaxForValue("#03893D"); // → "<color>"
cssSyntaxForValue("2px");     // → "<length>"
cssSyntaxForValue("50%");     // → "<percentage>"
cssSyntaxForValue("400");     // → "<integer>"

Font-relative units and complex values fall back to universal

import { cssSyntaxForValue } from "@pantoken/core";

cssSyntaxForValue("1rem");                     // → "*" (rem isn't computationally independent)
cssSyntaxForValue("Lato, Helvetica, sans-serif"); // → "*"
cssSyntaxForValue("currentColor");             // → "*"