igniteui-webcomponents/theming/utils.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { isServer } from 'lit';
function isStyleRule(rule) {
    return rule != null && 'style' in rule;
}
function cssKeyToJsKey(key) {
    return key.replace(/^--|-./g, (match) => {
        return match.startsWith('--') ? '' : match.charAt(1).toUpperCase();
    });
}
function getAllCssVariableNames() {
    const cssVars = new Set();
    const styleSheets = Array.from(document.styleSheets);
    for (const sheet of styleSheets) {
        let rules;
        try {
            rules = sheet.cssRules;
        }
        catch {
            continue;
        }
        if (!rules) {
            continue;
        }
        for (const rule of Array.from(rules)) {
            if (isStyleRule(rule)) {
                const length = rule.style.length;
                for (let i = 0; i < length; i++) {
                    const style = rule.style[i];
                    if (style.startsWith('--')) {
                        cssVars.add(style);
                    }
                }
            }
        }
    }
    return cssVars;
}
function getElementCssVariables(allCssVars, element, pseudo) {
    const cssVars = {};
    const styles = getComputedStyle(element, pseudo);
    for (const key of allCssVars) {
        const value = styles.getPropertyValue(key);
        if (value) {
            cssVars[cssKeyToJsKey(key)] = value.trim();
        }
    }
    return cssVars;
}
export function getAllCssVariables() {
    return isServer
        ? {}
        : getElementCssVariables(getAllCssVariableNames(), document.documentElement);
}
//# sourceMappingURL=utils.js.map