const style = document.createElement("style"); document.head.appendChild(style); export default class CSSOM { /** @type {Map} */ static rules = new Map(); /** @type {Map} */ 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; /* */