@zumer/snapdom 1.9.3 → 1.9.6-dev.0

package/dist/snapdom.mjs

@@ -1,20 +1,36 @@
 
 /*
 * snapdom
-* v.1.9.3
+* v.1.9.6-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
 
 
 // src/core/cache.js
-var imageCache = /* @__PURE__ */ new Map();
-var bgCache = /* @__PURE__ */ new Map();
-var resourceCache = /* @__PURE__ */ new Map();
-var defaultStylesCache = /* @__PURE__ */ new Map();
-var baseCSSCache = /* @__PURE__ */ new Map();
-var computedStyleCache = /* @__PURE__ */ new WeakMap();
-var processedFontURLs = /* @__PURE__ */ new Set();
+var cache = {
+  image: /* @__PURE__ */ new Map(),
+  background: /* @__PURE__ */ new Map(),
+  resource: /* @__PURE__ */ new Map(),
+  defaultStyle: /* @__PURE__ */ new Map(),
+  baseStyle: /* @__PURE__ */ new Map(),
+  computedStyle: /* @__PURE__ */ new WeakMap(),
+  font: /* @__PURE__ */ new Set(),
+  snapshot: /* @__PURE__ */ new WeakMap(),
+  snapshotKey: /* @__PURE__ */ new Map(),
+  preStyleMap: /* @__PURE__ */ new Map(),
+  preStyle: /* @__PURE__ */ new WeakMap(),
+  preNodeMap: /* @__PURE__ */ new Map(),
+  reset: resetCache
+};
+function resetCache() {
+  cache.computedStyle = /* @__PURE__ */ new WeakMap();
+  cache.snapshot = /* @__PURE__ */ new WeakMap();
+  cache.snapshotKey.clear();
+  cache.preStyleMap.clear();
+  cache.preStyle = /* @__PURE__ */ new WeakMap();
+  cache.preNodeMap.clear();
+}
 
 // src/utils/cssTools.js
 var commonTags = [
@@ -62,13 +78,13 @@ function precacheCommonTags() {
   }
 }
 function getDefaultStyleForTag(tagName) {
-  if (defaultStylesCache.has(tagName)) {
-    return defaultStylesCache.get(tagName);
+  if (cache.defaultStyle.has(tagName)) {
+    return cache.defaultStyle.get(tagName);
   }
   const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
   if (skipTags.has(tagName)) {
     const empty = {};
-    defaultStylesCache.set(tagName, empty);
+    cache.defaultStyle.set(tagName, empty);
     return empty;
   }
   let sandbox = document.getElementById("snapdom-sandbox");
@@ -92,7 +108,7 @@ function getDefaultStyleForTag(tagName) {
     defaults[prop] = styles.getPropertyValue(prop);
   }
   sandbox.removeChild(el);
-  defaultStylesCache.set(tagName, defaults);
+  cache.defaultStyle.set(tagName, defaults);
   return defaults;
 }
 function getStyleKey(snapshot, tagName, compress = false) {
@@ -128,7 +144,7 @@ function collectUsedTagNames(root) {
 function generateDedupedBaseCSS(usedTagNames) {
   const groups = /* @__PURE__ */ new Map();
   for (let tagName of usedTagNames) {
-    const styles = defaultStylesCache.get(tagName);
+    const styles = cache.defaultStyle.get(tagName);
     if (!styles) continue;
     const key = Object.entries(styles).map(([k, v]) => `${k}:${v};`).sort().join("");
     if (!groups.has(key)) {
@@ -143,8 +159,8 @@ function generateDedupedBaseCSS(usedTagNames) {
   }
   return css;
 }
-function generateCSSClasses(styleMap) {
-  const keySet = new Set(styleMap.values());
+function generateCSSClasses() {
+  const keySet = new Set(cache.preStyleMap.values());
   const classMap = /* @__PURE__ */ new Map();
   let counter = 1;
   for (const key of keySet) {
@@ -155,17 +171,15 @@ function generateCSSClasses(styleMap) {
 
 // src/utils/helpers.js
 async function inlineSingleBackgroundEntry(entry, options = {}) {
-  const isUrl = entry.startsWith("url(");
+  const rawUrl = extractURL(entry);
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
-  if (isUrl) {
-    const rawUrl = extractURL(entry);
-    if (!rawUrl) return entry;
+  if (rawUrl) {
     const encodedUrl = safeEncodeURI(rawUrl);
-    if (bgCache.has(encodedUrl)) {
-      return options.skipInline ? void 0 : `url(${bgCache.get(encodedUrl)})`;
+    if (cache.background.has(encodedUrl)) {
+      return options.skipInline ? void 0 : `url(${cache.background.get(encodedUrl)})`;
     } else {
       const dataUrl = await fetchImage(encodedUrl, { useProxy: options.useProxy });
-      bgCache.set(encodedUrl, dataUrl);
+      cache.background.set(encodedUrl, dataUrl);
       return options.skipInline ? void 0 : `url("${dataUrl}")`;
     }
   }
@@ -186,10 +200,10 @@ function getStyle(el, pseudo = null) {
   if (!(el instanceof Element)) {
     return window.getComputedStyle(el, pseudo);
   }
-  let map = computedStyleCache.get(el);
+  let map = cache.computedStyle.get(el);
   if (!map) {
     map = /* @__PURE__ */ new Map();
-    computedStyleCache.set(el, map);
+    cache.computedStyle.set(el, map);
   }
   if (!map.has(pseudo)) {
     const st = window.getComputedStyle(el, pseudo);
@@ -263,13 +277,13 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
   }
   const crossOriginValue = getCrossOriginMode(src);
   console.log(`[SnapDOM - fetchImage] Start loading image: ${src} with crossOrigin=${crossOriginValue}`);
-  if (imageCache.has(src)) {
+  if (cache.image.has(src)) {
     console.log(`[SnapDOM - fetchImage] Cache hit for: ${src}`);
-    return Promise.resolve(imageCache.get(src));
+    return Promise.resolve(cache.image.get(src));
   }
   const isDataURI = src.startsWith("data:image/");
   if (isDataURI) {
-    imageCache.set(src, src);
+    cache.image.set(src, src);
     return Promise.resolve(src);
   }
   const isSVG = /\.svg(\?.*)?$/i.test(src);
@@ -282,7 +296,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         });
         const svgText = await response.text();
         const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
-        imageCache.set(src, encoded);
+        cache.image.set(src, encoded);
         return encoded;
       } catch {
         return fetchWithFallback(src);
@@ -306,12 +320,12 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         const ctx = canvas.getContext("2d");
         ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
         const dataURL = canvas.toDataURL("image/png");
-        imageCache.set(src, dataURL);
+        cache.image.set(src, dataURL);
         resolve(dataURL);
       } catch {
         try {
           const fallbackDataURL = await fetchWithFallback(src);
-          imageCache.set(src, fallbackDataURL);
+          cache.image.set(src, fallbackDataURL);
           resolve(fallbackDataURL);
         } catch (e) {
           reject(e);
@@ -323,7 +337,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
       console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
       try {
         const fallbackDataURL = await fetchWithFallback(src);
-        imageCache.set(src, fallbackDataURL);
+        cache.image.set(src, fallbackDataURL);
         resolve(fallbackDataURL);
       } catch (e) {
         reject(e);
@@ -387,8 +401,6 @@ function splitBackgroundImage(bg) {
 }
 
 // src/modules/styles.js
-var snapshotCache = /* @__PURE__ */ new WeakMap();
-var snapshotKeyCache = /* @__PURE__ */ new Map();
 function snapshotComputedStyleFull(style) {
   const result = {};
   for (let i = 0; i < style.length; i++) {
@@ -401,35 +413,34 @@ function snapshotComputedStyleFull(style) {
   }
   return result;
 }
-function inlineAllStyles(source, clone, styleMap, cache, compress) {
+function inlineAllStyles(source, clone, compress) {
   if (source.tagName === "STYLE") return;
-  if (!cache.has(source)) {
-    cache.set(source, getStyle(source));
+  if (!cache.preStyle.has(source)) {
+    cache.preStyle.set(source, getStyle(source));
   }
-  const style = cache.get(source);
-  if (!snapshotCache.has(source)) {
+  const style = cache.preStyle.get(source);
+  if (!cache.snapshot.has(source)) {
     const snapshot2 = snapshotComputedStyleFull(style);
-    snapshotCache.set(source, snapshot2);
+    cache.snapshot.set(source, snapshot2);
   }
-  const snapshot = snapshotCache.get(source);
+  const snapshot = cache.snapshot.get(source);
   const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
-  if (snapshotKeyCache.has(hash)) {
-    styleMap.set(clone, snapshotKeyCache.get(hash));
+  if (cache.snapshotKey.has(hash)) {
+    cache.preStyleMap.set(clone, cache.snapshotKey.get(hash));
     return;
   }
   const tagName = source.tagName?.toLowerCase() || "div";
   const key = getStyleKey(snapshot, tagName, compress);
-  snapshotKeyCache.set(hash, key);
-  styleMap.set(clone, key);
+  cache.snapshotKey.set(hash, key);
+  cache.preStyleMap.set(clone, key);
 }
 
 // src/core/clone.js
-function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
+function isSlotElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
+}
+function deepClone(node, compress, options = {}, originalRoot) {
   if (node.nodeType === Node.TEXT_NODE) {
-    if (node.parentElement?.shadowRoot) {
-      const tag = node.parentElement.tagName.toLowerCase();
-      if (customElements.get(tag)) return null;
-    }
     return node.cloneNode(true);
   }
   if (node.nodeType !== Node.ELEMENT_NODE) return node.cloneNode(true);
@@ -439,10 +450,10 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
     spacer.style.cssText = `display: inline-block; width: ${rect.width}px; height: ${rect.height}px; visibility: hidden;`;
     return spacer;
   }
-  if (options.exclude && Array.isArray(options.exclude) && options.exclude.length > 0) {
+  if (options.exclude && Array.isArray(options.exclude)) {
     for (const selector of options.exclude) {
       try {
-        if (node.matches && node.matches(selector)) {
+        if (node.matches?.(selector)) {
           const spacer = document.createElement("div");
           const rect = node.getBoundingClientRect();
           spacer.style.cssText = `display: inline-block; width: ${rect.width}px; height: ${rect.height}px; visibility: hidden;`;
@@ -473,8 +484,8 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
   }
   if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
-    nodeMap.set(clone2, node);
-    inlineAllStyles(node, clone2, styleMap, styleCache, compress);
+    cache.preNodeMap.set(clone2, node);
+    inlineAllStyles(node, clone2, compress);
     const placeholder = document.createElement("div");
     placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
     placeholder.style.cssText = `color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;`;
@@ -493,7 +504,7 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
     return img;
   }
   const clone = node.cloneNode(false);
-  nodeMap.set(clone, node);
+  cache.preNodeMap.set(clone, node);
   if (node instanceof HTMLInputElement) {
     clone.value = node.value;
     clone.setAttribute("value", node.value);
@@ -502,8 +513,10 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
       if (node.checked) clone.setAttribute("checked", "");
     }
   } else if (node instanceof HTMLTextAreaElement) {
-    clone.value = node.value;
+    const rect = node.getBoundingClientRect();
     clone.textContent = node.value;
+    clone.style.width = `${rect.width}px`;
+    clone.style.height = `${rect.height}px`;
   } else if (node instanceof HTMLSelectElement) {
     clone.value = node.value;
     Array.from(clone.options).forEach((opt) => {
@@ -514,19 +527,31 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
       }
     });
   }
-  inlineAllStyles(node, clone, styleMap, styleCache, compress);
-  const frag = document.createDocumentFragment();
-  const rootElement = originalRoot || node;
-  node.childNodes.forEach((child) => {
-    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, rootElement);
-    if (clonedChild) frag.appendChild(clonedChild);
-  });
-  clone.appendChild(frag);
-  if (node.shadowRoot) {
-    const shadowContent = Array.from(node.shadowRoot.children).filter((el) => el.tagName !== "STYLE").map((el) => deepClone(el, styleMap, styleCache, nodeMap, compress, options, rootElement)).filter(Boolean);
-    const shadowFrag = document.createDocumentFragment();
-    shadowContent.forEach((child) => shadowFrag.appendChild(child));
-    clone.appendChild(shadowFrag);
+  inlineAllStyles(node, clone, compress);
+  if (isSlotElement(node)) {
+    const assigned = node.assignedNodes?.({ flatten: true }) || [];
+    const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
+    const fragment = document.createDocumentFragment();
+    for (const child of nodesToClone) {
+      const clonedChild = deepClone(child, compress, options, originalRoot || node);
+      if (clonedChild) fragment.appendChild(clonedChild);
+    }
+    return fragment;
+  } else if (node instanceof HTMLTextAreaElement) {
+  } else {
+    const baseChildren = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes;
+    for (const child of baseChildren) {
+      const clonedChild = deepClone(child, compress, options, originalRoot || node);
+      if (clonedChild) clone.appendChild(clonedChild);
+    }
+    if (node.shadowRoot && node.childNodes.length > 0 && !node.shadowRoot.querySelector("slot")) {
+      const lightDomContent = document.createDocumentFragment();
+      for (const child of node.childNodes) {
+        const clonedChild = deepClone(child, compress, options, originalRoot || node);
+        if (clonedChild) lightDomContent.appendChild(clonedChild);
+      }
+      clone.appendChild(lightDomContent);
+    }
   }
   return clone;
 }
@@ -608,14 +633,14 @@ function injectLinkIfMissing(href) {
   });
 }
 async function embedCustomFonts({ preCached = false } = {}) {
-  if (resourceCache.has("fonts-embed-css")) {
+  if (cache.resource.has("fonts-embed-css")) {
     if (preCached) {
       const style = document.createElement("style");
       style.setAttribute("data-snapdom", "embedFonts");
-      style.textContent = resourceCache.get("fonts-embed-css");
+      style.textContent = cache.resource.get("fonts-embed-css");
       document.head.appendChild(style);
     }
-    return resourceCache.get("fonts-embed-css");
+    return cache.resource.get("fonts-embed-css");
   }
   const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
   const styleImports = [];
@@ -648,11 +673,11 @@ async function embedCustomFonts({ preCached = false } = {}) {
             url = new URL(url, link.href).href;
           }
           if (isIconFont(url)) return null;
-          if (resourceCache.has(url)) {
-            processedFontURLs.add(url);
-            return { original: match[0], inlined: `url(${resourceCache.get(url)})` };
+          if (cache.resource.has(url)) {
+            cache.font.add(url);
+            return { original: match[0], inlined: `url(${cache.resource.get(url)})` };
           }
-          if (processedFontURLs.has(url)) return null;
+          if (cache.font.has(url)) return null;
           try {
             const fontRes = await fetch(url);
             const blob = await fontRes.blob();
@@ -661,8 +686,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
               reader.onload = () => resolve(reader.result);
               reader.readAsDataURL(blob);
             });
-            resourceCache.set(url, b64);
-            processedFontURLs.add(url);
+            cache.resource.set(url, b64);
+            cache.font.add(url);
             return { original: match[0], inlined: `url(${b64})` };
           } catch (e) {
             console.warn("[snapdom] Failed to fetch font resource:", url);
@@ -698,12 +723,12 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 url = new URL(url, sheet.href || location.href).href;
               }
               if (isIconFont(url)) continue;
-              if (resourceCache.has(url)) {
-                processedFontURLs.add(url);
-                inlinedSrc = inlinedSrc.replace(match[0], `url(${resourceCache.get(url)})`);
+              if (cache.resource.has(url)) {
+                cache.font.add(url);
+                inlinedSrc = inlinedSrc.replace(match[0], `url(${cache.resource.get(url)})`);
                 continue;
               }
-              if (processedFontURLs.has(url)) continue;
+              if (cache.font.has(url)) continue;
               try {
                 const res = await fetch(url);
                 const blob = await res.blob();
@@ -712,8 +737,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
                   reader.onload = () => resolve(reader.result);
                   reader.readAsDataURL(blob);
                 });
-                resourceCache.set(url, b64);
-                processedFontURLs.add(url);
+                cache.resource.set(url, b64);
+                cache.font.add(url);
                 inlinedSrc = inlinedSrc.replace(match[0], `url(${b64})`);
               } catch (e) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
@@ -738,10 +763,10 @@ async function embedCustomFonts({ preCached = false } = {}) {
       if (isIconFont(font.family)) continue;
       let b64 = font._snapdomSrc;
       if (!b64.startsWith("data:")) {
-        if (resourceCache.has(font._snapdomSrc)) {
-          b64 = resourceCache.get(font._snapdomSrc);
-          processedFontURLs.add(font._snapdomSrc);
-        } else if (!processedFontURLs.has(font._snapdomSrc)) {
+        if (cache.resource.has(font._snapdomSrc)) {
+          b64 = cache.resource.get(font._snapdomSrc);
+          cache.font.add(font._snapdomSrc);
+        } else if (!cache.font.has(font._snapdomSrc)) {
           try {
             const res = await fetch(font._snapdomSrc);
             const blob = await res.blob();
@@ -750,8 +775,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
               reader.onload = () => resolve(reader.result);
               reader.readAsDataURL(blob);
             });
-            resourceCache.set(font._snapdomSrc, b64);
-            processedFontURLs.add(font._snapdomSrc);
+            cache.resource.set(font._snapdomSrc, b64);
+            cache.font.add(font._snapdomSrc);
           } catch (e) {
             console.warn("[snapdom] Failed to fetch dynamic font src:", font._snapdomSrc);
             continue;
@@ -768,7 +793,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
     }
   }
   if (finalCSS) {
-    resourceCache.set("fonts-embed-css", finalCSS);
+    cache.resource.set("fonts-embed-css", finalCSS);
     if (preCached) {
       const style = document.createElement("style");
       style.setAttribute("data-snapdom", "embedFonts");
@@ -780,7 +805,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false, useProxy) {
+async function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
@@ -804,7 +829,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         span.dataset.snapdomPseudo = "::first-letter";
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
-        styleMap.set(span, key);
+        cache.preStyleMap.set(span, key);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
@@ -825,7 +850,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         pseudoEl.dataset.snapdomPseudo = pseudo;
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
-        styleMap.set(pseudoEl, key);
+        cache.preStyleMap.set(pseudoEl, key);
         const isIconFont2 = isIconFont(fontFamily);
         const cleanContent = parseContent(content);
         if (isIconFont2 && cleanContent.length === 1) {
@@ -876,8 +901,6 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
     await inlinePseudoElements(
       sChildren[i],
       cChildren[i],
-      styleMap,
-      styleCache,
       compress,
       embedFonts,
       useProxy
@@ -917,18 +940,15 @@ function inlineExternalDef(root) {
 
 // src/core/prepare.js
 async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
-  const styleMap = /* @__PURE__ */ new Map();
-  const styleCache = /* @__PURE__ */ new WeakMap();
-  const nodeMap = /* @__PURE__ */ new Map();
-  let clone;
+  let clone, classCSS;
   try {
-    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
+    clone = deepClone(element, compress, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
   }
   try {
-    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
+    await inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
@@ -937,11 +957,10 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
   } catch (e) {
     console.warn("inlineExternalDef failed:", e);
   }
-  let classCSS = "";
   if (compress) {
-    const keyToClass = generateCSSClasses(styleMap);
+    const keyToClass = generateCSSClasses();
     classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
-    for (const [node, key] of styleMap.entries()) {
+    for (const [node, key] of cache.preStyleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       const className = keyToClass.get(key);
       if (className) node.classList.add(className);
@@ -950,12 +969,12 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
     }
   } else {
-    for (const [node, key] of styleMap.entries()) {
+    for (const [node, key] of cache.preStyleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       node.setAttribute("style", key.replace(/;/g, "; "));
     }
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
     const scrollX = originalNode.scrollLeft;
     const scrollY = originalNode.scrollTop;
     const hasScroll = scrollX || scrollY;
@@ -974,9 +993,9 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       cloneNode.appendChild(inner);
     }
   }
-  if (element === nodeMap.get(clone)) {
-    const computed = styleCache.get(element) || window.getComputedStyle(element);
-    styleCache.set(element, computed);
+  if (element === cache.preNodeMap.get(clone)) {
+    const computed = cache.preStyle.get(element) || window.getComputedStyle(element);
+    cache.preStyle.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
     clone.style.position = "static";
@@ -989,13 +1008,13 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
     if (originalNode.tagName === "PRE") {
       cloneNode.style.marginTop = "0";
       cloneNode.style.marginBlockStart = "0";
     }
   }
-  return { clone, classCSS, styleCache };
+  return { clone, classCSS };
 }
 
 // src/modules/images.js
@@ -1022,29 +1041,34 @@ async function inlineImages(clone, options = {}) {
 }
 
 // src/modules/background.js
-async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
+async function inlineBackgroundImages(source, clone, options = {}) {
   const queue = [[source, clone]];
+  const imageProps = [
+    "background-image",
+    "mask",
+    "mask-image",
+    "-webkit-mask-image",
+    "mask-source",
+    "mask-box-image-source",
+    "mask-border-source",
+    "-webkit-mask-box-image-source"
+  ];
   while (queue.length) {
     const [srcNode, cloneNode] = queue.shift();
-    const style = styleCache.get(srcNode) || getStyle(srcNode);
-    if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
-    const bg = style.getPropertyValue("background-image");
-    const bgColor = style.getPropertyValue("background-color");
-    if (!bg || bg === "none") {
-      const sChildren2 = Array.from(srcNode.children);
-      const cChildren2 = Array.from(cloneNode.children);
-      for (let i = 0; i < Math.min(sChildren2.length, cChildren2.length); i++) {
-        queue.push([sChildren2[i], cChildren2[i]]);
+    const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
+    if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
+    for (const prop of imageProps) {
+      const val = style.getPropertyValue(prop);
+      if (!val || val === "none") continue;
+      const splits = splitBackgroundImage(val);
+      const inlined = await Promise.all(
+        splits.map((entry) => inlineSingleBackgroundEntry(entry, options))
+      );
+      if (inlined.some((p) => p && p !== "none" && !/^url\(undefined/.test(p))) {
+        cloneNode.style.setProperty(prop, inlined.join(", "));
       }
-      continue;
-    }
-    const bgSplits = splitBackgroundImage(bg);
-    const newBgParts = await Promise.all(
-      bgSplits.map((entry) => inlineSingleBackgroundEntry(entry, options))
-    );
-    if (newBgParts.some((p) => p && p !== "none" && !/^url\(undefined\)/.test(p))) {
-      cloneNode.style.backgroundImage = newBgParts.join(", ");
     }
+    const bgColor = style.getPropertyValue("background-color");
     if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
       cloneNode.style.backgroundColor = bgColor;
     }
@@ -1059,13 +1083,14 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
 // src/core/capture.js
 async function captureDOM(element, options = {}) {
   if (!element) throw new Error("Element cannot be null or undefined");
+  cache.reset();
   const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "" } = options;
-  let clone, classCSS, styleCache;
+  let clone, classCSS;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
+  ({ clone, classCSS } = await prepareClone(element, compress, embedFonts, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -1074,7 +1099,7 @@ async function captureDOM(element, options = {}) {
   });
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineBackgroundImages(element, clone, styleCache, options);
+      await inlineBackgroundImages(element, clone, options);
       resolve();
     }, { fast });
   });
@@ -1089,13 +1114,13 @@ async function captureDOM(element, options = {}) {
   if (compress) {
     const usedTags = collectUsedTagNames(clone).sort();
     const tagKey = usedTags.join(",");
-    if (baseCSSCache.has(tagKey)) {
-      baseCSS = baseCSSCache.get(tagKey);
+    if (cache.baseStyle.has(tagKey)) {
+      baseCSS = cache.baseStyle.get(tagKey);
     } else {
       await new Promise((resolve) => {
         idle(() => {
           baseCSS = generateDedupedBaseCSS(usedTags);
-          baseCSSCache.set(tagKey, baseCSS);
+          cache.baseStyle.set(tagKey, baseCSS);
           resolve();
         }, { fast });
       });
@@ -1304,10 +1329,7 @@ snapdom.download = async (el, options = {}) => {
 async function preCache(root = document, options = {}) {
   const { embedFonts = true, reset = false } = options;
   if (reset) {
-    imageCache.clear();
-    bgCache.clear();
-    resourceCache.clear();
-    baseCSSCache.clear();
+    cache.reset();
     return;
   }
   await document.fonts.ready;
@@ -1320,9 +1342,9 @@ async function preCache(root = document, options = {}) {
   const promises = [];
   for (const img of imgEls) {
     const src = img.src;
-    if (!imageCache.has(src)) {
+    if (!cache.image.has(src)) {
       promises.push(
-        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => imageCache.set(src, dataURL)).catch(() => {
+        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => cache.image.set(src, dataURL)).catch(() => {
         })
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.3",
+  "version": "1.9.6-dev.0",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",