クライアントサイドで簡易 css in js

cssin.js

const styleElement = document.createElement("style");
document.head.append(styleElement);

const classes = {};
let lastIds = 0n;

export const css = (src, ...values) => src.map((x, i) => x + (i < values.length ? CSS.escape("" + values[i]) : "")).join("");

export const style = (name, code) => {
    const cls = classes[name] = CSS.escape(`--cssinjs-${lastIds++}`);
    styleElement.innerHTML += `.${cls}{${code}}`
    return cls;
}