@zumer/snapdom 1.9.3 → 1.9.6-dev.0

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.3
+* v.1.9.6-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -57,13 +57,29 @@
   };
 
   // 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 = [
@@ -111,13 +127,13 @@
     }
   }
   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");
@@ -141,7 +157,7 @@
       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) {
@@ -177,7 +193,7 @@
   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)) {
@@ -192,8 +208,8 @@
     }
     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) {
@@ -205,17 +221,15 @@
   // src/utils/helpers.js
   function inlineSingleBackgroundEntry(_0) {
     return __async(this, arguments, function* (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 = yield fetchImage(encodedUrl, { useProxy: options.useProxy });
-          bgCache.set(encodedUrl, dataUrl);
+          cache.background.set(encodedUrl, dataUrl);
           return options.skipInline ? void 0 : `url("${dataUrl}")`;
         }
       }
@@ -237,10 +251,10 @@
     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);
@@ -316,13 +330,13 @@
     }
     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);
@@ -335,7 +349,7 @@
           });
           const svgText = yield 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 (e) {
           return fetchWithFallback(src);
@@ -359,12 +373,12 @@
           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 (e) {
           try {
             const fallbackDataURL = yield fetchWithFallback(src);
-            imageCache.set(src, fallbackDataURL);
+            cache.image.set(src, fallbackDataURL);
             resolve(fallbackDataURL);
           } catch (e2) {
             reject(e2);
@@ -376,7 +390,7 @@
         console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
         try {
           const fallbackDataURL = yield fetchWithFallback(src);
-          imageCache.set(src, fallbackDataURL);
+          cache.image.set(src, fallbackDataURL);
           resolve(fallbackDataURL);
         } catch (e) {
           reject(e);
@@ -440,8 +454,6 @@
   }
 
   // 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++) {
@@ -454,37 +466,36 @@
     }
     return result;
   }
-  function inlineAllStyles(source, clone, styleMap, cache, compress) {
+  function inlineAllStyles(source, clone, compress) {
     var _a;
     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 = ((_a = source.tagName) == null ? void 0 : _a.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) {
-    var _a;
+  function isSlotElement(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
+  }
+  function deepClone(node, compress, options = {}, originalRoot) {
+    var _a, _b;
     if (node.nodeType === Node.TEXT_NODE) {
-      if ((_a = node.parentElement) == null ? void 0 : _a.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);
@@ -494,10 +505,10 @@
       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 ((_a = node.matches) == null ? void 0 : _a.call(node, 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;`;
@@ -528,8 +539,8 @@
     }
     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;`;
@@ -548,7 +559,7 @@
       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);
@@ -557,8 +568,10 @@
         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) => {
@@ -569,19 +582,31 @@
         }
       });
     }
-    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 = ((_b = node.assignedNodes) == null ? void 0 : _b.call(node, { 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;
   }
@@ -666,14 +691,14 @@
   }
   function embedCustomFonts() {
     return __async(this, arguments, function* ({ 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 = [];
@@ -706,11 +731,11 @@
                 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 = yield fetch(url);
                 const blob = yield fontRes.blob();
@@ -719,8 +744,8 @@
                   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);
@@ -756,12 +781,12 @@
                     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 = yield fetch(url);
                     const blob = yield res.blob();
@@ -770,8 +795,8 @@
                       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);
@@ -796,10 +821,10 @@
           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 = yield fetch(font._snapdomSrc);
                 const blob = yield res.blob();
@@ -808,8 +833,8 @@
                   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;
@@ -826,7 +851,7 @@
         }
       }
       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");
@@ -839,7 +864,7 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false, useProxy) {
+  function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
     return __async(this, null, function* () {
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
@@ -864,7 +889,7 @@
             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);
@@ -885,7 +910,7 @@
             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) {
@@ -936,8 +961,6 @@
         yield inlinePseudoElements(
           sChildren[i],
           cChildren[i],
-          styleMap,
-          styleCache,
           compress,
           embedFonts,
           useProxy
@@ -980,18 +1003,15 @@
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
       var _a;
-      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 {
-        yield inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
+        yield inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
       } catch (e) {
         console.warn("inlinePseudoElements failed:", e);
       }
@@ -1000,11 +1020,10 @@
       } 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);
@@ -1013,12 +1032,12 @@
           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;
@@ -1037,9 +1056,9 @@
           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";
@@ -1052,13 +1071,13 @@
         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 };
     });
   }
 
@@ -1088,30 +1107,35 @@
   }
 
   // src/modules/background.js
-  function inlineBackgroundImages(_0, _1, _2) {
-    return __async(this, arguments, function* (source, clone, styleCache, options = {}) {
+  function inlineBackgroundImages(_0, _1) {
+    return __async(this, arguments, function* (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 = yield 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 = yield 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;
         }
@@ -1128,13 +1152,14 @@
   function captureDOM(_0) {
     return __async(this, arguments, function* (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 } = yield prepareClone(element, compress, embedFonts, options));
+      ({ clone, classCSS } = yield prepareClone(element, compress, embedFonts, options));
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
           yield inlineImages(clone, options);
@@ -1143,7 +1168,7 @@
       });
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
-          yield inlineBackgroundImages(element, clone, styleCache, options);
+          yield inlineBackgroundImages(element, clone, options);
           resolve();
         }), { fast });
       });
@@ -1158,13 +1183,13 @@
       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 {
           yield new Promise((resolve) => {
             idle(() => {
               baseCSS = generateDedupedBaseCSS(usedTags);
-              baseCSSCache.set(tagKey, baseCSS);
+              cache.baseStyle.set(tagKey, baseCSS);
               resolve();
             }, { fast });
           });
@@ -1406,10 +1431,7 @@
     return __async(this, arguments, function* (root = document, options = {}) {
       const { embedFonts = true, reset = false } = options;
       if (reset) {
-        imageCache.clear();
-        bgCache.clear();
-        resourceCache.clear();
-        baseCSSCache.clear();
+        cache.reset();
         return;
       }
       yield document.fonts.ready;
@@ -1422,9 +1444,9 @@
       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(() => {
             })
           );
         }