MWSE/public/studio/cssom.js

const style = document.createElement("style");
document.head.appendChild(style);

export default class CSSOM {
    /** @type {Map<string, CSSOM>} */
    static rules = new Map();
    /** @type {Map<string, CSSRuleList>} */
    static cRules = new Map();
    /**
     * @returns {CSSOM}
     */
    static get(name){
        return CSSOM.rules.get(name);
    }
    /** @returns {CSSRule} */
    static findRule(selector){
        for (let ruleIndex = 0; ruleIndex < style.sheet.cssRules.length; ruleIndex++)
        {
            let rule = style.sheet.cssRules.item(ruleIndex);
            if(rule.selectorText == selector)
            {
                return rule;
            }
        }
    }
    /** @returns {CSSRule} */
    static removeRule(selector){
        for (let ruleIndex = 0; ruleIndex < style.sheet.cssRules.length; ruleIndex++)
        {
            let rule = style.sheet.cssRules.item(ruleIndex);
            if(rule.selectorText == selector)
            {
                style.sheet.deleteRule(ruleIndex);
            }
        }
    }
    static css(selector, values){
        let rule;
        if(!(rule = CSSOM.findRule(selector)))
        {
            let no = style.sheet.insertRule(`${selector}{}`);
            rule = style.sheet.cssRules[no];
        }

        for(let [stylename, stylevalue] of Object.entries(values))
        {
            let name = stylename;
            let value = typeof stylevalue == "string" ? stylevalue.split('!')[0] : stylevalue;
            let priority = typeof stylevalue == "string" ? (stylevalue.split('!')[1] == "important" ? "important" : void 0) : void 0;

            
            name = name.replace(/([A-Z])/g,(_,$1) => '-' + $1.toLowerCase());
            
            rule.style.setProperty(name, value, priority);
        }
    }
    static generate(idd = null, css = null){
        let id = idd || CSSOM.generateCode();
        let t = new CSSOM(id);
        CSSOM.rules.set(t.id,t);
        css && t.css(css);
        return t;
    }
    static generateCode(){
        let mine;
        do{
            mine = Math.random().toString(36).slice(2,6);
        }while(CSSOM.rules.has(mine));
        return "i" + mine;
    }

    id = "";
    /** @type {{[key:string]: CSSRuleList}} */
    rule_t = {};
    constructor(id){
        this.id = id;
    }
    toString(){
        return this.id;
    }
    css(name, value, prefix = 'owner'){
        let rule;
        if(!this.rule_t[prefix])
        {
            let rulename = `.${this.id}` + (prefix == "owner" ? "" : prefix);
            let no = style.sheet.insertRule(`${rulename}{}`);
            this.rule_t[prefix] = style.sheet.cssRules[no];
        };
        rule = this.rule_t[prefix];
        if(value === undefined && typeof name == "string")
        {
            return rule.style.getPropertyValue(name);
        }
        if(value === null)
        {
            rule.style.removeProperty(name, value);
        }else{
            if(typeof name == "object")
            {
                for(let [stylename, stylevalue] of Object.entries(name))
                {
                    let name = stylename;
                    let value = typeof stylevalue == "string" ? stylevalue.split('!')[0] : stylevalue;
                    let priority = typeof stylevalue == "string" ? (stylevalue.split('!')[1] == "important" ? "!important" : void 0) : stylevalue;
                    if(name.indexOf('-') == -1)
                    {
                        rule.style[name] = value + (priority || "");
                    }else{
                        rule.style.setProperty(name, value, priority);
                    }
                }
            }else{
                rule.style.setProperty(name, value);
            }
        }
        return this;
    }
}

$.fn.cssom = function(obj, prefix){
    if(prefix === void 0 || (typeof obj == "object" && typeof prefix == "string"))
    {
        let cssom;
        if(this.attr("data-cssom"))
        {
            let name = this.attr("data-cssom");
            cssom = CSSOM.get(name)
        }else{
            cssom = CSSOM.generate();
            this.addClass(cssom.id);
            this.attr("data-cssom", cssom.id);
        }
        cssom.css(obj,void 0,prefix);
    }else{
        
        if(obj.indexOf(":") == -1){
            this.addClass(obj);
            CSSOM.css("." + obj, prefix);
        }else{

            let [_class,_psudio] = obj.split(":");

            this.addClass(_class);
            CSSOM.css("." + _class + ":" + _psudio, prefix);
        }
    }
    return this;
};

window.debugCssom = function(){
    for (let ruleIndex = 0; ruleIndex < style.sheet.cssRules.length; ruleIndex++)
    {
        let rule = style.sheet.cssRules.item(ruleIndex);
        console.log(rule.cssText)
    }
};
window.cssom = CSSOM;
/*



*/