@zumer/snapdom 1.7.1 → 1.8.0

package/dist/snapdom.mjs

@@ -1,11 +1,12 @@
 
 /*
 * snapdom
-* v.1.7.1
+* v.1.8.0
 * Author Juan Martin Muda
 * License MIT
 **/
 
+
 // src/core/cache.js
 var imageCache = /* @__PURE__ */ new Map();
 var bgCache = /* @__PURE__ */ new Map();
@@ -13,6 +14,7 @@ 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();
 
 // src/utils/cssTools.js
 var commonTags = [
@@ -152,6 +154,27 @@ function generateCSSClasses(styleMap) {
 }
 
 // src/utils/helpers.js
+async function inlineSingleBackgroundEntry(entry, options = {}) {
+  const isUrl = entry.startsWith("url(");
+  const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
+  if (isUrl) {
+    const rawUrl = extractURL(entry);
+    if (!rawUrl) return entry;
+    const encodedUrl = safeEncodeURI(rawUrl);
+    if (bgCache.has(encodedUrl)) {
+      return options.skipInline ? void 0 : `url(${bgCache.get(encodedUrl)})`;
+    } else {
+      const crossOrigin = options.crossOrigin ? options.crossOrigin(encodedUrl) : "anonymous";
+      const dataUrl = await fetchImage(encodedUrl, 3e3, crossOrigin);
+      bgCache.set(encodedUrl, dataUrl);
+      return options.skipInline ? void 0 : `url(${dataUrl})`;
+    }
+  }
+  if (isGradient || entry === "none") {
+    return entry;
+  }
+  return entry;
+}
 function idle(fn, { fast = false } = {}) {
   if (fast) return fn();
   if ("requestIdleCallback" in window) {
@@ -205,7 +228,8 @@ function isIconFont(familyOrUrl) {
     /feather/i,
     /bootstrap\s*icons/i,
     /remix\s*icons/i,
-    /heroicons/i
+    /heroicons/i,
+    /lucide/i
   ];
   return iconFontPatterns.some((rx) => rx.test(familyOrUrl));
 }
@@ -256,6 +280,49 @@ function snapshotComputedStyle(style) {
 function isSafari() {
   return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 }
+function stripTranslate(transform) {
+  if (!transform || transform === "none") return "";
+  let cleaned = transform.replace(/translate[XY]?\([^)]*\)/g, "");
+  cleaned = cleaned.replace(/matrix\(([^)]+)\)/g, (_, values) => {
+    const parts = values.split(",").map((s) => s.trim());
+    if (parts.length !== 6) return `matrix(${values})`;
+    parts[4] = "0";
+    parts[5] = "0";
+    return `matrix(${parts.join(", ")})`;
+  });
+  cleaned = cleaned.replace(/matrix3d\(([^)]+)\)/g, (_, values) => {
+    const parts = values.split(",").map((s) => s.trim());
+    if (parts.length !== 16) return `matrix3d(${values})`;
+    parts[12] = "0";
+    parts[13] = "0";
+    return `matrix3d(${parts.join(", ")})`;
+  });
+  return cleaned.trim().replace(/\s{2,}/g, " ");
+}
+function safeEncodeURI(uri) {
+  try {
+    const newURI = decodeURI(uri);
+    return encodeURI(newURI);
+  } catch {
+    return uri;
+  }
+}
+function splitBackgroundImage(bg) {
+  const parts = [];
+  let depth = 0;
+  let lastIndex = 0;
+  for (let i = 0; i < bg.length; i++) {
+    const char = bg[i];
+    if (char === "(") depth++;
+    if (char === ")") depth--;
+    if (char === "," && depth === 0) {
+      parts.push(bg.slice(lastIndex, i).trim());
+      lastIndex = i + 1;
+    }
+  }
+  parts.push(bg.slice(lastIndex).trim());
+  return parts;
+}
 
 // src/modules/styles.js
 function inlineAllStyles(source, clone, styleMap, cache, compress) {
@@ -281,7 +348,7 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress) {
   if (node.tagName === "IFRAME") {
     const fallback = document.createElement("div");
     fallback.textContent = "";
-    fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.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;`;
+    fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.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;`;
     return fallback;
   }
   if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "placeholder") {
@@ -301,8 +368,8 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress) {
     img.width = node.width;
     img.height = node.height;
     img.style.display = "inline-block";
-    img.style.width = `${node.width}px`;
-    img.style.height = `${node.height}px`;
+    img.style.width = node.style.width || `${node.width}px`;
+    img.style.height = node.style.height || `${node.height}px`;
     return img;
   }
   if (node.nodeType === Node.TEXT_NODE) {
@@ -375,36 +442,66 @@ async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, c
   ctx.fillText(unicodeChar, 0, ascent);
   return canvas.toDataURL();
 }
