lit-css-vars/dist/setters-and-getters.js

For easily creating and sharing typed CSS vars for the lit.dev ecosystem.

/**
 * Set the given CSS var to the given value on the given element. Allows numeric values but converts
 * them to strings (since the style.setProperty API only allows strings).
 *
 * @category Main
 */
export function setCssVarValue({ onElement, toValue, forCssVar, }) {
    onElement.style.setProperty(String(forCssVar.name), String(toValue));
}
/**
 * Set the given property's value to the given CSS var on the given element, using
 * "element.style.setProperty".
 *
 * @category Main
 */
export function applyCssVar({ onElement, forProperty, toCssVar, }) {
    onElement.style.setProperty(forProperty, String(toCssVar.value));
}
/**
 * Read the given CSS var's value on the given element. If "includeCascade" is set to true, the
 * given elements styles are computed to retrieve cascaded CSS var values. If "includeCascade" is
 * false, the CSS var is read directly off the element, which will only read values from the element
 * on which the CSS var was directly set.
 *
 * WARNING: "includeCascade: true" is less performant because it runs "globalThis.getComputedStyle".
 * However, in practice I've yet to actually see this be an issue (unless you're running this in an
 * immediate infinite loop but of course don't do that).
 *
 * @category Main
 */
export function readCssVarValue({ onElement, forCssVar, includeCascade, }) {
    const styleRoot = includeCascade ? globalThis.getComputedStyle(onElement) : onElement.style;
    return styleRoot.getPropertyValue(String(forCssVar.name)).trim();
}