@unicom-cloud/utils 0.1.4 → 0.1.10

package/snapdom/src/api/snapdom.js

@@ -1,91 +1,91 @@
 import { captureDOM as v } from "../core/capture.js";
 import { isSafari as R } from "../utils/helpers.js";
-async function I(a, { dpr: t = 1, scale: n = 1 }) {
-  const e = new Image();
-  return e.src = a, await e.decode(), R ? (e.width = e.width * n, e.height = e.height * n) : (e.width = e.width / n, e.height = e.height / n), e;
+async function x(e, { dpr: t = 1, scale: c = 1 }) {
+  const a = new Image();
+  return a.src = e, await a.decode(), R ? (a.width = a.width * c, a.height = a.height * c) : (a.width = a.width / c, a.height = a.height / c), a;
 }
-async function h(a, { dpr: t = 1, scale: n = 1 }) {
-  const e = new Image();
-  e.src = a, await e.decode();
-  const c = document.createElement("canvas"), o = e.width * n * t, g = e.height * n * t;
-  c.width = Math.ceil(o), c.height = Math.ceil(g);
-  const s = c.getContext("2d");
-  return s.scale(n * t, n * t), s.drawImage(e, 0, 0), c;
+async function p(e, { dpr: t = 1, scale: c = 1 } = {}) {
+  const a = new Image();
+  a.src = e, await a.decode();
+  const n = document.createElement("canvas"), o = a.width * c, g = a.height * c;
+  n.width = Math.ceil(o * t), n.height = Math.ceil(g * t);
+  const s = n.getContext("2d");
+  return s.scale(t, t), s.drawImage(a, 0, 0, o, g), n.style.width = `${o}px`, n.style.height = `${g}px`, n;
 }
-async function p(a) {
-  const t = decodeURIComponent(a.split(",")[1]);
+async function u(e) {
+  const t = decodeURIComponent(e.split(",")[1]);
   return new Blob([t], { type: "image/svg+xml" });
 }
-async function m(a, { dpr: t = 1, scale: n = 1 }, e) {
-  const c = await h(a, { dpr: t, scale: n });
-  if (!e) return c;
+async function l(e, { dpr: t = 1, scale: c = 1 }, a) {
+  const n = await p(e, { dpr: t, scale: c });
+  if (!a) return n;
   const o = document.createElement("canvas");
-  o.width = c.width, o.height = c.height;
+  o.width = n.width, o.height = n.height;
   const g = o.getContext("2d");
-  return g.fillStyle = e, g.fillRect(0, 0, o.width, o.height), g.drawImage(c, 0, 0), o;
+  return g.fillStyle = a, g.fillRect(0, 0, o.width, o.height), g.drawImage(n, 0, 0), o;
 }
-async function d(a, { dpr: t = 1, scale: n = 1, backgroundColor: e = "#fff", quality: c }, o = "png") {
-  const g = await m(a, { dpr: t, scale: n }, e), s = new Image();
-  return s.src = g.toDataURL(`image/${o}`, c), await s.decode(), s.style.width = `${g.width / t}px`, s.style.height = `${g.height / t}px`, s;
+async function d(e, { dpr: t = 1, scale: c = 1, backgroundColor: a = "#fff", quality: n }, o = "png") {
+  const g = await l(e, { dpr: t, scale: c }, a), s = new Image();
+  return s.src = g.toDataURL(`image/${o}`, n), await s.decode(), s.style.width = `${g.width / t}px`, s.style.height = `${g.height / t}px`, s;
 }
-async function j(a, {
+async function I(e, {
   dpr: t = 1,
-  scale: n = 1,
-  backgroundColor: e = "#fff",
-  format: c = "png",
+  scale: c = 1,
+  backgroundColor: a = "#fff",
+  format: n = "png",
   filename: o = "capture"
 } = {}) {
-  if (c === "svg") {
-    const b = await p(a), u = URL.createObjectURL(b), w = document.createElement("a");
-    w.href = u, w.download = `${o}.svg`, w.click(), URL.revokeObjectURL(u);
+  if (n === "svg") {
+    const b = await u(e), h = URL.createObjectURL(b), w = document.createElement("a");
+    w.href = h, w.download = `${o}.svg`, w.click(), URL.revokeObjectURL(h);
     return;
   }
-  const g = ["jpg", "jpeg", "webp"].includes(c) ? "#fff" : void 0, l = await m(a, { dpr: t, scale: n }, e ?? g), f = {
+  const g = ["jpg", "jpeg", "webp"].includes(n) ? "#fff" : void 0, m = await l(e, { dpr: t, scale: c }, a ?? g), f = {
     jpg: "image/jpeg",
     jpeg: "image/jpeg",
     png: "image/png",
     webp: "image/webp"
-  }[c] || "image/png", y = l.toDataURL(f), r = document.createElement("a");
-  r.href = y, r.download = `${o}.${c}`, r.click();
+  }[n] || "image/png", y = m.toDataURL(f), r = document.createElement("a");
+  r.href = y, r.download = `${o}.${n}`, r.click();
 }
-async function i(a, t = {}) {
-  if (t = { scale: 1, ...t }, !a) throw new Error("Element cannot be null or undefined");
-  return await i.capture(a, t);
+async function i(e, t = {}) {
+  if (t = { scale: 1, ...t }, !e) throw new Error("Element cannot be null or undefined");
+  return await i.capture(e, t);
 }
-i.capture = async (a, t = {}) => {
-  const n = await v(a, t), e = window.devicePixelRatio || 1, c = t.scale || 1;
+i.capture = async (e, t = {}) => {
+  const c = await v(e, t), a = window.devicePixelRatio || 1, n = t.scale || 1;
   return {
-    url: n,
+    url: c,
     options: t,
-    toRaw: () => n,
-    toImg: () => I(n, { dpr: e, scale: c }),
-    toCanvas: () => h(n, { dpr: e, scale: c }),
-    toBlob: () => p(n),
-    toPng: (o) => d(n, { dpr: e, scale: c, ...o }, "png"),
-    toJpg: (o) => d(n, { dpr: e, scale: c, ...o }, "jpeg"),
-    toWebp: (o) => d(n, { dpr: e, scale: c, ...o }, "webp"),
+    toRaw: () => c,
+    toImg: () => x(c, { dpr: a, scale: n }),
+    toCanvas: () => p(c, { dpr: a, scale: n }),
+    toBlob: () => u(c),
+    toPng: (o) => d(c, { dpr: a, scale: n, ...o }, "png"),
+    toJpg: (o) => d(c, { dpr: a, scale: n, ...o }, "jpeg"),
+    toWebp: (o) => d(c, { dpr: a, scale: n, ...o }, "webp"),
     download: ({
       format: o = "png",
       filename: g = "capture",
       backgroundColor: s
-    } = {}) => j(n, { dpr: e, scale: c, backgroundColor: s, format: o, filename: g })
+    } = {}) => I(c, { dpr: a, scale: n, backgroundColor: s, format: o, filename: g })
   };
 };
-i.toRaw = async (a, t) => (await i.capture(a, t)).toRaw();
-i.toImg = async (a, t) => (await i.capture(a, t)).toImg();
-i.toCanvas = async (a, t) => (await i.capture(a, t)).toCanvas();
-i.toBlob = async (a, t) => (await i.capture(a, t)).toBlob();
-i.toPng = async (a, t) => (await i.capture(a, t)).toPng(t);
-i.toJpg = async (a, t) => (await i.capture(a, t)).toJpg(t);
-i.toWebp = async (a, t) => (await i.capture(a, t)).toWebp(t);
-i.download = async (a, t = {}) => {
+i.toRaw = async (e, t) => (await i.capture(e, t)).toRaw();
+i.toImg = async (e, t) => (await i.capture(e, t)).toImg();
+i.toCanvas = async (e, t) => (await i.capture(e, t)).toCanvas();
+i.toBlob = async (e, t) => (await i.capture(e, t)).toBlob();
+i.toPng = async (e, t) => (await i.capture(e, t)).toPng(t);
+i.toJpg = async (e, t) => (await i.capture(e, t)).toJpg(t);
+i.toWebp = async (e, t) => (await i.capture(e, t)).toWebp(t);
+i.download = async (e, t = {}) => {
   const {
-    format: n = "png",
-    filename: e = "capture",
-    backgroundColor: c,
+    format: c = "png",
+    filename: a = "capture",
+    backgroundColor: n,
     ...o
   } = t;
-  return await (await i.capture(a, o)).download({ format: n, filename: e, backgroundColor: c });
+  return await (await i.capture(e, o)).download({ format: c, filename: a, backgroundColor: n });
 };
 export {
   i as snapdom

package/snapdom/src/core/cache.js

@@ -1,9 +1,10 @@
-const e = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new WeakMap();
+const e = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new Set();
 export {
   t as baseCSSCache,
   a as bgCache,
-  o as computedStyleCache,
+  s as computedStyleCache,
   n as defaultStylesCache,
   e as imageCache,
+  o as processedFontURLs,
   c as resourceCache
 };

package/snapdom/src/core/capture.js

@@ -1,73 +1,84 @@
-import { inlineBackgroundImages as $ } from "../modules/background.js";
-import { embedCustomFonts as B } from "../modules/fonts.js";
-import { inlineImages as E } from "../modules/images.js";
-import { collectUsedTagNames as F, generateDedupedBaseCSS as I } from "../utils/cssTools.js";
-import { idle as i, isSafari as P } from "../utils/helpers.js";
-import { baseCSSCache as g } from "./cache.js";
-import { prepareClone as z } from "./prepare.js";
-async function L(a, y = {}) {
-  if (!a) throw new Error("Element cannot be null or undefined");
+import { baseCSSCache as S } from "./cache.js";
+import { inlineBackgroundImages as P } from "../modules/background.js";
+import { embedCustomFonts as z } from "../modules/fonts.js";
+import { inlineImages as H } from "../modules/images.js";
+import { collectUsedTagNames as A, generateDedupedBaseCSS as D } from "../utils/cssTools.js";
+import { idle as l, isSafari as R } from "../utils/helpers.js";
+import { prepareClone as U } from "./prepare.js";
+async function Q(r, n = {}) {
+  if (!r) throw new Error("Element cannot be null or undefined");
+  if (!(r instanceof Element))
+    throw new Error("captureDOM: Only Element nodes are supported");
   const {
-    compress: w = !0,
-    embedFonts: l = !1,
-    fast: s = !0,
-    scale: d = 1
-  } = y;
-  let t, f, p, h = "", r = "", u, S;
-  if ({ clone: t, classCSS: f, styleCache: p } = await z(
-    a,
-    w,
-    l
-  ), await new Promise((e) => {
-    i(
+    compress: b = !0,
+    embedFonts: h = !1,
+    fast: o = !0,
+    scale: f = 1
+  } = n;
+  let t, y, v, C = "", m = "", $, x;
+  if ({ clone: t, classCSS: y, styleCache: v } = await U(
+    r,
+    b,
+    h
+  ), await new Promise((s) => {
+    l(
       async () => {
-        await E(t), e();
+        await H(t, n), s();
       },
-      { fast: s }
+      { fast: o }
     );
-  }), await new Promise((e) => {
-    i(
+  }), await new Promise((s) => {
+    l(
       async () => {
-        await $(a, t, p), e();
+        await P(r, t, v, n), s();
       },
-      { fast: s }
+      { fast: o }
     );
-  }), l && await new Promise((e) => {
-    i(
+  }), h && await new Promise((s) => {
+    l(
       async () => {
-        h = await B({ ignoreIconFonts: !l }), e();
+        C = await z({ ignoreIconFonts: !h }), s();
       },
-      { fast: s }
+      { fast: o }
     );
-  }), w) {
-    const e = F(t).sort(), o = e.join(",");
-    g.has(o) ? r = g.get(o) : await new Promise((c) => {
-      i(
+  }), b) {
+    const s = A(t).sort(), i = s.join(",");
+    S.has(i) ? m = S.get(i) : await new Promise((e) => {
+      l(
         () => {
-          r = I(e), g.set(o, r), c();
+          m = D(s), S.set(i, m), e();
         },
-        { fast: s }
+        { fast: o }
       );
     });
   }
-  await new Promise((e) => {
-    i(
+  await new Promise((s) => {
+    l(
       () => {
-        const o = a.getBoundingClientRect(), c = Math.ceil(o.width), v = Math.ceil(o.height);
-        t.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), t.style.transformOrigin = "top left", d !== 1 && P() && (t.style.scale = `${d}`);
-        const C = "http://www.w3.org/2000/svg", n = document.createElementNS(C, "foreignObject");
-        n.setAttribute("width", "100%"), n.setAttribute("height", "100%");
-        const b = document.createElement("style");
-        b.textContent = r + h + "svg{overflow:visible;}" + f, n.appendChild(b), n.appendChild(t);
-        const x = new XMLSerializer().serializeToString(n);
-        S = `<svg xmlns="${C}" width="${c}" height="${v}" viewBox="0 0 ${c} ${v}">` + x + "</svg>", u = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(S)}`, e();
+        const i = r.getBoundingClientRect();
+        let e = i.width, a = i.height;
+        const d = Number.isFinite(n.width), u = Number.isFinite(n.height), p = typeof f == "number" && f !== 1;
+        if (!p) {
+          const g = i.width / i.height;
+          d && u ? (e = n.width, a = n.height) : d ? (e = n.width, a = e / g) : u && (a = n.height, e = a * g);
+        }
+        if (e = Math.ceil(e), a = Math.ceil(a), t.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), t.style.transformOrigin = "top left", !p && (d || u)) {
+          const g = i.width, B = i.height, I = e / g, M = a / B, N = t.style.transform || "", O = `scale(${I}, ${M})`;
+          t.style.transform = `${O} ${N}`.trim();
+        } else p && R() && (t.style.scale = `${f}`);
+        const E = "http://www.w3.org/2000/svg", c = document.createElementNS(E, "foreignObject");
+        c.setAttribute("width", "100%"), c.setAttribute("height", "100%");
+        const F = document.createElement("style");
+        F.textContent = m + C + "svg{overflow:visible;}" + y, c.appendChild(F), c.appendChild(t);
+        const T = new XMLSerializer().serializeToString(c);
+        x = `<svg xmlns="${E}" width="${e}" height="${a}" viewBox="0 0 ${e} ${a}">` + T + "</svg>", $ = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(x)}`, s();
       },
-      { fast: s }
+      { fast: o }
     );
   });
-  const m = document.getElementById("snapdom-sandbox");
-  return m && m.style.position === "absolute" && m.remove(), u;
+  const w = document.getElementById("snapdom-sandbox");
+  return w && w.style.position === "absolute" && w.remove(), $;
 }
 export {
-  L as captureDOM
+  Q as captureDOM
 };

package/snapdom/src/core/clone.js

@@ -1,49 +1,50 @@
-import { inlineAllStyles as h } from "../modules/styles.js";
-function f(t, a, l, c, o) {
-  var s;
-  if (t.nodeType === Node.ELEMENT_NODE && t.getAttribute("data-capture") === "exclude") {
-    const i = document.createElement("div"), e = t.getBoundingClientRect();
-    return i.style.cssText = `display: inline-block; width: ${e.width}px; height: ${e.height}px; visibility: hidden;`, i;
+import { inlineAllStyles as o } from "../modules/styles.js";
+function f(e, c, r, n, s) {
+  if (e.nodeType === Node.ELEMENT_NODE && e.getAttribute("data-capture") === "exclude") {
+    const t = document.createElement("div"), i = e.getBoundingClientRect();
+    return t.style.cssText = `display: inline-block; width: ${i.width}px; height: ${i.height}px; visibility: hidden;`, t;
   }
-  if (t.tagName === "IFRAME") {
-    const i = document.createElement("div");
-    return i.textContent = "", i.style.cssText = `width: ${t.offsetWidth}px; height: ${t.offsetHeight}px; background: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`, i;
+  if (e.tagName === "IFRAME") {
+    const t = document.createElement("div");
+    return t.textContent = "", t.style.cssText = `width: ${e.offsetWidth}px; height: ${e.offsetHeight}px; background-image: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`, t;
   }
-  if (t.nodeType === Node.ELEMENT_NODE && t.getAttribute("data-capture") === "placeholder") {
-    const i = t.cloneNode(!1);
-    c.set(i, t), h(t, i, a, l, o);
-    const e = document.createElement("div");
-    return e.textContent = t.getAttribute("data-placeholder-text") || "", e.style.cssText = "color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;", i.appendChild(e), i;
+  if (e.nodeType === Node.ELEMENT_NODE && e.getAttribute("data-capture") === "placeholder") {
+    const t = e.cloneNode(!1);
+    n.set(t, e), o(e, t, c, r, s);
+    const i = document.createElement("div");
+    return i.textContent = e.getAttribute("data-placeholder-text") || "", i.style.cssText = "color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;", t.appendChild(i), t;
   }
-  if (t.tagName === "CANVAS") {
-    const i = t.toDataURL(), e = document.createElement("img");
-    return e.src = i, e.width = t.width, e.height = t.height, e.style.display = "inline-block", e.style.width = `${t.width}px`, e.style.height = `${t.height}px`, e;
+  if (e.tagName === "CANVAS") {
+    const t = e.toDataURL(), i = document.createElement("img");
+    return i.src = t, i.width = e.width, i.height = e.height, i.style.display = "inline-block", i.style.width = e.style.width || `${e.width}px`, i.style.height = e.style.height || `${e.height}px`, i;
   }
-  if (t.nodeType === Node.TEXT_NODE) {
-    if ((s = t.parentElement) != null && s.shadowRoot) {
-      const i = t.parentElement.tagName.toLowerCase();
-      if (customElements.get(i)) return null;
+  if (e.nodeType === Node.TEXT_NODE) {
+    if (e.parentElement?.shadowRoot) {
+      const t = e.parentElement.tagName.toLowerCase();
+      if (customElements.get(t)) return null;
     }
-    return t.cloneNode(!0);
+    return e.cloneNode(!0);
   }
-  if (t.nodeType !== Node.ELEMENT_NODE) return t.cloneNode(!0);
-  const r = t.cloneNode(!1);
-  c.set(r, t), h(t, r, a, l, o);
-  const d = document.createDocumentFragment();
-  if (t.childNodes.forEach((i) => {
-    const e = f(
-      i,
-      a,
-      l,
+  if (e.nodeType !== Node.ELEMENT_NODE) return e.cloneNode(!0);
+  const l = e.cloneNode(!1);
+  n.set(l, e), e instanceof HTMLInputElement ? (l.value = e.value, l.setAttribute("value", e.value), e.checked !== void 0 && (l.checked = e.checked, e.checked && l.setAttribute("checked", ""))) : e instanceof HTMLTextAreaElement ? (l.value = e.value, l.textContent = e.value) : e instanceof HTMLSelectElement && (l.value = e.value, Array.from(l.options).forEach((t) => {
+    t.value === e.value ? t.setAttribute("selected", "") : t.removeAttribute("selected");
+  })), o(e, l, c, r, s);
+  const h = document.createDocumentFragment();
+  if (e.childNodes.forEach((t) => {
+    const i = f(
+      t,
       c,
-      o
+      r,
+      n,
+      s
     );
-    e && d.appendChild(e);
-  }), r.appendChild(d), t.shadowRoot) {
-    const i = Array.from(t.shadowRoot.children).filter((n) => n.tagName !== "STYLE").map((n) => f(n, a, l, c)).filter(Boolean), e = document.createDocumentFragment();
-    i.forEach((n) => e.appendChild(n)), r.appendChild(e);
+    i && h.appendChild(i);
+  }), l.appendChild(h), e.shadowRoot) {
+    const t = Array.from(e.shadowRoot.children).filter((a) => a.tagName !== "STYLE").map((a) => f(a, c, r, n)).filter(Boolean), i = document.createDocumentFragment();
+    t.forEach((a) => i.appendChild(a)), l.appendChild(i);
   }
-  return r;
+  return l;
 }
 export {
   f as deepClone

package/snapdom/src/core/prepare.js

@@ -1,53 +1,59 @@
-import { inlinePseudoElements as h } from "../modules/pseudo.js";
+import { inlinePseudoElements as m } from "../modules/pseudo.js";
 import { generateCSSClasses as g } from "../utils/cssTools.js";
-import { deepClone as C } from "./clone.js";
-async function b(f, r = !1, m = !1) {
-  var p;
-  const l = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new Map();
-  let c;
+import { stripTranslate as u } from "../utils/helpers.js";
+import { deepClone as h } from "./clone.js";
+async function k(s, f = !1, p = !1) {
+  const a = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new Map();
+  let t;
   try {
-    c = C(f, l, i, d, r);
+    t = h(s, a, r, y, f);
   } catch (e) {
     throw console.warn("deepClone failed:", e), e;
   }
   try {
-    await h(
-      f,
-      c,
-      l,
-      i,
+    await m(
+      s,
+      t,
+      a,
       r,
-      m
+      f,
+      p
     );
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
-  let y = "";
-  if (r) {
-    const e = g(l);
-    y = Array.from(e.entries()).map(([t, n]) => `.${n}{${t}}`).join("");
-    for (const [t, n] of l.entries()) {
-      if (t.tagName === "STYLE") continue;
-      const s = e.get(n);
-      s && t.classList.add(s);
-      const a = (p = t.style) == null ? void 0 : p.backgroundImage;
-      t.removeAttribute("style"), a && a !== "none" && (t.style.backgroundImage = a);
+  let d = "";
+  if (f) {
+    const e = g(a);
+    d = Array.from(e.entries()).map(([o, n]) => `.${n}{${o}}`).join("");
+    for (const [o, n] of a.entries()) {
+      if (o.tagName === "STYLE") continue;
+      const i = e.get(n);
+      i && o.classList.add(i);
+      const c = o.style?.backgroundImage;
+      o.removeAttribute("style"), c && c !== "none" && (o.style.backgroundImage = c);
     }
   } else
-    for (const [e, t] of l.entries())
-      e.tagName !== "STYLE" && e.setAttribute("style", t.replace(/;/g, "; "));
-  for (const [e, t] of d.entries()) {
-    const n = t.scrollLeft, s = t.scrollTop;
-    if ((n || s) && e instanceof HTMLElement) {
+    for (const [e, o] of a.entries())
+      e.tagName !== "STYLE" && e.setAttribute("style", o.replace(/;/g, "; "));
+  for (const [e, o] of y.entries()) {
+    const n = o.scrollLeft, i = o.scrollTop;
+    if ((n || i) && e instanceof HTMLElement) {
       e.style.overflow = "hidden", e.style.scrollbarWidth = "none", e.style.msOverflowStyle = "none";
-      const o = document.createElement("div");
-      for (o.style.transform = `translate(${-n}px, ${-s}px)`, o.style.willChange = "transform", o.style.display = "inline-block", o.style.width = "100%"; e.firstChild; )
-        o.appendChild(e.firstChild);
-      e.appendChild(o);
+      const l = document.createElement("div");
+      for (l.style.transform = `translate(${-n}px, ${-i}px)`, l.style.willChange = "transform", l.style.display = "inline-block", l.style.width = "100%"; e.firstChild; )
+        l.appendChild(e.firstChild);
+      e.appendChild(l);
     }
   }
-  return { clone: c, classCSS: y, styleCache: i };
+  if (s === y.get(t)) {
+    const e = r.get(s) || window.getComputedStyle(s);
+    r.set(s, e);
+    const o = u(e.transform);
+    t.style.margin = "0", t.style.position = "static", t.style.top = "auto", t.style.left = "auto", t.style.right = "auto", t.style.bottom = "auto", t.style.zIndex = "auto", t.style.float = "none", t.style.clear = "none", t.style.transform = o || "";
+  }
+  return { clone: t, classCSS: d, styleCache: r };
 }
 export {
-  b as prepareClone
+  k as prepareClone
 };

package/snapdom/src/modules/background.js

@@ -1,27 +1,25 @@
-import { bgCache as a } from "../core/cache.js";
-import { getStyle as f, fetchImage as m } from "../utils/helpers.js";
-async function p(u, d, o) {
-  const c = [[u, d]];
-  for (; c.length; ) {
-    const [t, l] = c.shift(), i = o.get(t) || f(t);
-    o.has(t) || o.set(t, i);
-    const s = i.getPropertyValue("background-image");
-    if (s && s.includes("url(")) {
-      const e = s.match(/url\(["']?([^"')]+)["']?\)/);
-      if (e != null && e[1])
-        try {
-          const n = e[1];
-          let r;
-          a.has(n) ? r = a.get(n) : (r = await m(n), a.set(n, r)), l.style.backgroundImage = `url(${r})`;
-        } catch {
-          l.style.backgroundImage = "none";
-        }
+import { getStyle as b, splitBackgroundImage as p, inlineSingleBackgroundEntry as k } from "../utils/helpers.js";
+async function B(u, m, l, f = {}) {
+  const r = [[u, m]];
+  for (; r.length; ) {
+    const [e, o] = r.shift(), s = l.get(e) || b(e);
+    l.has(e) || l.set(e, s);
+    const c = s.getPropertyValue("background-image"), t = s.getPropertyValue("background-color");
+    if (!c || c === "none") {
+      const n = Array.from(e.children), h = Array.from(o.children);
+      for (let i = 0; i < Math.min(n.length, h.length); i++)
+        r.push([n[i], h[i]]);
+      continue;
     }
-    const g = Array.from(t.children), h = Array.from(l.children);
-    for (let e = 0; e < Math.min(g.length, h.length); e++)
-      c.push([g[e], h[e]]);
+    const y = p(c), a = await Promise.all(
+      y.map((n) => k(n, f))
+    );
+    a.some((n) => n && n !== "none" && !/^url\(undefined\)/.test(n)) && (o.style.backgroundImage = a.join(", ")), t && t !== "transparent" && t !== "rgba(0, 0, 0, 0)" && (o.style.backgroundColor = t);
+    const g = Array.from(e.children), d = Array.from(o.children);
+    for (let n = 0; n < Math.min(g.length, d.length); n++)
+      r.push([g[n], d[n]]);
   }
 }
 export {
-  p as inlineBackgroundImages
+  B as inlineBackgroundImages
 };