+function isStylesheetLoaded(href) {
+  return Array.from(document.styleSheets).some((sheet) => sheet.href === href);
+}
+function injectLinkIfMissing(href) {
+  return new Promise((resolve) => {
+    if (isStylesheetLoaded(href)) return resolve(null);
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.setAttribute("data-snapdom", "injected-import");
+    link.onload = () => resolve(link);
+    link.onerror = () => resolve(null);
+    document.head.appendChild(link);
+  });
+}
 async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } = {}) {
+  if (resourceCache.has("fonts-embed-css")) {
+    if (preCached) {
+      const style = document.createElement("style");
+      style.setAttribute("data-snapdom", "embedFonts");
+      style.textContent = resourceCache.get("fonts-embed-css");
+      document.head.appendChild(style);
+    }
+    return resourceCache.get("fonts-embed-css");
+  }
+  const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
+  const styleImports = [];
+  for (const styleTag of document.querySelectorAll("style")) {
+    const cssText = styleTag.textContent || "";
+    const matches = Array.from(cssText.matchAll(importRegex));
+    for (const match of matches) {
+      const importUrl = match[1];
+      if (!isStylesheetLoaded(importUrl)) {
+        styleImports.push(importUrl);
+      }
+    }
+  }
+  await Promise.all(styleImports.map(injectLinkIfMissing));
   const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter((link) => link.href);
   let finalCSS = "";
   for (const link of links) {
     try {
       const res = await fetch(link.href);
       const cssText = await res.text();
-      if (ignoreIconFonts && (isIconFont(link.href) || isIconFont(cssText))) {
-        continue;
-      }
-      const urlRegex = /url\(([^)]+)\)/g;
+      if (ignoreIconFonts && (isIconFont(link.href) || isIconFont(cssText))) continue;
+      const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
       const inlinedCSS = await Promise.all(
         Array.from(cssText.matchAll(urlRegex)).map(async (match) => {
           let rawUrl = extractURL(match[0]);
           if (!rawUrl) return null;
           let url = rawUrl;
-          if (!url.startsWith("http")) {
+          if (!url.startsWith("http") && !url.startsWith("data:")) {
             url = new URL(url, link.href).href;
           }
-          try {
-            url = encodeURI(url);
-          } catch (e) {
-            console.warn("[snapdom] Failed to encode font URL:", url);
-          }
-          if (ignoreIconFonts && isIconFont(url)) {
-            return null;
-          }
+          if (ignoreIconFonts && isIconFont(url)) return null;
           if (resourceCache.has(url)) {
+            processedFontURLs.add(url);
             return { original: match[0], inlined: `url(${resourceCache.get(url)})` };
           }
+          if (processedFontURLs.has(url)) return null;
           try {
             const fontRes = await fetch(url);
             const blob = await fontRes.blob();
@@ -414,18 +511,17 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
               reader.readAsDataURL(blob);
             });
             resourceCache.set(url, b64);
+            processedFontURLs.add(url);
             return { original: match[0], inlined: `url(${b64})` };
-          } catch (err) {
-            console.warn("[snapdom] Failed to fetch font:", url);
+          } catch (e) {
+            console.warn("[snapdom] Failed to fetch font resource:", url);
             return null;
           }
         })
       );
       let cssFinal = cssText;
       for (const r of inlinedCSS) {
-        if (r) {
-          cssFinal = cssFinal.replace(r.original, r.inlined);
-        }
+        if (r) cssFinal = cssFinal.replace(r.original, r.inlined);
       }
       finalCSS += cssFinal + "\n";
     } catch (e) {
@@ -439,23 +535,23 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
           if (rule.type === CSSRule.FONT_FACE_RULE) {
             const src = rule.style.getPropertyValue("src");
             if (!src) continue;
-            const urlRegex = /url\(([^)]+)\)/g;
+            const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
             for (const match of matches) {
-              let rawUrl = match[1].trim().replace(/^["']|["']$/g, "");
+              let rawUrl = match[2].trim();
               if (!rawUrl) continue;
               let url = rawUrl;
               if (!url.startsWith("http") && !url.startsWith("data:")) {
                 url = new URL(url, sheet.href || location.href).href;
               }
-              if (ignoreIconFonts && isIconFont(url)) {
-                continue;
-              }
+              if (ignoreIconFonts && isIconFont(url)) continue;
               if (resourceCache.has(url)) {
+                processedFontURLs.add(url);
                 inlinedSrc = inlinedSrc.replace(match[0], `url(${resourceCache.get(url)})`);
                 continue;
               }
+              if (processedFontURLs.has(url)) continue;
               try {
                 const res = await fetch(url);
                 const blob = await res.blob();
@@ -465,6 +561,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
                   reader.readAsDataURL(blob);
                 });
                 resourceCache.set(url, b64);
+                processedFontURLs.add(url);
                 inlinedSrc = inlinedSrc.replace(match[0], `url(${b64})`);
               } catch (e) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
@@ -490,7 +587,8 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
       if (!b64.startsWith("data:")) {
         if (resourceCache.has(font._snapdomSrc)) {
           b64 = resourceCache.get(font._snapdomSrc);
-        } else {
+          processedFontURLs.add(font._snapdomSrc);
+        } else if (!processedFontURLs.has(font._snapdomSrc)) {
           try {
             const res = await fetch(font._snapdomSrc);
             const blob = await res.blob();
@@ -500,6 +598,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
               reader.readAsDataURL(blob);
             });
             resourceCache.set(font._snapdomSrc, b64);
+            processedFontURLs.add(font._snapdomSrc);
           } catch (e) {
             console.warn("[snapdom] Failed to fetch dynamic font src:", font._snapdomSrc);
             continue;
@@ -515,11 +614,14 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
 `;
     }
   }
-  if (finalCSS && preCached) {
-    const style = document.createElement("style");
-    style.setAttribute("data-snapdom", "embedFonts");
-    style.textContent = finalCSS;
-    document.head.appendChild(style);
+  if (finalCSS) {
+    resourceCache.set("fonts-embed-css", finalCSS);
+    if (preCached) {
+      const style = document.createElement("style");
+      style.setAttribute("data-snapdom", "embedFonts");
+      style.textContent = finalCSS;
+      document.head.appendChild(style);
+    }
   }
   return finalCSS;
 }
@@ -527,15 +629,41 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
 // src/modules/pseudo.js
 async function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
-  for (const pseudo of ["::before", "::after"]) {
+  for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
-      if (!style) continue;
+      if (!style || typeof style[Symbol.iterator] !== "function") continue;
+      if (pseudo === "::first-letter") {
+        const normal = getComputedStyle(source);
+        const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
+        if (!isMeaningful) continue;
+        const textNode = Array.from(clone.childNodes).find(
+          (n) => n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0
+        );
+        if (!textNode) continue;
+        const text = textNode.textContent;
+        const match = text.match(/^([^\p{L}\p{N}\s]*[\p{L}\p{N}](?:['’])?)/u);
+        const first = match?.[0];
+        const rest = text.slice(first?.length || 0);
+        if (!first || /[\uD800-\uDFFF]/.test(first)) continue;
+        const span = document.createElement("span");
+        span.textContent = first;
+        span.dataset.snapdomPseudo = "::first-letter";
+        const snapshot = snapshotComputedStyle(style);
+        const key = getStyleKey(snapshot, "span", compress);
+        styleMap.set(span, key);
+        const restNode = document.createTextNode(rest);
+        clone.replaceChild(restNode, textNode);
+        clone.insertBefore(span, restNode);
+        continue;
+      }
       const content = style.getPropertyValue("content");
       const bg = style.getPropertyValue("background-image");
-      const hasContent = content && content !== "none" && content !== '""' && content !== "''";
-      const hasBg = bg && bg.startsWith("url(");
-      if (hasContent || hasBg) {
+      const bgColor = style.getPropertyValue("background-color");
+      const hasContent = content !== "none";
+      const hasBg = bg && bg !== "none";
+      const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
+      if (hasContent || hasBg || hasBgColor) {
         const fontFamily = style.getPropertyValue("font-family");
         const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
         const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
@@ -545,27 +673,21 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
         styleMap.set(pseudoEl, key);
-        const isIconFont2 = fontFamily && /font.*awesome|material|bootstrap|glyphicons|ionicons|remixicon|simple-line-icons|octicons|feather|typicons|weathericons/i.test(
+        const isIconFont2 = fontFamily && /font.*awesome|material|bootstrap|glyphicons|ionicons|remixicon|simple-line-icons|octicons|feather|typicons|weathericons|lucide/i.test(
           fontFamily
         );
-        let cleanContent = parseContent(content);
+        const cleanContent = parseContent(content);
         if (!embedFonts && isIconFont2 && cleanContent.length === 1) {
           const imgEl = document.createElement("img");
-          imgEl.src = await iconToImage(
-            cleanContent,
-            fontFamily,
-            fontWeight,
-            fontSize,
-            color
-          );
+          imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
           imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
           pseudoEl.appendChild(imgEl);
         } else if (cleanContent.startsWith("url(")) {
           const rawUrl = extractURL(cleanContent);
-          if (rawUrl) {
+          if (rawUrl && rawUrl.trim() !== "") {
             try {
               const imgEl = document.createElement("img");
-              const dataUrl = await fetchImage(encodeURI(rawUrl));
+              const dataUrl = await fetchImage(safeEncodeURI(rawUrl));
               imgEl.src = dataUrl;
               imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
               pseudoEl.appendChild(imgEl);
@@ -576,24 +698,22 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         } else if (!isIconFont2 && cleanContent && cleanContent !== "none") {
           pseudoEl.textContent = cleanContent;
         }
-        if (hasBg && bg) {
-          const rawUrl = extractURL(bg);
-          if (rawUrl) {
-            try {
-              const dataUrl = await fetchImage(encodeURI(rawUrl));
-              pseudoEl.style.backgroundImage = `url(${dataUrl})`;
-            } catch (e) {
-              console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
-            }
+        if (hasBg) {
+          try {
+            const bgSplits = splitBackgroundImage(bg);
+            const newBgParts = await Promise.all(
+              bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
+            );
+            pseudoEl.style.backgroundImage = newBgParts.join(", ");
+          } catch (e) {
+            console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
           }
         }
+        if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
         const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
-        if (!hasContent2 && !hasBg) continue;
-        if (pseudo === "::before") {
-          clone.insertBefore(pseudoEl, clone.firstChild);
-        } else {
-          clone.appendChild(pseudoEl);
-        }
+        const hasVisibleBox = hasContent2 || hasBg || hasBgColor;
+        if (!hasVisibleBox) continue;
+        pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
       }
     } catch (e) {
       console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
@@ -667,6 +787,21 @@ async function prepareClone(element, compress = false, embedFonts = false) {
       cloneNode.appendChild(inner);
     }
   }
+  if (element === nodeMap.get(clone)) {
+    const computed = styleCache.get(element) || window.getComputedStyle(element);
+    styleCache.set(element, computed);
+    const transform = stripTranslate(computed.transform);
+    clone.style.margin = "0";
+    clone.style.position = "static";
+    clone.style.top = "auto";
+    clone.style.left = "auto";
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    clone.style.zIndex = "auto";
+    clone.style.float = "none";
+    clone.style.clear = "none";
+    clone.style.transform = transform || "";
+  }
   return { clone, classCSS, styleCache };
 }
 
@@ -702,28 +837,27 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
     const style = styleCache.get(srcNode) || getStyle(srcNode);
     if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
     const bg = style.getPropertyValue("background-image");
-    const bgSplits = bg.split(",");
-    for (let i = 0; i < bgSplits.length; i++) {
-      const rawUrl = extractURL(bgSplits[i]);
-      if (rawUrl) {
-        try {
-          let bgUrl = encodeURI(rawUrl);
-          let dataUrl;
-          if (bgCache.has(bgUrl)) {
-            dataUrl = bgCache.get(bgUrl);
-          } else {
-            const crossOrigin = options.crossOrigin ? options.crossOrigin(bgUrl) : "anonymous";
-            dataUrl = await fetchImage(bgUrl, 3e3, crossOrigin);
-            bgCache.set(bgUrl, dataUrl);
-          }
-          bgSplits[i] = `url(${dataUrl})`;
-        } catch {
-          bgSplits[i] = "none";
-        }
+    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]]);
       }
+      continue;
     }
-    if (bgSplits.some((s) => s.includes("url("))) {
-      cloneNode.style.backgroundImage = bgSplits.join(",");
+    const bgSplits = splitBackgroundImage(bg);
+    const newBgParts = await Promise.all(
+      bgSplits.map((entry) => inlineSingleBackgroundEntry(entry, options))
+    );
+    const hasRealBg = newBgParts.some(
+      (p) => p && p !== "none" && !/^url\(undefined\)/.test(p)
+    );
+    if (hasRealBg) {
+      cloneNode.style.backgroundImage = newBgParts.join(", ");
+    }
+    if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
+      cloneNode.style.backgroundColor = bgColor;
     }
     const sChildren = Array.from(srcNode.children);
     const cChildren = Array.from(cloneNode.children);
@@ -736,6 +870,7 @@ 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");
+  if (!(element instanceof Element)) throw new Error("captureDOM: Only Element nodes are supported");
   const { compress = true, embedFonts = false, fast = true, scale = 1 } = options;
   let clone, classCSS, styleCache;
   let fontsCSS = "";
@@ -781,11 +916,37 @@ async function captureDOM(element, options = {}) {
   await new Promise((resolve) => {
     idle(() => {
       const rect = element.getBoundingClientRect();
-      const w = Math.ceil(rect.width);
-      const h = Math.ceil(rect.height);
+      let w = rect.width;
+      let h = rect.height;
+      const hasW = Number.isFinite(options.width);
+      const hasH = Number.isFinite(options.height);
+      const hasScale = typeof scale === "number" && scale !== 1;
+      if (!hasScale) {
+        const aspect = rect.width / rect.height;
+        if (hasW && hasH) {
+          w = options.width;
+          h = options.height;
+        } else if (hasW) {
+          w = options.width;
+          h = w / aspect;
+        } else if (hasH) {
+          h = options.height;
+          w = h * aspect;
+        }
+      }
+      w = Math.ceil(w);
+      h = Math.ceil(h);
       clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
       clone.style.transformOrigin = "top left";
-      if (scale !== 1 && isSafari()) {
+      if (!hasScale && (hasW || hasH)) {
+        const originalW = rect.width;
+        const originalH = rect.height;
+        const scaleX = w / originalW;
+        const scaleY = h / originalH;
+        const existingTransform = clone.style.transform || "";
+        const scaleTransform = `scale(${scaleX}, ${scaleY})`;
+        clone.style.transform = `${scaleTransform} ${existingTransform}`.trim();
+      } else if (hasScale && isSafari()) {
         clone.style.scale = `${scale}`;
       }
       const svgNS = "http://www.w3.org/2000/svg";
@@ -939,7 +1100,6 @@ async function preCache(root = document, options = {}) {
     bgCache.clear();
     resourceCache.clear();
     baseCSSCache.clear();
-    computedStyleCache.clear();
     return;
   }
   await document.fonts.ready;
@@ -961,14 +1121,18 @@ async function preCache(root = document, options = {}) {
     }
   }
   for (const el of allEls) {
-    const bg = getComputedStyle(el).backgroundImage;
-    const url = extractURL(bg);
-    if (url && !bgCache.has(url)) {
-      const crossOrigin = crossOriginFn ? crossOriginFn(url) : "anonymous";
-      promises.push(
-        fetchImage(url, 3e3, crossOrigin).then((dataURL) => bgCache.set(url, dataURL)).catch(() => {
-        })
-      );
+    const bg = getStyle(el).backgroundImage;
+    if (bg && bg !== "none") {
+      const bgSplits = splitBackgroundImage(bg);
+      for (const entry of bgSplits) {
+        const isUrl = entry.startsWith("url(");
+        if (isUrl) {
+          promises.push(
+            inlineSingleBackgroundEntry(entry, { crossOrigin: crossOriginFn, skipInline: true }).catch(() => {
+            })
+          );
+        }
+      }
     }
   }
   if (embedFonts) {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",
   "scripts": {
     "test": "npx vitest run --browser.headless --reporter=verbose",
     "test:benchmark": "npx vitest bench --browser.headless --watch=false",
-    "compile-browser": "npx @zumerbox/build -n snapdom -j src/index.browser.js",
+    "compile-browser": "npx @zumerbox/build -n snapdom -j src/index.browser.js -t es2015",
     "compile-esm": "npx @zumerbox/build -n snapdom -j src/index.js -p neutral -x",
     "compile": "npm run compile-browser && npm run compile-esm",
     "build": "npm run compile && npm pack",
@@ -66,6 +66,7 @@
   "homepage": "https://zumerlab.github.io/snapdom/",
   "devDependencies": {
     "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
     "playwright": "^1.52.0"
   }
 }