Object.assign(window, { css, rule, styled: { new: css, rule: rule } }); const cssmap = {}; function scopify_css(uid, css) { const virtualDoc = document.implementation.createHTMLDocument(""); const virtualStyleElement = document.createElement("style"); virtualDoc.body.appendChild(virtualStyleElement); let cssParsed = ""; virtualStyleElement.textContent = css; //@ts-ignore for (const rule of virtualStyleElement.sheet.cssRules) { rule.selectorText = rule.selectorText.includes("self") ? `.${uid}.self${rule.selectorText.replace("self", "")}` : `.${uid} ${rule.selectorText}`; cssParsed += `${rule.cssText}\n`; } return cssParsed; } function tagcss(strings, values, isblock) { let cached = cssmap[strings[0]]; let cachable = strings.length == 1; if (cachable && cached) return cached; const uid = `dl${Array(5) .fill(0) .map(() => { return Math.floor(Math.random() * 36).toString(36); }) .join("")}`; const styleElement = document.createElement("style"); document.head.appendChild(styleElement); const flattened_template = []; for (const i in strings) { flattened_template.push(strings[i]); if (values[i]) { const prop = values[i]; if (isDLPtr(prop)) { const current_i = flattened_template.length; let oldparsed; handle(prop, (val) => { flattened_template[current_i] = String(val); let parsed = flattened_template.join(""); if (parsed != oldparsed) if (isblock) styleElement.textContent = scopify_css( uid, parsed, ); else styleElement.textContent = `.${uid} { ${parsed}; }` oldparsed = parsed; }); } else { flattened_template.push(String(prop)); } } } if (isblock) { styleElement.textContent = scopify_css( uid, flattened_template.join(""), ); } else { styleElement.textContent = `.${uid} { ${flattened_template.join("")}; }` } if (cachable) cssmap[strings[0]] = uid; return uid; } export function rule(strings, ...values) { return tagcss(strings, values, false) } export function css(strings, ...values) { return tagcss(strings, values, true); }