picasso-paint/Paint.js

Paint , a simple CSS-in-JS library that allows you to write CSS in JavaScript cssText/Object

if (!window.Rules) {
  window.Rules = new CSSStyleSheet();
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, window.Rules];
}

function Paint(selector,CSSTXT) {
  if(CSSTXT){
  window.Rules.insertRule(`${selector}{
    ${CSSTXT}
  }`, window.Rules.cssRules.length);
  }
  return new Proxy({}, {
    get(_, pseudoClass) {
      return (...styles) => {
        if (pseudoClass) {
          // إنشاء القاعدة الديناميكية
          let rule = `${selector}:${pseudoClass} {
            ${styles.join("; ")}
}`;
          if(window.Rules.cssRules.length==0){

          window.Rules.insertRule(rule, window.Rules.cssRules.length);
          } else {
            window.Rules.cssRules.length++;
          window.Rules.insertRule(rule, window.Rules.cssRules.length);
          }
        }
      };
    }
  });
}
Paint.getCSS = function (selector){
  window.Rules.cssRules.forEach(function (D){
    if(D.selectorText==selector){
      window.cssText = `${selector}{\n${D.style.cssText.replaceAll(";",";\n")}}`;
    }
    });
    return cssText;
};
Paint.getCSSObj = function (selector){
  window.Rules.cssRules.forEach(function (D){
    if(D.selectorText==selector){
      window.cssObj = D.style;
    }
    });
    return cssObj;
};
window.CSSRootRules = "";
Paint.root = function (variable, value) {

  window.CSSRootRules += `${variable}:${value};\n`;

  let rule = `:root{\n${window.CSSRootRules}}`;
  let found = false;
  for (let i = 0; i < window.Rules.cssRules.length; i++) {
    if (window.Rules.cssRules[i].selectorText === ":root") {
      window.Rules.deleteRule(i);
      found = true;
      break;
    }
  }
  window.Rules.insertRule(rule, window.Rules.cssRules.length);
    console.log(`Successfully added '${variable}: ${value}' to ':root'`);
};
Paint.removeRoot = function (variable) {
  let regex = new RegExp(`${variable}:.*?;\\n`, "g");
  let before = window.CSSRootRules;
  window.CSSRootRules = window.CSSRootRules.replace(regex, '');

  // Rebuild :root rule
  let rule = `:root{\n${window.CSSRootRules}}`;
  for (let i = 0; i < window.Rules.cssRules.length; i++) {
    if (window.Rules.cssRules[i].selectorText === ":root") {
      window.Rules.deleteRule(i);
      break;
    }
  }

  window.Rules.insertRule(rule, window.Rules.cssRules.length);
  console.log(`Successfully deleted '${variable}'`);
};
console.log(`Paint is Running...`);