@unicom-cloud/utils 0.1.16 → 0.1.18

package/snapdom/src/modules/fonts.js

@@ -1,147 +1,174 @@
-import { cache as n } from "../core/cache.js";
-import { isIconFont as h } from "./iconFonts.js";
-import { extractURL as U } from "../utils/helpers.js";
-async function E(m, i, l, y = 32, u = "#000") {
-  i = i.replace(/^['"]+|['"]+$/g, "");
-  const t = window.devicePixelRatio || 1;
+import { cache as o } from "../core/cache.js";
+import { isIconFont as $ } from "./iconFonts.js";
+import { fetchResource as A, extractURL as v } from "../utils/helpers.js";
+async function H(h, d, c, y = 32, C = "#000") {
+  d = d.replace(/^['"]+|['"]+$/g, "");
+  const p = window.devicePixelRatio || 1;
   await document.fonts.ready;
-  const e = document.createElement("span");
-  e.textContent = m, e.style.position = "absolute", e.style.visibility = "hidden", e.style.fontFamily = `"${i}"`, e.style.fontWeight = l || "normal", e.style.fontSize = `${y}px`, e.style.lineHeight = "1", e.style.whiteSpace = "nowrap", e.style.padding = "0", e.style.margin = "0", document.body.appendChild(e);
-  const r = e.getBoundingClientRect(), d = Math.ceil(r.width), f = Math.ceil(r.height);
-  document.body.removeChild(e);
-  const c = document.createElement("canvas");
-  c.width = d * t, c.height = f * t;
-  const s = c.getContext("2d");
-  return s.scale(t, t), s.font = l ? `${l} ${y}px "${i}"` : `${y}px "${i}"`, s.textAlign = "left", s.textBaseline = "top", s.fillStyle = u, s.fillText(m, 0, 0), {
-    dataUrl: c.toDataURL(),
-    width: d,
-    height: f
+  const i = document.createElement("span");
+  i.textContent = h, i.style.position = "absolute", i.style.visibility = "hidden", i.style.fontFamily = `"${d}"`, i.style.fontWeight = c || "normal", i.style.fontSize = `${y}px`, i.style.lineHeight = "1", i.style.whiteSpace = "nowrap", i.style.padding = "0", i.style.margin = "0", document.body.appendChild(i);
+  const m = i.getBoundingClientRect(), t = Math.ceil(m.width), n = Math.ceil(m.height);
+  document.body.removeChild(i);
+  const e = document.createElement("canvas");
+  e.width = t * p, e.height = n * p;
+  const a = e.getContext("2d");
+  return a.scale(p, p), a.font = c ? `${c} ${y}px "${d}"` : `${y}px "${d}"`, a.textAlign = "left", a.textBaseline = "top", a.fillStyle = C, a.fillText(h, 0, 0), {
+    dataUrl: e.toDataURL(),
+    width: t,
+    height: n
   };
 }
-function x(m) {
-  return Array.from(document.styleSheets).some((i) => i.href === m);
+function T(h) {
+  return Array.from(document.styleSheets).some((d) => d.href === h);
 }
-function L(m) {
-  return new Promise((i) => {
-    if (x(m)) return i(null);
-    const l = document.createElement("link");
-    l.rel = "stylesheet", l.href = m, l.setAttribute("data-snapdom", "injected-import"), l.onload = () => i(l), l.onerror = () => i(null), document.head.appendChild(l);
+function I(h) {
+  return new Promise((d) => {
+    if (T(h)) return d(null);
+    const c = document.createElement("link");
+    c.rel = "stylesheet", c.href = h, c.setAttribute("data-snapdom", "injected-import"), c.onload = () => d(c), c.onerror = () => d(null), document.head.appendChild(c);
   });
 }
-async function k({ preCached: m = !1 } = {}) {
-  if (n.resource.has("fonts-embed-css")) {
-    if (m) {
+async function N({
+  preCached: h = !1,
+  localFonts: d = [],
+  useProxy: c = ""
+} = {}) {
+  if (o.resource.has("fonts-embed-css")) {
+    if (h) {
       const t = document.createElement("style");
-      t.setAttribute("data-snapdom", "embedFonts"), t.textContent = n.resource.get("fonts-embed-css"), document.head.appendChild(t);
+      t.setAttribute("data-snapdom", "embedFonts"), t.textContent = o.resource.get("fonts-embed-css"), document.head.appendChild(t);
     }
-    return n.resource.get("fonts-embed-css");
+    return o.resource.get("fonts-embed-css");
   }
-  const i = /@import\s+url\(["']?([^"')]+)["']?\)/g, l = [];
+  const y = /* @__PURE__ */ new Set();
+  try {
+    for (const t of document.fonts)
+      t.status === "loaded" && y.add(
+        `${t.family}__${t.weight || "normal"}__${t.style || "normal"}`
+      );
+  } catch {
+  }
+  const C = /@import\s+url\(["']?([^"')]+)["']?\)/g, p = [];
   for (const t of document.querySelectorAll("style")) {
-    const e = t.textContent || "", r = Array.from(e.matchAll(i));
-    for (const d of r) {
-      const f = d[1];
-      h(f) || x(f) || l.push(f);
+    const n = t.textContent || "", e = Array.from(n.matchAll(C));
+    for (const a of e) {
+      const r = a[1];
+      $(r) || T(r) || p.push(r);
     }
   }
-  await Promise.all(l.map(L));
-  const y = Array.from(
+  await Promise.all(p.map(I));
+  const i = Array.from(
     document.querySelectorAll('link[rel="stylesheet"]')
   ).filter((t) => t.href);
-  let u = "";
-  for (const t of y)
+  let m = "";
+  for (const t of i)
     try {
-      const r = await (await fetch(t.href)).text();
-      if (h(t.href) || h(r)) continue;
-      const d = /url\((["']?)([^"')]+)\1\)/g, f = await Promise.all(
-        Array.from(r.matchAll(d)).map(async (s) => {
-          let b = U(s[0]);
-          if (!b) return null;
-          let o = b;
-          if (!o.startsWith("http") && !o.startsWith("data:") && (o = new URL(o, t.href).href), h(o)) return null;
-          if (n.resource.has(o))
-            return n.font.add(o), {
-              original: s[0],
-              inlined: `url(${n.resource.get(o)})`
-            };
-          if (n.font.has(o)) return null;
-          try {
-            const p = await (await fetch(o)).blob(), w = await new Promise((a) => {
-              const g = new FileReader();
-              g.onload = () => a(g.result), g.readAsDataURL(p);
-            });
-            return n.resource.set(o, w), n.font.add(o), { original: s[0], inlined: `url(${w})` };
-          } catch {
-            return console.warn("[snapdom] Failed to fetch font resource:", o), null;
+      const e = await (await A(t.href, { useProxy: c })).text();
+      if ($(t.href) || $(e)) continue;
+      const a = /@font-face[^{}]*{[^}]*}/g;
+      let r = e;
+      for (const s of e.match(a) || []) {
+        const b = s.match(/font-family:\s*([^;]+);/i);
+        if (!b) continue;
+        const R = b[1].replace(/['"]/g, "").trim(), S = s.match(/font-weight:\s*([^;]+);/i), u = s.match(/font-style:\s*([^;]+);/i), F = S ? S[1].trim() : "normal", w = u ? u[1].trim() : "normal", k = `${R}__${F}__${w}`, x = /url\((["']?)([^"')]+)\1\)/g, L = /url\(/i.test(s), f = /local\(/i.test(s);
+        if (!L && f)
+          continue;
+        if (!y.has(k)) {
+          r = r.replace(s, "");
+          continue;
+        }
+        let g = s;
+        const E = Array.from(s.matchAll(x));
+        for (const _ of E) {
+          let U = v(_[0]);
+          if (!U) continue;
+          let l = U;
+          if (!l.startsWith("http") && !l.startsWith("data:") && (l = new URL(l, t.href).href), !$(l)) {
+            if (o.resource.has(l)) {
+              o.font.add(l), g = g.replace(
+                _[0],
+                `url(${o.resource.get(l)})`
+              );
+              continue;
+            }
+            if (!o.font.has(l))
+              try {
+                const D = await (await A(l, { useProxy: c })).blob(), M = await new Promise((W) => {
+                  const P = new FileReader();
+                  P.onload = () => W(P.result), P.readAsDataURL(D);
+                });
+                o.resource.set(l, M), o.font.add(l), g = g.replace(_[0], `url(${M})`);
+              } catch {
+                console.warn("[snapdom] Failed to fetch font resource:", l);
+              }
           }
-        })
-      );
-      let c = r;
-      for (const s of f)
-        s && (c = c.replace(s.original, s.inlined));
-      u += c + `
+        }
+        r = r.replace(s, g);
+      }
+      m += r + `
 `;
     } catch {
       console.warn("[snapdom] Failed to fetch CSS:", t.href);
     }
   for (const t of document.styleSheets)
     try {
-      if (!t.href || y.every((e) => e.href !== t.href)) {
-        for (const e of t.cssRules)
-          if (e.type === CSSRule.FONT_FACE_RULE) {
-            const r = e.style.getPropertyValue("src"), d = e.style.getPropertyValue("font-family");
-            if (!r || h(d)) continue;
-            const f = /url\((["']?)([^"')]+)\1\)/g, c = /local\((["']?)[^)]+?\1\)/g, s = !!r.match(f), b = !!r.match(c);
-            if (!s && b) {
-              u += `@font-face{font-family:${d};src:${r};font-style:${e.style.getPropertyValue("font-style") || "normal"};font-weight:${e.style.getPropertyValue("font-weight") || "normal"};}`;
+      if (!t.href || i.every((n) => n.href !== t.href)) {
+        for (const n of t.cssRules)
+          if (n.type === CSSRule.FONT_FACE_RULE) {
+            const e = n.style.getPropertyValue("src"), a = n.style.getPropertyValue("font-family");
+            if (!e || $(a)) continue;
+            const r = n.style.getPropertyValue("font-weight") || "normal", s = n.style.getPropertyValue("font-style") || "normal", b = `${a}__${r}__${s}`, R = /url\((["']?)([^"')]+)\1\)/g, S = /local\((["']?)[^)]+?\1\)/g, u = !!e.match(R), F = !!e.match(S);
+            if (!u && F) {
+              m += `@font-face{font-family:${a};src:${e};font-style:${s};font-weight:${r};}`;
               continue;
             }
-            let o = r;
-            const S = Array.from(r.matchAll(f));
-            for (const p of S) {
-              let w = p[2].trim();
-              if (!w) continue;
-              let a = w;
-              if (!a.startsWith("http") && !a.startsWith("data:") && (a = new URL(a, t.href || location.href).href), !h(a)) {
-                if (n.resource.has(a)) {
-                  n.font.add(a), o = o.replace(
-                    p[0],
-                    `url(${n.resource.get(a)})`
+            if (!y.has(b)) continue;
+            let w = e;
+            const k = Array.from(e.matchAll(R));
+            for (const x of k) {
+              let L = x[2].trim();
+              if (!L) continue;
+              let f = L;
+              if (!f.startsWith("http") && !f.startsWith("data:") && (f = new URL(f, t.href || location.href).href), !$(f)) {
+                if (o.resource.has(f)) {
+                  o.font.add(f), w = w.replace(
+                    x[0],
+                    `url(${o.resource.get(f)})`
                   );
                   continue;
                 }
-                if (!n.font.has(a))
+                if (!o.font.has(f))
                   try {
-                    const A = await (await fetch(a)).blob(), R = await new Promise((C) => {
-                      const $ = new FileReader();
-                      $.onload = () => C($.result), $.readAsDataURL(A);
+                    const E = await (await A(f, { useProxy: c })).blob(), _ = await new Promise((U) => {
+                      const l = new FileReader();
+                      l.onload = () => U(l.result), l.readAsDataURL(E);
                     });
-                    n.resource.set(a, R), n.font.add(a), o = o.replace(p[0], `url(${R})`);
+                    o.resource.set(f, _), o.font.add(f), w = w.replace(x[0], `url(${_})`);
                   } catch {
-                    console.warn("[snapdom] Failed to fetch font URL:", a);
+                    console.warn("[snapdom] Failed to fetch font URL:", f);
                   }
               }
             }
-            u += `@font-face{font-family:${d};src:${o};font-style:${e.style.getPropertyValue("font-style") || "normal"};font-weight:${e.style.getPropertyValue("font-weight") || "normal"};}`;
+            m += `@font-face{font-family:${a};src:${w};font-style:${s};font-weight:${r};}`;
           }
       }
-    } catch (e) {
-      console.warn("[snapdom] Cannot access stylesheet", t.href, e);
+    } catch (n) {
+      console.warn("[snapdom] Cannot access stylesheet", t.href, n);
     }
   for (const t of document.fonts)
     if (t.family && t.status === "loaded" && t._snapdomSrc) {
-      if (h(t.family)) continue;
-      let e = t._snapdomSrc;
-      if (!e.startsWith("data:")) {
-        if (n.resource.has(t._snapdomSrc))
-          e = n.resource.get(t._snapdomSrc), n.font.add(t._snapdomSrc);
-        else if (!n.font.has(t._snapdomSrc))
+      if ($(t.family)) continue;
+      let n = t._snapdomSrc;
+      if (!n.startsWith("data:")) {
+        if (o.resource.has(t._snapdomSrc))
+          n = o.resource.get(t._snapdomSrc), o.font.add(t._snapdomSrc);
+        else if (!o.font.has(t._snapdomSrc))
           try {
-            const d = await (await fetch(t._snapdomSrc)).blob();
-            e = await new Promise((f) => {
-              const c = new FileReader();
-              c.onload = () => f(c.result), c.readAsDataURL(d);
-            }), n.resource.set(t._snapdomSrc, e), n.font.add(t._snapdomSrc);
+            const a = await (await A(t._snapdomSrc, { useProxy: c })).blob();
+            n = await new Promise((r) => {
+              const s = new FileReader();
+              s.onload = () => r(s.result), s.readAsDataURL(a);
+            }), o.resource.set(t._snapdomSrc, n), o.font.add(t._snapdomSrc);
           } catch {
             console.warn(
               "[snapdom] Failed to fetch dynamic font src:",
@@ -150,15 +177,35 @@ async function k({ preCached: m = !1 } = {}) {
             continue;
           }
       }
-      u += `@font-face{font-family:'${t.family}';src:url(${e});font-style:${t.style || "normal"};font-weight:${t.weight || "normal"};}`;
+      m += `@font-face{font-family:'${t.family}';src:url(${n});font-style:${t.style || "normal"};font-weight:${t.weight || "normal"};}`;
     }
-  if (u && (n.resource.set("fonts-embed-css", u), m)) {
+  for (const t of d) {
+    if (!t || typeof t != "object") continue;
+    const { family: n, src: e, weight: a = "normal", style: r = "normal" } = t;
+    if (!n || !e) continue;
+    let s = e;
+    if (s.startsWith("data:"))
+      o.resource.set(e, s), o.font.add(e);
+    else
+      try {
+        const R = await (await A(e, { useProxy: c })).blob();
+        s = await new Promise((S) => {
+          const u = new FileReader();
+          u.onload = () => S(u.result), u.readAsDataURL(R);
+        }), o.resource.set(e, s), o.font.add(e);
+      } catch {
+        console.warn("[snapdom] Failed to load local font:", e);
+        continue;
+      }
+    m += `@font-face{font-family:'${n}';src:url(${s});font-style:${r};font-weight:${a};}`;
+  }
+  if (m && (o.resource.set("fonts-embed-css", m), h)) {
     const t = document.createElement("style");
-    t.setAttribute("data-snapdom", "embedFonts"), t.textContent = u, document.head.appendChild(t);
+    t.setAttribute("data-snapdom", "embedFonts"), t.textContent = m, document.head.appendChild(t);
   }
-  return u;
+  return m;
 }
 export {
-  k as embedCustomFonts,
-  E as iconToImage
+  N as embedCustomFonts,
+  H as iconToImage
 };

package/snapdom/src/modules/images.js

@@ -1,20 +1,25 @@
-import { fetchImage as l } from "../utils/helpers.js";
-async function h(n, a = {}) {
-  const r = Array.from(n.querySelectorAll("img")), i = async (t) => {
-    const c = t.src;
+import { fetchImage as a } from "../utils/helpers.js";
+async function l(s, n = {}) {
+  const c = Array.from(s.querySelectorAll("img")), o = async (t) => {
+    if (!t.getAttribute("src")) {
+      const e = t.currentSrc || t.src || "";
+      e && t.setAttribute("src", e);
+    }
+    t.removeAttribute("srcset"), t.removeAttribute("sizes");
+    const r = t.src;
     try {
-      const e = await l(c, { useProxy: a.useProxy });
+      const e = await a(r, { useProxy: n.useProxy });
       t.src = e, t.width || (t.width = t.naturalWidth || 100), t.height || (t.height = t.naturalHeight || 100);
     } catch {
       const e = document.createElement("div");
       e.style = `width: ${t.width || 100}px; height: ${t.height || 100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${t.height || 100}px; color: #666; font-size: 12px;`, e.innerText = "img", t.replaceWith(e);
     }
   };
-  for (let t = 0; t < r.length; t += 4) {
-    const c = r.slice(t, t + 4).map(i);
-    await Promise.allSettled(c);
+  for (let t = 0; t < c.length; t += 4) {
+    const r = c.slice(t, t + 4).map(o);
+    await Promise.allSettled(r);
   }
 }
 export {
-  h as inlineImages
+  l as inlineImages
 };

package/snapdom/src/modules/pseudo.js

@@ -1,78 +1,83 @@
-import { cache as T } from "../core/cache.js";
-import { iconToImage as O } from "./fonts.js";
-import { isIconFont as X } from "./iconFonts.js";
+import { iconToImage as X } from "./fonts.js";
+import { isIconFont as _ } from "./iconFonts.js";
 import { getStyleKey as $ } from "../utils/cssTools.js";
-import { getStyle as _, snapshotComputedStyle as M, parseContent as q, extractURL as G, fetchImage as J, safeEncodeURI as Q, splitBackgroundImage as Y, inlineSingleBackgroundEntry as Z } from "../utils/helpers.js";
-async function tt(i, r, d) {
-  if (!(i instanceof Element) || !(r instanceof Element)) return;
-  for (const e of ["::before", "::after", "::first-letter"])
+import { getStyle as q, snapshotComputedStyle as U, parseContent as G, extractURL as J, fetchImage as Q, safeEncodeURI as Y, splitBackgroundImage as Z, inlineSingleBackgroundEntry as tt } from "../utils/helpers.js";
+async function nt(a, r, g, z, d) {
+  if (!(a instanceof Element) || !(r instanceof Element)) return;
+  for (const n of ["::before", "::after", "::first-letter"])
     try {
-      const t = _(i, e);
+      const t = q(a, n);
       if (!t || typeof t[Symbol.iterator] != "function" || t.content === "none" && t.backgroundImage === "none" && t.backgroundColor === "transparent" && (t.borderStyle === "none" || parseFloat(t.borderWidth) === 0) && (!t.transform || t.transform === "none") && t.display === "inline") continue;
-      if (e === "::first-letter") {
-        const o = getComputedStyle(i);
+      if (n === "::first-letter") {
+        const o = getComputedStyle(a);
         if (!(t.color !== o.color || t.fontSize !== o.fontSize || t.fontWeight !== o.fontWeight)) continue;
-        const a = Array.from(r.childNodes).find(
-          (W) => W.nodeType === Node.TEXT_NODE && W.textContent?.trim().length > 0
+        const i = Array.from(r.childNodes).find(
+          (T) => T.nodeType === Node.TEXT_NODE && T.textContent?.trim().length > 0
         );
-        if (!a) continue;
-        const l = a.textContent, h = l.match(/^([^\p{L}\p{N}\s]*[\p{L}\p{N}](?:['’])?)/u)?.[0], v = l.slice(h?.length || 0);
+        if (!i) continue;
+        const l = i.textContent, h = l.match(/^([^\p{L}\p{N}\s]*[\p{L}\p{N}](?:['’])?)/u)?.[0], K = l.slice(h?.length || 0);
         if (!h || /[\uD800-\uDFFF]/.test(h)) continue;
         const p = document.createElement("span");
         p.textContent = h, p.dataset.snapdomPseudo = "::first-letter";
-        const H = M(t), K = $(H, "span", d);
-        T.preStyleMap.set(p, K);
-        const P = document.createTextNode(v);
-        r.replaceChild(P, a), r.insertBefore(p, P);
+        const M = U(t), O = $(M, "span", d);
+        g.set(p, O);
+        const W = document.createTextNode(K);
+        r.replaceChild(W, i), r.insertBefore(p, W);
         continue;
       }
-      const g = t.content, c = /counter\s*\(|counters\s*\(/.test(g) ? "- " : q(g), u = t.backgroundImage, f = t.backgroundColor, x = t.fontFamily, m = parseInt(t.fontSize) || 32, U = parseInt(t.fontWeight) || !1, z = t.color || "#000", A = t.display, R = parseFloat(t.width), j = parseFloat(t.height), S = t.borderStyle, D = parseFloat(t.borderWidth), w = t.transform, F = X(x), I = g !== "none" && c !== "", y = u && u !== "none", b = f && f !== "transparent" && f !== "rgba(0, 0, 0, 0)", k = A !== "inline" && (R > 0 || j > 0), B = S && S !== "none" && D > 0, N = w && w !== "none";
-      if (!(I || y || b || k || B || N)) continue;
-      const n = document.createElement("span");
-      n.dataset.snapdomPseudo = e, n.style.verticalAlign = "middle";
-      const L = M(t), V = $(L, "span", d);
-      if (T.preStyleMap.set(n, V), F && c.length === 1) {
-        const { dataUrl: o, width: s, height: a } = await O(
+      const u = t.content, c = /counter\s*\(|counters\s*\(/.test(u) ? "- " : G(u), y = t.backgroundImage, f = t.backgroundColor, S = t.fontFamily, m = parseInt(t.fontSize) || 32, A = parseInt(t.fontWeight) || !1, R = t.color || "#000", j = t.display, D = parseFloat(t.width), L = parseFloat(t.height), w = t.borderStyle, V = parseFloat(t.borderWidth), F = t.transform, I = _(S), k = u !== "none" && c !== "", b = y && y !== "none", C = f && f !== "transparent" && f !== "rgba(0, 0, 0, 0)", B = j !== "inline" && (D > 0 || L > 0), N = w && w !== "none" && V > 0, P = F && F !== "none";
+      if (!(k || b || C || B || N || P)) continue;
+      const e = document.createElement("span");
+      e.dataset.snapdomPseudo = n, e.style.verticalAlign = "middle";
+      const v = U(t), H = $(v, "span", d);
+      if (g.set(e, H), I && c.length === 1) {
+        const { dataUrl: o, width: s, height: i } = await X(
           c,
-          x,
-          U,
+          S,
+          A,
           m,
-          z
+          R
         ), l = document.createElement("img");
-        l.src = o, l.style = `height:${m}px;width:${s / a * m}px;object-fit:contain;`, n.appendChild(l), r.dataset.snapdomHasIcon = "true";
+        l.src = o, l.style = `height:${m}px;width:${s / i * m}px;object-fit:contain;`, e.appendChild(l), r.dataset.snapdomHasIcon = "true";
       } else if (c.startsWith("url(")) {
-        const o = G(c);
+        const o = J(c);
         if (o?.trim())
           try {
-            const s = document.createElement("img"), a = await J(Q(o), d);
-            s.src = a, s.style = `width:${m}px;height:auto;object-fit:contain;`, n.appendChild(s);
+            const s = document.createElement("img"), i = await Q(Y(o), d);
+            s.src = i, s.style = `width:${m}px;height:auto;object-fit:contain;`, e.appendChild(s);
           } catch (s) {
-            console.error(`[snapdom] Error in pseudo ${e} for`, i, s);
+            console.error(`[snapdom] Error in pseudo ${n} for`, a, s);
           }
-      } else !F && I && (n.textContent = c);
-      if (y)
+      } else !I && k && (e.textContent = c);
+      if (b)
         try {
-          const o = Y(u), s = await Promise.all(
-            o.map(Z)
+          const o = Z(y), s = await Promise.all(
+            o.map(tt)
           );
-          n.style.backgroundImage = s.join(", ");
+          e.style.backgroundImage = s.join(", ");
         } catch (o) {
           console.warn(
-            `[snapdom] Failed to inline background-image for ${e}`,
+            `[snapdom] Failed to inline background-image for ${n}`,
             o
           );
         }
-      if (b && (n.style.backgroundColor = f), !(n.childNodes.length > 0 || n.textContent?.trim() !== "" || y || b || k || B || N)) continue;
-      e === "::before" ? r.insertBefore(n, r.firstChild) : r.appendChild(n);
+      if (C && (e.style.backgroundColor = f), !(e.childNodes.length > 0 || e.textContent?.trim() !== "" || b || C || B || N || P)) continue;
+      n === "::before" ? r.insertBefore(e, r.firstChild) : r.appendChild(e);
     } catch (t) {
-      console.warn(`[snapdom] Failed to capture ${e} for`, i, t);
+      console.warn(`[snapdom] Failed to capture ${n} for`, a, t);
     }
-  const C = Array.from(i.children), E = Array.from(r.children).filter(
-    (e) => !e.dataset.snapdomPseudo
+  const E = Array.from(a.children), x = Array.from(r.children).filter(
+    (n) => !n.dataset.snapdomPseudo
   );
-  for (let e = 0; e < Math.min(C.length, E.length); e++)
-    await tt(C[e], E[e], d);
+  for (let n = 0; n < Math.min(E.length, x.length); n++)
+    await nt(
+      E[n],
+      x[n],
+      g,
+      z,
+      d
+    );
 }
 export {
-  tt as inlinePseudoElements
+  nt as inlinePseudoElements
 };

package/snapdom/src/modules/styles.js

@@ -1,31 +1,31 @@
-import { cache as e } from "../core/cache.js";
-import { getStyleKey as y } from "../utils/cssTools.js";
-import { getStyle as m } from "../utils/helpers.js";
-function g(t) {
-  const a = {};
-  for (let o = 0; o < t.length; o++) {
-    const s = t[o];
-    let n = t.getPropertyValue(s);
-    (s === "background-image" || s === "content") && n.includes("url(") && !n.includes("data:") && (n = "none"), a[s] = n;
+import { getStyleKey as c } from "../utils/cssTools.js";
+import { getStyle as d } from "../utils/helpers.js";
+const r = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new Map();
+function y(t) {
+  const n = {}, s = t.getPropertyValue("visibility");
+  for (let e = 0; e < t.length; e++) {
+    const o = t[e];
+    let a = t.getPropertyValue(o);
+    (o === "background-image" || o === "content") && a.includes("url(") && !a.includes("data:") && (a = "none"), n[o] = a;
   }
-  return a;
+  return s === "hidden" && (n.opacity = "0"), n;
 }
-function d(t, a, o) {
+function S(t, n, s, e, o) {
   if (t.tagName === "STYLE") return;
-  e.preStyle.has(t) || e.preStyle.set(t, m(t));
-  const s = e.preStyle.get(t);
-  if (!e.snapshot.has(t)) {
-    const p = g(s);
-    e.snapshot.set(t, p);
+  e.has(t) || e.set(t, d(t));
+  const a = e.get(t);
+  if (!r.has(t)) {
+    const i = y(a);
+    r.set(t, i);
   }
-  const n = e.snapshot.get(t), l = Object.entries(n).sort(([p], [r]) => p.localeCompare(r)).map(([p, r]) => `${p}:${r}`).join(";");
-  if (e.snapshotKey.has(l)) {
-    e.preStyleMap.set(a, e.snapshotKey.get(l));
+  const h = r.get(t), l = Object.entries(h).sort(([i], [p]) => i.localeCompare(p)).map(([i, p]) => `${i}:${p}`).join(";");
+  if (g.has(l)) {
+    s.set(n, g.get(l));
     return;
   }
-  const h = t.tagName?.toLowerCase() || "div", i = y(n, h, o);
-  e.snapshotKey.set(l, i), e.preStyleMap.set(a, i);
+  const f = t.tagName?.toLowerCase() || "div", m = c(h, f, o);
+  g.set(l, m), s.set(n, m);
 }
 export {
-  d as inlineAllStyles
+  S as inlineAllStyles
 };

package/snapdom/src/modules/svgDefs.js

@@ -1,26 +1,45 @@
-function l(s) {
+function u(s) {
   if (!s) return;
-  const f = document.querySelectorAll("svg > defs");
-  f.length && s.querySelectorAll("svg").forEach((r) => {
-    const c = r.querySelectorAll("use");
-    if (!c.length) return;
-    const n = /* @__PURE__ */ new Set();
-    if (c.forEach((t) => {
-      const e = t.getAttribute("xlink:href") || t.getAttribute("href");
-      e && e.startsWith("#") && n.add(e.slice(1));
-    }), !n.size) return;
-    const o = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    for (const t of n)
-      for (const e of f) {
-        const i = e.querySelector(`#${CSS.escape(t)}`);
-        if (i) {
-          o.appendChild(i.cloneNode(!0));
-          break;
-        }
+  const o = /* @__PURE__ */ new Set();
+  if (s.querySelectorAll("use").forEach((e) => {
+    const r = e.getAttribute("xlink:href") || e.getAttribute("href");
+    r && r.startsWith("#") && o.add(r.slice(1));
+  }), !o.size) return;
+  const d = Array.from(
+    document.querySelectorAll("svg > symbol, svg > defs")
+  ), f = d.filter(
+    (e) => e.tagName.toLowerCase() === "symbol"
+  ), c = d.filter(
+    (e) => e.tagName.toLowerCase() === "defs"
+  );
+  let t = s.querySelector("svg.inline-defs-container");
+  t || (t = document.createElementNS("http://www.w3.org/2000/svg", "svg"), t.setAttribute("aria-hidden", "true"), t.setAttribute(
+    "style",
+    "position: absolute; width: 0; height: 0; overflow: hidden;"
+  ), t.classList.add("inline-defs-container"), s.insertBefore(t, s.firstChild));
+  const i = /* @__PURE__ */ new Set();
+  s.querySelectorAll("symbol[id], defs > *[id]").forEach((e) => {
+    i.add(e.id);
+  }), o.forEach((e) => {
+    if (i.has(e)) return;
+    const r = f.find((l) => l.id === e);
+    if (r) {
+      t.appendChild(r.cloneNode(!0)), i.add(e);
+      return;
+    }
+    for (const l of c) {
+      const a = l.querySelector(`#${CSS.escape(e)}`);
+      if (a) {
+        let n = t.querySelector("defs");
+        n || (n = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "defs"
+        ), t.appendChild(n)), n.appendChild(a.cloneNode(!0)), i.add(e);
+        break;
       }
-    o.childNodes.length && r.insertBefore(o, r.firstChild);
+    }
   });
 }
 export {
-  l as inlineExternalDef
+  u as inlineExternalDefsAndSymbols
 };