objtocss

objtocss.js

const o2s = (o, className) => {
  let elm = new Option();
  Object.keys(o).forEach(a => (elm.style)[a] = o[a]);
  return `.${className}{\n${elm.getAttribute("style")}\n}`;
}

const obj = {
 visibility: "visible",
 position: "fixed",
 background: "transparent",
 border: "0",
 textAlign: "center"
};

console.log(o2s(obj, 'menu'));

use.js

const  o2s = (o, className) => {
  let elm = new Option();
  Object.keys(o).forEach(a => (elm.style)[a] = o[a]);
  return `.${className}{\n${elm.getAttribute("style")}\n}`;
}

class CSSMiniEngine {
  _classes = [];
  addClass = (o, className) => {
    this._classes.push(o2s(o, className));
  };
  compile = () => {
    const head = document.head || document.getElementsByTagName("head")[0];
    const style = document.createElement("style");
    head.appendChild(style);
    style.type = "text/css";
    style.appendChild(document.createTextNode(this._classes.join("\n")));
  }
}

const cssEngine = new  CSSMiniEngine();

const className = "MyClass";

cssEngine.addClass(
      {
        visibility: "visible",
        position: "fixed",
        color: "red",
        background: "transparent",
        border: "1",
        textAlign: "center",
      },
      className
);
cssEngine.compile()