ultra-light-js 1.0.18

package/dist/ultra-light.js

@@ -0,0 +1,816 @@
+import { hasCleanup } from './types';
+const SVG_EXCLUSIVE_TAGS = new Set([
+    'svg', 'circle', 'ellipse', 'line', 'polygon', 'polyline', 'rect', 'path', 'g',
+    'defs', 'symbol', 'use', 'marker', 'clipPath', 'mask', 'pattern', 'title', 'text', 'tspan',
+    'linearGradient', 'radialGradient', 'meshGradient', 'stop', 'hatch', 'hatchpath',
+    'animate', 'animateMotion', 'animateTransform', 'set', 'animateColor', 'mpath',
+    'filter', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite',
+    'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight',
+    'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR',
+    'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
+    'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile',
+    'feTurbulence', 'view', 'font', 'glyph', 'missing-glyph', 'vkern', 'hkern',
+    'color-profile', 'switch', 'cursor', 'image'
+]);
+const TAG_REGEX = /^<([a-z][a-z0-9-]*)/i;
+export function parseHTMLString(htmlString, document) {
+    if (!document)
+        document = window.document;
+    if (typeof htmlString !== 'string')
+        return htmlString;
+    const trimmed = htmlString
+        .trim()
+        .replace(/\n/g, '')
+        .replace(/\s{2,}/g, ' ');
+    if (!trimmed)
+        return null;
+    const tagMatch = trimmed.match(TAG_REGEX);
+    if (!tagMatch)
+        return null;
+    const tag = tagMatch[1].toLowerCase();
+    if (SVG_EXCLUSIVE_TAGS.has(tag)) {
+        const temp = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        temp.innerHTML = trimmed;
+        return temp.firstElementChild;
+    }
+    const template = document.createElement('template');
+    template.innerHTML = trimmed;
+    return template.content.firstElementChild;
+}
+function stableHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash) + str.charCodeAt(i);
+        hash |= 0;
+    }
+    return Math.abs(hash).toString(36);
+}
+function deepFreeze(obj) {
+    if (typeof obj !== 'object' || obj === null)
+        return obj;
+    Object.keys(obj).forEach(key => deepFreeze(obj[key]));
+    return Object.freeze(obj);
+}
+let activeScope = null;
+function registerInScope(unsub) {
+    if (activeScope)
+        activeScope.push(unsub);
+}
+export function ultraScope(fn) {
+    const prev = activeScope;
+    const scope = [];
+    activeScope = scope;
+    try {
+        const result = fn();
+        return [result, () => scope.forEach(unsub => {
+                try {
+                    unsub();
+                }
+                catch (error) {
+                    console.error('Error while disposing ultraScope:', error);
+                }
+            })];
+    }
+    finally {
+        activeScope = prev;
+    }
+}
+export function ultraState(initialValue, freeze = false) {
+    if (initialValue === undefined) {
+        console.warn('ultraState: initialValue is undefined');
+    }
+    const maybeFreeze = (v) => (freeze && typeof v === 'object' && v !== null) ? deepFreeze(v) : v;
+    let value = maybeFreeze(initialValue);
+    const subscribers = new Set();
+    const setValue = (newValue) => {
+        if (typeof value !== 'object' && value === newValue)
+            return;
+        value = maybeFreeze(newValue);
+        subscribers.forEach(fn => {
+            try {
+                fn(value);
+            }
+            catch (error) {
+                console.error('Error en subscriber de ultraState:', error);
+            }
+        });
+    };
+    const subscribe = (fn) => {
+        subscribers.add(fn);
+        const unsubscribe = () => { subscribers.delete(fn); };
+        registerInScope(unsubscribe);
+        return unsubscribe;
+    };
+    return [
+        () => value,
+        setValue,
+        subscribe
+    ];
+}
+export function UltraContext(initialValue, displayName) {
+    let owner = null;
+    let assigned = false;
+    displayName = (!displayName) ? 'context' : displayName;
+    if (initialValue === undefined) {
+        console.warn('UltraContext: initialValue is undefined');
+    }
+    let value = initialValue;
+    const subscribers = new Set();
+    function canReach(candidate) {
+        if (!owner)
+            return true;
+        if (!candidate)
+            return false;
+        if (!owner?.contains(candidate)) {
+            console.warn('UltraContext: unreachable context');
+            return false;
+        }
+        else {
+            return true;
+        }
+    }
+    ;
+    function getValue(candidate) {
+        if (!canReach(candidate))
+            return "undefined";
+        return value;
+    }
+    function setValue(newValue, candidate) {
+        if (!canReach(candidate))
+            return;
+        if (typeof value !== 'object' && value === newValue)
+            return;
+        value = newValue;
+        subscribers.forEach(fn => {
+            try {
+                fn(value);
+            }
+            catch (error) {
+                console.error('UltraContext: error in subscriber:', error);
+            }
+        });
+    }
+    ;
+    function subscribe(fn, candidate) {
+        if (!canReach(candidate))
+            return () => { };
+        subscribers.add(fn);
+        return () => subscribers.delete(fn);
+    }
+    ;
+    function own(newOwner) {
+        if (assigned) {
+            throw new Error(`UltraContext: context owner for "${displayName}" cannot be reassigned.\n`
+                + `Current owner: ${owner?.tagName || 'null'}.`);
+        }
+        owner = newOwner;
+        assigned = true;
+    }
+    ;
+    return {
+        set: setValue,
+        get: getValue,
+        subscribe,
+        own
+    };
+}
+export function ultraQueryParams() {
+    const urlData = new URLSearchParams(window.location.search);
+    const params = {};
+    urlData.forEach((value, key) => {
+        params[key] = value;
+    });
+    return params;
+}
+function matchRoute(routePath, currentPath) {
+    if (routePath === currentPath) {
+        return { params: {}, matched: true };
+    }
+    if (routePath === '/*') {
+        return { params: {}, matched: true, isWildcard: true };
+    }
+    const routeParts = routePath.split('/').filter(p => p);
+    const pathParts = currentPath.split('/').filter(p => p);
+    if (routeParts.length !== pathParts.length) {
+        return { matched: false, params: {} };
+    }
+    const params = {};
+    for (let i = 0; i < routeParts.length; i++) {
+        if (routeParts[i].startsWith(':')) {
+            params[routeParts[i].slice(1)] = pathParts[i];
+        }
+        else if (routeParts[i] !== pathParts[i]) {
+            return { matched: false, params: {} };
+        }
+    }
+    return { params, matched: true };
+}
+function reconcileRouteScope(hasTargetComponent, wildcardComponent, targetDispose, wildcardDispose) {
+    if (!hasTargetComponent && wildcardComponent) {
+        return wildcardDispose;
+    }
+    wildcardDispose?.();
+    return targetDispose;
+}
+export function UltraRouter(...routes) {
+    const paths = routes.map(r => r.path);
+    const duplicates = paths.filter((p, i) => paths.indexOf(p) !== i && p !== '/*');
+    if (duplicates.length > 0) {
+        console.warn('UltraRouter: Duplicate routes detected:', duplicates.join(', '));
+    }
+    const container = document.createElement('div');
+    container.classList.add('browser-router');
+    let currentCleanup = null;
+    const renderRoute = () => {
+        if (currentCleanup) {
+            try {
+                currentCleanup();
+            }
+            catch (error) {
+                console.error('Error while cleaning up previous route:', error);
+            }
+        }
+        const currentPath = window.location.pathname;
+        let targetComponent = null;
+        let routeParams = {};
+        let wildcardComponent = null;
+        let targetDispose = null;
+        let wildcardDispose = null;
+        routes.forEach(route => {
+            const match = matchRoute(route.path, currentPath);
+            if (match.matched && !match.isWildcard && !targetComponent) {
+                routeParams = match.params;
+                const [component, dispose] = ultraScope(() => route.component(routeParams));
+                targetComponent = parseHTMLString(component);
+                targetDispose = dispose;
+            }
+            else if (match.matched && match.isWildcard) {
+                const [component, dispose] = ultraScope(() => route.component());
+                wildcardComponent = parseHTMLString(component);
+                wildcardDispose = dispose;
+            }
+        });
+        const scopeDispose = reconcileRouteScope(!!targetComponent, wildcardComponent, targetDispose, wildcardDispose);
+        if (!targetComponent && wildcardComponent) {
+            targetComponent = wildcardComponent;
+        }
+        container.innerHTML = '';
+        if (targetComponent) {
+            container.appendChild(targetComponent);
+        }
+        const nodeCleanup = targetComponent?._cleanup;
+        if (nodeCleanup || scopeDispose) {
+            currentCleanup = () => {
+                nodeCleanup?.();
+                scopeDispose?.();
+            };
+        }
+    };
+    renderRoute();
+    const handler = () => renderRoute();
+    window.addEventListener('popstate', handler);
+    const cleanup = () => {
+        window.removeEventListener('popstate', handler);
+    };
+    container._cleanup = () => {
+        if (cleanup)
+            cleanup();
+        if (currentCleanup)
+            currentCleanup();
+    };
+    return container;
+}
+export function ultraNavigate({ href, viewTransition = false }) {
+    function navigate() {
+        try {
+            window.history.pushState({}, '', href);
+            window.scrollTo({ top: 0, behavior: 'instant' });
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+        catch (error) {
+            console.error('ultraNavigate: Navigation error:', error);
+        }
+    }
+    if (!href) {
+        console.warn('ultraNavigate: a valid href is required');
+        return;
+    }
+    if (!viewTransition) {
+        navigate();
+    }
+    else {
+        if (!document.startViewTransition) {
+            navigate();
+            return;
+        }
+        document.startViewTransition(navigate);
+    }
+}
+export function UltraLink({ href, children, viewTransition = false, className = [] }) {
+    if (!href) {
+        console.warn('UltraLink: href is required');
+    }
+    const link = document.createElement('a');
+    link.href = href;
+    function navigate() {
+        try {
+            window.history.pushState({}, '', href);
+            window.scrollTo({ top: 0, behavior: 'instant' });
+            window.dispatchEvent(new PopStateEvent('popstate'));
+        }
+        catch (error) {
+            console.error('UltraLink: Navigation error:', error);
+        }
+    }
+    function clickHandler(e) {
+        if (e.ctrlKey || e.metaKey)
+            return;
+        e.preventDefault();
+        if (window.location.pathname === href)
+            return;
+        if (!viewTransition) {
+            navigate();
+        }
+        else {
+            if (!document.startViewTransition) {
+                navigate();
+                return;
+            }
+            document.startViewTransition(navigate);
+        }
+    }
+    ;
+    link.addEventListener('click', clickHandler);
+    children.forEach(child => {
+        if (!child)
+            return;
+        const childElement = parseHTMLString(child);
+        if (childElement) {
+            link.appendChild(childElement);
+        }
+    });
+    className.forEach(sel => {
+        if (!sel)
+            return;
+        link.classList.add(sel);
+    });
+    link._cleanup = () => {
+        link.removeEventListener('click', clickHandler);
+    };
+    return link;
+}
+export function UltraFragment(...children) {
+    const fragment = document.createDocumentFragment();
+    children.forEach(component => {
+        if (!component)
+            return;
+        const element = parseHTMLString(component);
+        if (element) {
+            fragment.appendChild(element);
+        }
+    });
+    return fragment;
+}
+export function UltraComponent({ component, eventHandler = {}, attributes = {}, styles = {}, className = [], children = [], trigger = [], onMount = [], cleanup = [], }) {
+    const node = parseHTMLString(component);
+    if (!node) {
+        console.error('UltraComponent: Could not create node');
+        return document.createElement('div');
+    }
+    const cleanupFunctions = [];
+    Object.keys(eventHandler).forEach((event) => {
+        const handler = eventHandler[event];
+        if (handler) {
+            node.addEventListener(event, handler);
+            cleanupFunctions.push(() => node.removeEventListener(event, handler));
+        }
+    });
+    Object.keys(styles).forEach(key => {
+        try {
+            node.style[key] = styles[key];
+        }
+        catch (error) {
+            console.error(`Error al aplicar estilo ${key}:`, error);
+        }
+    });
+    Object.keys(attributes).forEach(key => {
+        try {
+            node.setAttribute(key, attributes[key]);
+        }
+        catch (error) {
+            console.error(`Error applying attribute ${String(key)}:`, error);
+        }
+    });
+    className.forEach(className => {
+        try {
+            if (className)
+                node.classList.add(className);
+        }
+        catch (error) {
+            console.error(`Error al aplicar clase ${className}:`, error);
+        }
+    });
+    children.forEach(child => {
+        if (!child)
+            return;
+        const childElement = parseHTMLString(child);
+        if (childElement) {
+            node.appendChild(childElement);
+            if (hasCleanup(childElement)) {
+                cleanupFunctions.push(childElement._cleanup);
+            }
+        }
+    });
+    onMount.forEach(fn => {
+        requestAnimationFrame(() => {
+            void (async () => {
+                try {
+                    const result = fn(node);
+                    const cleanup = result instanceof Promise ? await result : result;
+                    if (cleanup)
+                        cleanupFunctions.push(cleanup);
+                }
+                catch (error) {
+                    console.error('Error while executing onMount function(s):', error);
+                }
+            })();
+        });
+    });
+    trigger.forEach(t => {
+        const { subscriber, triggerFunction: subscriberFunction, defer } = t;
+        if (subscriber && subscriberFunction) {
+            try {
+                const callback = defer
+                    ? () => requestAnimationFrame(() => subscriberFunction(node))
+                    : () => subscriberFunction(node);
+                const subscribers = Array.isArray(subscriber) ? subscriber : [subscriber];
+                subscribers.forEach(sub => {
+                    const unsubscribe = sub(callback);
+                    if (unsubscribe) {
+                        cleanupFunctions.push(unsubscribe);
+                    }
+                });
+            }
+            catch (error) {
+                console.error('Error en trigger de UltraComponent:', error);
+            }
+        }
+    });
+    cleanup.forEach(fn => {
+        try {
+            cleanupFunctions.push(fn);
+        }
+        catch (error) {
+            console.error('Error añadiendo cleanup de UltraComponent:', error);
+        }
+    });
+    node._cleanup = () => {
+        cleanupFunctions.forEach(cleanup => {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('Error al limpiar UltraComponent:', error);
+            }
+        });
+    };
+    return node;
+}
+export function UltraActivity({ component, eventHandler = {}, attributes = {}, styles = {}, className = [], children = [], mode, trigger = [], type = 'display', onMount = [], cleanup = [] }) {
+    const supportedTypes = ['display', 'visibility'];
+    if (!supportedTypes.includes(type)) {
+        console.warn(`Activity: type not supported. Display will be used by default. Supported types: ${supportedTypes.join(', ')}`);
+        type = 'display';
+    }
+    const element = parseHTMLString(component);
+    if (!element) {
+        console.error('Activity: Could not create element');
+        return document.createElement('div');
+    }
+    const childrenElements = children.filter(child => child !== null).map(child => parseHTMLString(child));
+    const cleanupFunctions = [];
+    Object.keys(eventHandler).forEach((event) => {
+        const handler = eventHandler[event];
+        if (handler) {
+            element.addEventListener(event, handler);
+            cleanupFunctions.push(() => element.removeEventListener(event, handler));
+        }
+    });
+    Object.keys(attributes).forEach(key => {
+        try {
+            element.setAttribute(key, attributes[key]);
+        }
+        catch (error) {
+            console.error(`Error applying attribute ${String(key)}:`, error);
+        }
+    });
+    Object.keys(styles).forEach(key => {
+        try {
+            element.style[key] = styles[key];
+        }
+        catch (error) {
+            console.error(`Error while applying style ${key}:`, error);
+        }
+    });
+    className.forEach(className => {
+        try {
+            if (className)
+                element.classList.add(className);
+        }
+        catch (error) {
+            console.error(`Error while applying class ${className}:`, error);
+        }
+    });
+    const fragmentChildren = [];
+    if (element.nodeType === 11) {
+        Array.from(element.childNodes).forEach(child => fragmentChildren.push(child));
+    }
+    childrenElements.forEach(childElement => {
+        if (childElement) {
+            if (element.nodeType === 11) {
+                fragmentChildren.push(childElement);
+            }
+            element.appendChild(childElement);
+            if (hasCleanup(childElement)) {
+                cleanupFunctions.push(childElement._cleanup);
+            }
+        }
+    });
+    const update = () => {
+        try {
+            const current = mode.state();
+            const targets = (element.nodeType === 11)
+                ? fragmentChildren
+                : [element];
+            if (type === 'display') {
+                targets.forEach(el => el.style.display = current ? '' : 'none');
+            }
+            else if (type === 'visibility') {
+                targets.forEach(el => el.style.visibility = current ? 'visible' : 'hidden');
+            }
+        }
+        catch (error) {
+            console.error('Error while updating Activity:', error);
+        }
+    };
+    if (Array.isArray(mode.subscriber)) {
+        mode.subscriber.forEach(subscriber => {
+            const unsubscribe = subscriber(update);
+            if (unsubscribe) {
+                cleanupFunctions.push(unsubscribe);
+            }
+        });
+    }
+    else {
+        const unsubscribe = mode.subscriber(update);
+        if (unsubscribe) {
+            cleanupFunctions.push(unsubscribe);
+        }
+    }
+    update();
+    onMount.forEach(fn => {
+        requestAnimationFrame(() => {
+            void (async () => {
+                try {
+                    const result = fn(element);
+                    const cleanup = result instanceof Promise ? await result : result;
+                    if (cleanup)
+                        cleanupFunctions.push(cleanup);
+                }
+                catch (error) {
+                    console.error('Error while executing onMount function(s):', error);
+                }
+            })();
+        });
+    });
+    trigger.forEach(t => {
+        const { subscriber, triggerFunction, defer } = t;
+        if (subscriber && triggerFunction) {
+            try {
+                const callback = defer
+                    ? () => requestAnimationFrame(() => triggerFunction(element))
+                    : () => triggerFunction(element);
+                const subscribers = Array.isArray(subscriber) ? subscriber : [subscriber];
+                subscribers.forEach(sub => {
+                    const unsub = sub(callback);
+                    if (unsub) {
+                        cleanupFunctions.push(unsub);
+                    }
+                });
+            }
+            catch (error) {
+                console.error('Error in Activity trigger:', error);
+            }
+        }
+    });
+    cleanup.forEach(fn => {
+        try {
+            cleanupFunctions.push(fn);
+        }
+        catch (error) {
+            console.error('Error adding cleanup to Activity:', error);
+        }
+    });
+    element._cleanup = () => {
+        cleanupFunctions.forEach(cleanup => {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('Error while cleaning up Activity:', error);
+            }
+        });
+    };
+    return element;
+}
+const styleCache = new Map();
+export function ultraStyles(cssString, document) {
+    if (!document)
+        document = window.document;
+    if (!cssString || typeof cssString !== 'string') {
+        console.warn('ultraStyles: invalid cssString');
+        return {};
+    }
+    const hash = stableHash(cssString);
+    if (styleCache.has(hash)) {
+        return styleCache.get(hash);
+    }
+    let styleEl = document.getElementById('ultra-styles');
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = 'ultra-styles';
+        document.head.appendChild(styleEl);
+    }
+    const classMap = {};
+    const classRegex = /\.([a-zA-Z_-][a-zA-Z0-9_-]*)/g;
+    let match;
+    const classNames = new Set();
+    while ((match = classRegex.exec(cssString)) !== null) {
+        classNames.add(match[1]);
+    }
+    let scopedCSS = cssString;
+    classNames.forEach(className => {
+        const hashedClass = `${className}_${hash}`;
+        classMap[className] = hashedClass;
+        const pattern = new RegExp(`\\.${className}\\b`, 'g');
+        scopedCSS = scopedCSS.replace(pattern, `.${hashedClass}`);
+    });
+    if (!styleEl.textContent?.includes(`/*${hash}*/`)) {
+        styleEl.textContent += `\n/*${hash}*/\n${scopedCSS}`;
+    }
+    styleCache.set(hash, classMap);
+    return classMap;
+}
+export function ultraCompState(initialComp, freeze = false) {
+    if (typeof initialComp !== 'object' || initialComp === null) {
+        throw new Error('ultraCompState: initial value cannot be a primitive or null.');
+    }
+    const comp = {};
+    Object.keys(initialComp).forEach(key => {
+        if (typeof initialComp[key] === 'function') {
+            const fn = initialComp[key];
+            comp[key] = (...args) => fn(comp, ...args);
+            return;
+        }
+        const [getValue, setValue, subscribeToValue] = ultraState(initialComp[key], freeze);
+        comp[key] = {
+            get: getValue,
+            set: setValue,
+            subscribe: subscribeToValue,
+        };
+    });
+    return comp;
+}
+export function ultraQuery() {
+    const [cache, setCache, subscribeToCache] = ultraState({});
+    const [isFetching, setIsFetching, subscribeToFetching] = ultraState(false);
+    const [hasError, setHasError, subscribeToHasError] = ultraState(false);
+    const [error, setError, subscribeToError] = ultraState(null);
+    const timerMap = new Map();
+    const pendingMap = new Map();
+    const invalidateCache = (key) => {
+        const newCache = { ...cache() };
+        delete newCache[key];
+        setCache(newCache);
+        if (timerMap.has(key)) {
+            clearTimeout(timerMap.get(key));
+            timerMap.delete(key);
+        }
+    };
+    const addCache = (key, value, staleTime) => {
+        if (timerMap.has(key)) {
+            clearTimeout(timerMap.get(key));
+        }
+        setCache({ ...cache(), [key]: value });
+        const timer = setTimeout(() => {
+            invalidateCache(key);
+        }, staleTime);
+        timerMap.set(key, timer);
+    };
+    const fetch = async (key, fetcher, staleTime = 5 * 60 * 1000) => {
+        if (Object.hasOwn(cache(), key)) {
+            return {
+                hasError,
+                isFetching,
+                data: cache()[key],
+            };
+        }
+        if (pendingMap.has(key)) {
+            await pendingMap.get(key);
+            return {
+                hasError,
+                isFetching,
+                data: cache()[key],
+            };
+        }
+        setIsFetching(true);
+        setHasError(false);
+        setError(null);
+        const pending = (async () => {
+            try {
+                const data = await fetcher();
+                addCache(key, data, staleTime);
+            }
+            catch (error) {
+                setHasError(true);
+                setError(error);
+            }
+            finally {
+                setIsFetching(false);
+                pendingMap.delete(key);
+            }
+        })();
+        pendingMap.set(key, pending);
+        await pending;
+        return {
+            hasError,
+            isFetching,
+            data: cache()[key],
+        };
+    };
+    return {
+        fetch,
+        isFetching,
+        hasError,
+        error,
+        subscribeToFetching,
+        subscribeToHasError,
+        subscribeToError,
+        subscribeToCache,
+        cache,
+        invalidateCache,
+    };
+}
+export function ultraPortal(app, portal) {
+    const $app = (typeof app === 'string') ? document.querySelector(app) : app;
+    if (!$app) {
+        throw new Error('UltraPortal: No application found with selector:');
+    }
+    const $portalElement = parseHTMLString(portal);
+    if (!$portalElement) {
+        throw new Error('UltraPortal: Invalid portal element');
+    }
+    $app.after($portalElement);
+}
+function isValidCssObject(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.getPrototypeOf(value) === Object.prototype &&
+        Object.keys(value).length > 0);
+}
+export function ultraStyles2(cssObject, document = window.document) {
+    if (!isValidCssObject(cssObject)) {
+        console.warn('ultraStyles2: invalid cssObject');
+        return {};
+    }
+    let $styleEl = document.getElementById('ultra-styles');
+    if (!$styleEl) {
+        $styleEl = document.createElement('style');
+        $styleEl.id = 'ultra-styles';
+        document.head.appendChild($styleEl);
+    }
+    const returnable = {};
+    const hash = stableHash(JSON.stringify(cssObject));
+    if (styleCache.has(hash)) {
+        return styleCache.get(hash);
+    }
+    let cssString = '';
+    for (const selector of Object.keys(cssObject)) {
+        const className = `${selector}_${hash}`;
+        returnable[selector] = className;
+        cssString += `.${className}{`;
+        const styles = cssObject[selector];
+        for (const prop in styles) {
+            const value = styles[prop];
+            if (value === undefined || value === null)
+                continue;
+            const kebabProp = prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+            cssString += `${kebabProp}:${String(value)};`;
+        }
+        cssString += `}\n`;
+    }
+    $styleEl.appendChild(document.createTextNode(cssString));
+    styleCache.set(hash, returnable);
+    return returnable;
+}