uger/build/css.js

```ts import { body } from "uger";

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CSSImport = exports.Styles = exports.CSS = void 0;
const camelToKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
const StyleElement = document.body.appendChild(document.createElement("style"));
const CSSElements = [];
function updateCSS() {
    let cssCode = "";
    for (const elem of CSSElements)
        cssCode += elem.cssCode;
    StyleElement.innerText = cssCode;
    // console.log("updateCSS", cssCode);
}
class CSSElement {
    cssCode = "";
    constructor() {
        CSSElements.push(this);
    }
    /** Updates css code of this element */
    update() { }
    /** Removes this css element */
    remove() {
        if (CSSElements.includes(this))
            CSSElements.splice(CSSElements.indexOf(this), 1);
        updateCSS();
    }
}
class CSSImportElem extends CSSElement {
    importUrl;
    additionalProperties;
    constructor(importUrl, additionalProperties) {
        super();
        this.importUrl = importUrl;
        this.additionalProperties = additionalProperties;
        this.update();
    }
    update() {
        this.cssCode = `@import url(${this.importUrl})${this.additionalProperties !== undefined
            ? " " + this.additionalProperties
            : ""};`;
        updateCSS();
    }
}
class CSSDeclaration extends CSSElement {
    selector;
    style;
    /**
     * @param selector css selector, for example "p .bold", "#canvas"
     * @param declaration some css properties with values
     */
    constructor(selector, declaration) {
        super();
        this.selector = selector;
        this.style = declaration;
        this.update();
    }
    update() {
        this.cssCode = "";
        let converted = {};
        for (const [property, value] of Object.entries(this.style))
            if (value != undefined)
                converted[camelToKebabCase(property)] = value.toString();
        this.cssCode += this.selector + " {";
        for (const [key2, value2] of Object.entries(converted)) {
            this.cssCode += key2 + ":" + value2 + ";";
        }
        this.cssCode += "}";
        // console.log("update", this.cssCode);
        updateCSS();
        // 	StyleElement.innerText += cssCode;
    }
}
/**
 * Does some css
 * @param selector
 * @param declaration
 * @returns
 */
function CSS(selector, declaration) {
    return new CSSDeclaration(selector, declaration);
}
exports.CSS = CSS;
/**
 * Does some more css than CSS()
 * @param styles
 * @returns
 */
function Styles(styles) {
    let declarationArr = [];
    for (const [selector, declaration] of Object.entries(styles))
        declarationArr.push(new CSSDeclaration(selector, declaration));
    return declarationArr;
}
exports.Styles = Styles;
/**
 * Uses @import thing in CSS
 * @param importUrl
 * @returns
 */
function CSSImport(importUrl) {
    return new CSSImportElem(importUrl);
}
exports.CSSImport = CSSImport;