@impakers/debug 1.4.7 → 1.4.8

package/dist/react.js

@@ -1569,59 +1569,61 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/utils/capture-element.ts
-var UNSUPPORTED_RE = /oklab|oklch|color-mix/i;
+var UNSUPPORTED_RE = /\b(?:oklab|oklch|color-mix|(?<![\w-])lab|(?<![\w-])lch)\s*\(/i;
+var COLOR_PROPS = [
+  "color",
+  "background-color",
+  "background-image",
+  "background",
+  "border-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color",
+  "text-decoration-color",
+  "box-shadow",
+  "text-shadow",
+  "caret-color",
+  "column-rule-color",
+  "fill",
+  "stroke",
+  "stop-color",
+  "flood-color",
+  "lighting-color"
+];
 function sanitizeUnsupportedColors(clonedDoc) {
-  try {
-    for (let i = 0; i < clonedDoc.styleSheets.length; i++) {
-      try {
-        const sheet = clonedDoc.styleSheets[i];
-        const rules = sheet.cssRules || sheet.rules;
-        if (!rules) continue;
-        sanitizeCSSRules(sheet, rules);
-      } catch {
+  const allEls = clonedDoc.querySelectorAll("*");
+  for (let i = 0; i < allEls.length; i++) {
+    const el = allEls[i];
+    if (!el.style) continue;
+    let cs = null;
+    for (const prop of COLOR_PROPS) {
+      const inlineVal = el.style.getPropertyValue(prop);
+      if (inlineVal && UNSUPPORTED_RE.test(inlineVal)) {
+        el.style.setProperty(prop, getFallback(prop));
+        continue;
       }
-    }
-  } catch {
-  }
-  clonedDoc.querySelectorAll("style").forEach((styleEl) => {
-    const text = styleEl.textContent || "";
-    if (UNSUPPORTED_RE.test(text)) {
-      styleEl.textContent = text.replace(
-        /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
-        ""
-      );
-    }
-  });
-  clonedDoc.querySelectorAll("*").forEach((el) => {
-    const s = el.style;
-    if (!s?.cssText) return;
-    if (UNSUPPORTED_RE.test(s.cssText)) {
-      s.cssText = s.cssText.replace(
-        /[^;]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;]*/gi,
-        ""
-      );
-    }
-  });
-}
-function sanitizeCSSRules(sheet, rules) {
-  for (let j = rules.length - 1; j >= 0; j--) {
-    const rule = rules[j];
-    if ("cssRules" in rule && rule.cssRules) {
-      sanitizeCSSRules(sheet, rule.cssRules);
-      continue;
-    }
-    if (rule instanceof CSSStyleRule) {
-      const style = rule.style;
-      for (let k = style.length - 1; k >= 0; k--) {
-        const prop = style[k];
-        const val = style.getPropertyValue(prop);
-        if (UNSUPPORTED_RE.test(val)) {
-          style.setProperty(prop, "transparent");
+      if (!cs) {
+        try {
+          cs = clonedDoc.defaultView.getComputedStyle(el);
+        } catch {
+          break;
         }
       }
+      const val = cs.getPropertyValue(prop);
+      if (val && UNSUPPORTED_RE.test(val)) {
+        el.style.setProperty(prop, getFallback(prop));
+      }
     }
   }
 }
+function getFallback(prop) {
+  if (prop === "background-image" || prop === "background") return "none";
+  if (prop === "box-shadow" || prop === "text-shadow") return "none";
+  if (prop === "color") return "inherit";
+  return "transparent";
+}
 async function captureElement(el, options = {}) {
   const { quality = 0.7, maxScale = 2 } = options;
   const html2canvas = (await import("html2canvas")).default;