darkreader 4.9.118 → 4.9.120

package/darkreader.mjs

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.118
+ * Dark Reader v4.9.120
  * https://darkreader.org/
  */
 
@@ -1010,54 +1010,155 @@ function parse($color) {
     }
     return null;
 }
-function getNumbers($color) {
+const C_0 = "0".charCodeAt(0);
+const C_9 = "9".charCodeAt(0);
+const C_e = "e".charCodeAt(0);
+const C_DOT = ".".charCodeAt(0);
+const C_PLUS = "+".charCodeAt(0);
+const C_MINUS = "-".charCodeAt(0);
+const C_SPACE = " ".charCodeAt(0);
+const C_COMMA = ",".charCodeAt(0);
+const C_SLASH = "/".charCodeAt(0);
+const C_PERCENT = "%".charCodeAt(0);
+function getNumbersFromString(input, range, units) {
     const numbers = [];
-    let prevPos = 0;
-    let isMining = false;
-    const startIndex = $color.indexOf("(");
-    $color = $color.substring(startIndex + 1, $color.length - 1);
-    for (let i = 0; i < $color.length; i++) {
-        const c = $color[i];
-        if ((c >= "0" && c <= "9") || c === "." || c === "+" || c === "-") {
-            isMining = true;
-        } else if (isMining && (c === " " || c === "," || c === "/")) {
-            numbers.push($color.substring(prevPos, i));
-            isMining = false;
-            prevPos = i + 1;
-        } else if (!isMining) {
-            prevPos = i + 1;
-        }
-    }
-    if (isMining) {
-        numbers.push($color.substring(prevPos, $color.length));
+    const searchStart = input.indexOf("(") + 1;
+    const searchEnd = input.length - 1;
+    let numStart = -1;
+    let unitStart = -1;
+    const push = (matchEnd) => {
+        const numEnd = unitStart > -1 ? unitStart : matchEnd;
+        const $num = input.slice(numStart, numEnd);
+        let n = parseFloat($num);
+        const r = range[numbers.length];
+        if (unitStart > -1) {
+            const unit = input.slice(unitStart, matchEnd);
+            const u = units[unit];
+            if (u != null) {
+                n *= r / u;
+            }
+        }
+        if (r > 1) {
+            n = Math.round(n);
+        }
+        numbers.push(n);
+        numStart = -1;
+        unitStart = -1;
+    };
+    for (let i = searchStart; i < searchEnd; i++) {
+        const c = input.charCodeAt(i);
+        const isNumChar =
+            (c >= C_0 && c <= C_9) ||
+            c === C_DOT ||
+            c === C_PLUS ||
+            c === C_MINUS ||
+            c === C_e;
+        const isDelimiter = c === C_SPACE || c === C_COMMA || c === C_SLASH;
+        if (isNumChar) {
+            if (numStart === -1) {
+                numStart = i;
+            }
+        } else if (numStart > -1) {
+            if (isDelimiter) {
+                push(i);
+            } else if (unitStart === -1) {
+                unitStart = i;
+            }
+        }
+    }
+    if (numStart > -1) {
+        push(searchEnd);
     }
     return numbers;
 }
-function getNumbersFromString(str, range, units) {
-    const raw = getNumbers(str);
-    const unitsList = Object.entries(units);
-    const numbers = raw
-        .map((r) => r.trim())
-        .map((r, i) => {
-            let n;
-            const unit = unitsList.find(([u]) => r.endsWith(u));
-            if (unit) {
-                n =
-                    (parseFloat(r.substring(0, r.length - unit[0].length)) /
-                        unit[1]) *
-                    range[i];
+const rgbRange = [255, 255, 255, 1];
+const rgbUnits = {"%": 100};
+function getRGBValues(input) {
+    const CHAR_CODE_0 = 48;
+    const length = input.length;
+    let i = 0;
+    let digitsCount = 0;
+    let digitSequence = false;
+    let floatDigitsCount = -1;
+    let delimiter = C_SPACE;
+    let channel = -1;
+    let result = null;
+    while (i < length) {
+        const c = input.charCodeAt(i);
+        if ((c >= C_0 && c <= C_9) || c === C_DOT) {
+            if (!digitSequence) {
+                digitSequence = true;
+                digitsCount = 0;
+                floatDigitsCount = -1;
+                channel++;
+                if (channel === 3 && result) {
+                    result[3] = 0;
+                }
+                if (channel > 3) {
+                    return null;
+                }
+            }
+            if (c === C_DOT) {
+                if (floatDigitsCount > 0) {
+                    return null;
+                }
+                floatDigitsCount = 0;
             } else {
-                n = parseFloat(r);
+                const d = c - CHAR_CODE_0;
+                if (!result) {
+                    result = [0, 0, 0, 1];
+                }
+                if (floatDigitsCount > -1) {
+                    floatDigitsCount++;
+                    result[channel] += d / 10 ** floatDigitsCount;
+                } else {
+                    digitsCount++;
+                    if (digitsCount > 3) {
+                        return null;
+                    }
+                    result[channel] = result[channel] * 10 + d;
+                }
             }
-            if (range[i] > 1) {
-                return Math.round(n);
+        } else if (c === C_PERCENT) {
+            if (
+                channel < 0 ||
+                channel > 3 ||
+                delimiter !== C_SPACE ||
+                !result
+            ) {
+                return null;
             }
-            return n;
-        });
-    return numbers;
+            result[channel] =
+                channel < 3
+                    ? Math.round((result[channel] * 255) / 100)
+                    : result[channel] / 100;
+            digitSequence = false;
+        } else {
+            digitSequence = false;
+            if (c === C_SPACE) {
+                if (channel === 0) {
+                    delimiter = c;
+                }
+            } else if (c === C_COMMA) {
+                if (channel === -1) {
+                    return null;
+                }
+                delimiter = C_COMMA;
+            } else if (c === C_SLASH) {
+                if (channel !== 2 || delimiter !== C_SPACE) {
+                    return null;
+                }
+            } else {
+                return null;
+            }
+        }
+        i++;
+    }
+    if (channel < 2 || channel > 3) {
+        return null;
+    }
+    return result;
 }
-const rgbRange = [255, 255, 255, 1];
-const rgbUnits = {"%": 100};
 function parseRGB($rgb) {
     const [r, g, b, a = 1] = getNumbersFromString($rgb, rgbRange, rgbUnits);
     if (r == null || g == null || b == null || a == null) {
@@ -1074,28 +1175,48 @@ function parseHSL($hsl) {
     }
     return hslToRGB({h, s, l, a});
 }
+const C_A = "A".charCodeAt(0);
+const C_F = "F".charCodeAt(0);
+const C_a = "a".charCodeAt(0);
+const C_f = "f".charCodeAt(0);
 function parseHex($hex) {
-    const h = $hex.substring(1);
-    switch (h.length) {
-        case 3:
-        case 4: {
-            const [r, g, b] = [0, 1, 2].map((i) =>
-                parseInt(`${h[i]}${h[i]}`, 16)
-            );
-            const a = h.length === 3 ? 1 : parseInt(`${h[3]}${h[3]}`, 16) / 255;
-            return {r, g, b, a};
+    const length = $hex.length;
+    const digitCount = length - 1;
+    const isShort = digitCount === 3 || digitCount === 4;
+    const isLong = digitCount === 6 || digitCount === 8;
+    if (!isShort && !isLong) {
+        return null;
+    }
+    const hex = (i) => {
+        const c = $hex.charCodeAt(i);
+        if (c >= C_A && c <= C_F) {
+            return c + 10 - C_A;
         }
-        case 6:
-        case 8: {
-            const [r, g, b] = [0, 2, 4].map((i) =>
-                parseInt(h.substring(i, i + 2), 16)
-            );
-            const a =
-                h.length === 6 ? 1 : parseInt(h.substring(6, 8), 16) / 255;
-            return {r, g, b, a};
+        if (c >= C_a && c <= C_f) {
+            return c + 10 - C_a;
+        }
+        return c - C_0;
+    };
+    let r;
+    let g;
+    let b;
+    let a = 1;
+    if (isShort) {
+        r = hex(1) * 17;
+        g = hex(2) * 17;
+        b = hex(3) * 17;
+        if (digitCount === 4) {
+            a = (hex(4) * 17) / 255;
+        }
+    } else {
+        r = hex(1) * 16 + hex(2);
+        g = hex(3) * 16 + hex(4);
+        b = hex(5) * 16 + hex(6);
+        if (digitCount === 8) {
+            a = (hex(7) * 16 + hex(8)) / 255;
         }
     }
-    return null;
+    return {r, g, b, a};
 }
 function getColorByName($color) {
     const n = knownColors.get($color);
@@ -1877,13 +1998,6 @@ const shorthandVarDepPropRegexps = isSafari
       })
     : null;
 function iterateCSSDeclarations(style, iterate) {
-    forEach(style, (property) => {
-        const value = style.getPropertyValue(property).trim();
-        if (!value) {
-            return;
-        }
-        iterate(property, value);
-    });
     const cssText = style.cssText;
     if (cssText.includes("var(")) {
         if (isSafari) {
@@ -1917,6 +2031,13 @@ function iterateCSSDeclarations(style, iterate) {
     ) {
         handleEmptyShorthand("border", style, iterate);
     }
+    forEach(style, (property) => {
+        const value = style.getPropertyValue(property).trim();
+        if (!value) {
+            return;
+        }
+        iterate(property, value);
+    });
 }
 function handleEmptyShorthand(shorthand, style, iterate) {
     const parentRule = style.parentRule;
@@ -2671,13 +2792,56 @@ const imageManager = new AsyncQueue();
 async function getImageDetails(url) {
     return new Promise(async (resolve, reject) => {
         try {
-            const dataURL = url.startsWith("data:")
-                ? url
-                : await getDataURL(url);
+            let dataURL = url.startsWith("data:") ? url : await getDataURL(url);
             const blob =
                 tryConvertDataURLToBlobSync(dataURL) ?? (await loadAsBlob(url));
             let image;
+            let useViewBox = false;
             if (dataURL.startsWith("data:image/svg+xml")) {
+                const commaIndex = dataURL.indexOf(",");
+                if (commaIndex >= 0) {
+                    let svgText = dataURL.slice(commaIndex + 1);
+                    const encoding = dataURL.slice(0, commaIndex).split(";")[1];
+                    if (encoding === "base64") {
+                        if (svgText.includes("%")) {
+                            svgText = decodeURIComponent(svgText);
+                        }
+                        svgText = atob(svgText);
+                    } else if (svgText.startsWith("%3c")) {
+                        svgText = decodeURIComponent(svgText);
+                    }
+                    if (svgText.startsWith("<svg ")) {
+                        const closingIndex = svgText.indexOf(">");
+                        const svgOpening = svgText
+                            .slice(0, closingIndex + 1)
+                            .toLocaleLowerCase();
+                        if (
+                            svgOpening.includes("viewbox=") &&
+                            !svgOpening.includes("width=") &&
+                            !svgOpening.includes("height=")
+                        ) {
+                            useViewBox = true;
+                            const viewboxIndex = svgOpening.indexOf("viewbox=");
+                            const quote = svgOpening[viewboxIndex + 8];
+                            const viewboxCloseIndex = svgOpening.indexOf(
+                                quote,
+                                viewboxIndex + 9
+                            );
+                            const viewBox = svgOpening
+                                .slice(viewboxIndex + 9, viewboxCloseIndex)
+                                .split(" ")
+                                .map((x) => parseFloat(x));
+                            if (
+                                viewBox.length === 4 &&
+                                !viewBox.some((x) => isNaN(x))
+                            ) {
+                                const width = viewBox[2] - viewBox[0];
+                                const height = viewBox[3] - viewBox[1];
+                                dataURL = `data:image/svg+xml;base64,${btoa(`<svg width="${width}" height="${height}" ${svgText.slice(5)}`)}`;
+                            }
+                        }
+                    }
+                }
                 image = await loadImage(dataURL);
             } else {
                 image =
@@ -2691,6 +2855,7 @@ async function getImageDetails(url) {
                     dataURL: analysis.isLarge ? "" : dataURL,
                     width: image.width,
                     height: image.height,
+                    useViewBox,
                     ...analysis
                 });
             });
@@ -2877,13 +3042,16 @@ function onCSPError(err) {
 }
 document.addEventListener("securitypolicyviolation", onCSPError);
 const objectURLs = new Set();
-function getFilteredImageURL({dataURL, width, height}, theme) {
+function getFilteredImageURL({dataURL, width, height, useViewBox}, theme) {
     if (dataURL.startsWith("data:image/svg+xml")) {
         dataURL = escapeXML(dataURL);
     }
     const matrix = getSVGFilterMatrixValue(theme);
+    const size = useViewBox
+        ? `viewBox="0 0 ${width} ${height}"`
+        : `width="${width}" height="${height}"`;
     const svg = [
-        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">`,
+        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${size}>`,
         "<defs>",
         '<filter id="darkreader-image-filter">',
         `<feColorMatrix type="matrix" values="${matrix}" />`,
@@ -2926,7 +3094,11 @@ function tryConvertDataURLToBlobSync(dataURL) {
     if (encoding !== "base64" || !mediaType) {
         return null;
     }
-    const characters = atob(dataURL.substring(commaIndex + 1));
+    let base64Content = dataURL.substring(commaIndex + 1);
+    if (base64Content.includes("%")) {
+        base64Content = decodeURIComponent(base64Content);
+    }
+    const characters = atob(base64Content);
     const bytes = new Uint8Array(characters.length);
     for (let i = 0; i < characters.length; i++) {
         bytes[i] = characters.charCodeAt(i);
@@ -2963,6 +3135,12 @@ function cleanImageProcessingCache() {
 function getPriority(ruleStyle, property) {
     return Boolean(ruleStyle && ruleStyle.getPropertyPriority(property));
 }
+const bgPropsToCopy = [
+    "background-clip",
+    "background-position",
+    "background-repeat",
+    "background-size"
+];
 function getModifiableCSSDeclaration(
     property,
     value,
@@ -3026,6 +3204,8 @@ function getModifiableCSSDeclaration(
         );
     } else if (property.includes("shadow")) {
         modifier = getShadowModifier(value);
+    } else if (bgPropsToCopy.includes(property) && value !== "initial") {
+        modifier = value;
     }
     if (!modifier) {
         return null;
@@ -4093,9 +4273,7 @@ class VariablesStore {
         }
         this.definedVars.add(varName);
         const isColor = Boolean(
-            value.match(rawRGBSpaceRegex) ||
-                value.match(rawRGBCommaRegex) ||
-                parseColorWithCache(value)
+            getRGBValues(value) || parseColorWithCache(value)
         );
         if (isColor) {
             this.unknownColorVars.add(varName);
@@ -4426,16 +4604,13 @@ const textColorProps = [
 function isTextColorProperty(property) {
     return textColorProps.includes(property);
 }
-const rawRGBSpaceRegex =
-    /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*(\/\s*\d+\.?\d*)?$/;
-const rawRGBCommaRegex = /^(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})$/;
 function parseRawColorValue(input) {
-    const match =
-        input.match(rawRGBSpaceRegex) ?? input.match(rawRGBCommaRegex);
-    if (match) {
-        const color = match[4]
-            ? `rgb(${match[1]} ${match[2]} ${match[3]} / ${match[4]})`
-            : `rgb(${match[1]}, ${match[2]}, ${match[3]})`;
+    const v = getRGBValues(input);
+    if (v) {
+        const color =
+            v[3] < 1
+                ? `rgb(${v[0]} ${v[1]} ${v[2]} / ${v[3]})`
+                : `rgb(${v[0]} ${v[1]} ${v[2]})`;
         return {isRaw: true, color};
     }
     return {isRaw: false, color: input};
@@ -4448,7 +4623,9 @@ function handleRawColorValue(input, theme, modifyFunction) {
         if (isRaw) {
             const outputInRGB = parseColorWithCache(outputColor);
             return outputInRGB
-                ? `${outputInRGB.r}, ${outputInRGB.g}, ${outputInRGB.b}`
+                ? Number.isNaN(outputInRGB.a) || outputInRGB.a === 1
+                    ? `${outputInRGB.r}, ${outputInRGB.g}, ${outputInRGB.b}`
+                    : `${outputInRGB.r}, ${outputInRGB.g}, ${outputInRGB.b}, ${outputInRGB.a}`
                 : outputColor;
         }
         return outputColor;
@@ -5466,8 +5643,8 @@ function shouldAnalyzeSVGAsImage(svg) {
     }
     const shouldAnalyze = Boolean(
         svg &&
-            (svg.getAttribute("class")?.includes("logo") ||
-                svg.parentElement?.getAttribute("class")?.includes("logo"))
+        (svg.getAttribute("class")?.includes("logo") ||
+            svg.parentElement?.getAttribute("class")?.includes("logo"))
     );
     svgAnalysisConditionCache.set(svg, shouldAnalyze);
     return shouldAnalyze;
@@ -5510,6 +5687,7 @@ function getSVGElementRoot(svgElement) {
     svgNodesRoots.set(svgElement, root);
     return root;
 }
+const inlineStringValueCache = new Map();
 function overrideInlineStyle(
     element,
     theme,
@@ -5537,6 +5715,13 @@ function overrideInlineStyle(
     }
     const unsetProps = new Set(Object.keys(overrides));
     function setCustomProp(targetCSSProp, modifierCSSProp, cssVal) {
+        const cachedStringValue = inlineStringValueCache
+            .get(modifierCSSProp)
+            ?.get(cssVal);
+        if (cachedStringValue) {
+            setStaticValue(cachedStringValue);
+            return;
+        }
         const mod = getModifiableCSSDeclaration(
             modifierCSSProp,
             cssVal,
@@ -5602,6 +5787,10 @@ function overrideInlineStyle(
             typeof mod.value === "function" ? mod.value(theme) : mod.value;
         if (typeof value === "string") {
             setStaticValue(value);
+            if (!inlineStringValueCache.has(modifierCSSProp)) {
+                inlineStringValueCache.set(modifierCSSProp, new Map());
+            }
+            inlineStringValueCache.get(modifierCSSProp).set(cssVal, value);
         } else if (value instanceof Promise) {
             setAsyncValue(value, cssVal);
         } else if (typeof value === "object") {
@@ -5676,13 +5865,16 @@ function overrideInlineStyle(
         let value = element.getAttribute("color");
         if (value.match(/^[0-9a-f]{3}$/i) || value.match(/^[0-9a-f]{6}$/i)) {
             value = `#${value}`;
+        } else if (value.match(/^#?[0-9a-f]{4}$/i)) {
+            const hex = value.startsWith("#") ? value.substring(1) : value;
+            value = `#${hex}00`;
         }
         setCustomProp("color", "color", value);
     }
     if (isSVGElement) {
         if (element.hasAttribute("fill")) {
             const value = element.getAttribute("fill");
-            if (value !== "none") {
+            if (value !== "none" && value !== "currentColor") {
                 if (!(element instanceof SVGTextElement)) {
                     const handleSVGElement = () => {
                         let isSVGSmall = false;
@@ -5947,17 +6139,28 @@ function createRAFSheetWatcher(
 }
 
 const STYLE_SELECTOR = 'style, link[rel*="stylesheet" i]:not([disabled])';
-function isFontsGoogleApiStyle(element) {
-    if (!element.href) {
+let ignoredCSSURLPatterns = [];
+function setIgnoredCSSURLs(patterns) {
+    ignoredCSSURLPatterns = patterns || [];
+}
+function shouldIgnoreCSSURL(url) {
+    if (!url || ignoredCSSURLPatterns.length === 0) {
         return false;
     }
-    try {
-        const elementURL = new URL(element.href);
-        return elementURL.hostname === "fonts.googleapis.com";
-    } catch (err) {
-        logInfo(`Couldn't construct ${element.href} as URL`);
-        return false;
+    for (const pattern of ignoredCSSURLPatterns) {
+        if (pattern.startsWith("^")) {
+            if (url.startsWith(pattern.slice(1))) {
+                return true;
+            }
+        } else if (pattern.endsWith("$")) {
+            if (url.endsWith(pattern.slice(0, -1))) {
+                return true;
+            }
+        } else if (url.includes(pattern)) {
+            return true;
+        }
     }
+    return false;
 }
 const hostsBreakingOnSVGStyleOverride = [
     "account.containerstore.com",
@@ -5977,7 +6180,7 @@ function shouldManageStyle(element) {
                 (isFirefox
                     ? !element.href.startsWith("moz-extension://")
                     : true) &&
-                !isFontsGoogleApiStyle(element))) &&
+                !shouldIgnoreCSSURL(element.href))) &&
         !element.classList.contains("darkreader") &&
         !ignoredMedia.includes(element.media.toLowerCase()) &&
         !element.classList.contains("stylus")
@@ -5994,7 +6197,7 @@ function getManageableStyles(node, results = [], deep = true) {
         forEach(node.querySelectorAll(STYLE_SELECTOR), (style) =>
             getManageableStyles(style, results, false)
         );
-        if (deep) {
+        if (deep && (node.children?.length > 0 || node.shadowRoot)) {
             iterateShadowHosts(node, (host) =>
                 getManageableStyles(host.shadowRoot, results, false)
             );
@@ -7120,10 +7323,23 @@ function watchForStylePositions(currentStyles, update, shadowRootDiscovered) {
             removedStyles,
             movedStyles
         });
+        const potentialHosts = new Set();
         additions.forEach((n) => {
+            if (n.parentElement) {
+                potentialHosts.add(n.parentElement);
+            }
+            if (n.previousElementSibling) {
+                potentialHosts.add(n.previousElementSibling);
+            }
             deepObserve(n);
             collectUndefinedElements(n);
         });
+        potentialHosts.forEach((el) => {
+            if (el.shadowRoot && !observedRoots.has(el)) {
+                subscribeForShadowRootChanges(el);
+                deepObserve(el.shadowRoot);
+            }
+        });
         additions.forEach(
             (node) => isCustomElement(node) && recordUndefinedElement(node)
         );
@@ -7237,6 +7453,14 @@ function watchForStylePositions(currentStyles, update, shadowRootDiscovered) {
     });
     document.addEventListener("__darkreader__isDefined", handleIsDefined);
     collectUndefinedElements(document);
+    addDOMReadyListener(() => {
+        forEach(document.body.children, (el) => {
+            if (el.shadowRoot && !observedRoots.has(el)) {
+                subscribeForShadowRootChanges(el);
+                deepObserve(el.shadowRoot);
+            }
+        });
+    });
 }
 function resetObservers() {
     observers.forEach((o) => o.disconnect());
@@ -7918,9 +8142,13 @@ function createOrUpdateDynamicThemeInternal(
         ignoredInlineSelectors = Array.isArray(fixes.ignoreInlineStyle)
             ? fixes.ignoreInlineStyle
             : [];
+        setIgnoredCSSURLs(
+            Array.isArray(fixes.ignoreCSSUrl) ? fixes.ignoreCSSUrl : []
+        );
     } else {
         ignoredImageAnalysisSelectors = [];
         ignoredInlineSelectors = [];
+        setIgnoredCSSURLs([]);
     }
     if (theme.immediateModify) {
         setIsDOMReady(() => {

package/index.d.ts

@@ -157,6 +157,14 @@ declare namespace DarkReader {
          * who are using the Dark Reader API.
          */
         disableStyleSheetsProxy: boolean;
+        /**
+         * List of stylesheet URL patterns to ignore.
+         * Stylesheets matching these patterns will not be processed by Dark Reader.
+         * - Simple string: matches if URL contains the string (e.g., "crisp")
+         * - Prefix with ^: matches if URL starts with pattern (e.g., "^https://client.crisp")
+         * - Suffix with $: matches if URL ends with pattern (e.g., ".css$")
+         */
+        ignoreCSSUrl: string[];
     }
 }