darkreader 4.9.80 → 4.9.82

package/README.md

@@ -155,7 +155,6 @@ Step 2: change Firefox's settings.
 A warning page may appear. Click `Accept the Risk and Continue` to proceed.
 - Search for and set `extensions.webextensions.restrictedDomains` to an empty value.
 - Create `extensions.webextensions.addons-restricted-domains@mozilla.com.disabled` with `boolean` as type and set its value to `true`.
-- Set `extensions.quarantinedDomains.enabled` to `false`.
 - Set `privacy.resistFingerprinting.block_mozAddonManager` to `true`.
 - Restart Firefox.
 

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.80
+ * Dark Reader v4.9.82
  * https://darkreader.org/
  */
 
@@ -777,6 +777,98 @@
         };
     }
 
+    function getMatches(regex, input, group = 0) {
+        const matches = [];
+        let m;
+        while ((m = regex.exec(input))) {
+            matches.push(m[group]);
+        }
+        return matches;
+    }
+    function escapeRegExpSpecialChars(input) {
+        return input.replaceAll(/[\^$.*+?\(\)\[\]{}|\-\\]/g, "\\$&");
+    }
+    function getParenthesesRange(input, searchStartIndex = 0) {
+        return getOpenCloseRange(input, searchStartIndex, "(", ")", []);
+    }
+    function getOpenCloseRange(
+        input,
+        searchStartIndex,
+        openToken,
+        closeToken,
+        excludeRanges
+    ) {
+        let indexOf;
+        if (excludeRanges.length === 0) {
+            indexOf = (token, pos) => input.indexOf(token, pos);
+        } else {
+            indexOf = (token, pos) =>
+                indexOfExcluding(input, token, pos, excludeRanges);
+        }
+        const {length} = input;
+        let depth = 0;
+        let firstOpenIndex = -1;
+        for (let i = searchStartIndex; i < length; i++) {
+            if (depth === 0) {
+                const openIndex = indexOf(openToken, i);
+                if (openIndex < 0) {
+                    break;
+                }
+                firstOpenIndex = openIndex;
+                depth++;
+                i = openIndex;
+            } else {
+                const closeIndex = indexOf(closeToken, i);
+                if (closeIndex < 0) {
+                    break;
+                }
+                const openIndex = indexOf(openToken, i);
+                if (openIndex < 0 || closeIndex <= openIndex) {
+                    depth--;
+                    if (depth === 0) {
+                        return {start: firstOpenIndex, end: closeIndex + 1};
+                    }
+                    i = closeIndex;
+                } else {
+                    depth++;
+                    i = openIndex;
+                }
+            }
+        }
+        return null;
+    }
+    function indexOfExcluding(input, search, position, excludeRanges) {
+        const i = input.indexOf(search, position);
+        const exclusion = excludeRanges.find((r) => i >= r.start && i < r.end);
+        if (exclusion) {
+            return indexOfExcluding(
+                input,
+                search,
+                exclusion.end,
+                excludeRanges
+            );
+        }
+        return i;
+    }
+    function splitExcluding(input, separator, excludeRanges) {
+        const parts = [];
+        let commaIndex = -1;
+        let currIndex = 0;
+        while (
+            (commaIndex = indexOfExcluding(
+                input,
+                separator,
+                currIndex,
+                excludeRanges
+            )) >= 0
+        ) {
+            parts.push(input.substring(currIndex, commaIndex).trim());
+            currIndex = commaIndex + 1;
+        }
+        parts.push(input.substring(currIndex).trim());
+        return parts;
+    }
+
     let anchor;
     const parsedURLCache = new Map();
     function fixBaseURL($url) {
@@ -828,21 +920,21 @@
         return url.pathname === location.pathname;
     }
 
-    function iterateCSSRules(rules, iterate, onMediaRuleError) {
+    function iterateCSSRules(rules, iterate, onImportError) {
         forEach(rules, (rule) => {
-            if (rule.selectorText) {
+            if (isStyleRule(rule)) {
                 iterate(rule);
-            } else if (rule.href) {
+            } else if (isImportRule(rule)) {
                 try {
                     iterateCSSRules(
                         rule.styleSheet.cssRules,
                         iterate,
-                        onMediaRuleError
+                        onImportError
                     );
                 } catch (err) {
-                    onMediaRuleError && onMediaRuleError();
+                    onImportError?.();
                 }
-            } else if (rule.media) {
+            } else if (isMediaRule(rule)) {
                 const media = Array.from(rule.media);
                 const isScreenOrAllOrQuery = media.some(
                     (m) =>
@@ -854,12 +946,14 @@
                     (m) => m.startsWith("print") || m.startsWith("speech")
                 );
                 if (isScreenOrAllOrQuery || !isPrintOrSpeech) {
-                    iterateCSSRules(rule.cssRules, iterate, onMediaRuleError);
+                    iterateCSSRules(rule.cssRules, iterate, onImportError);
                 }
-            } else if (rule.conditionText) {
+            } else if (isSupportsRule(rule)) {
                 if (CSS.supports(rule.conditionText)) {
-                    iterateCSSRules(rule.cssRules, iterate, onMediaRuleError);
+                    iterateCSSRules(rule.cssRules, iterate, onImportError);
                 }
+            } else if (isLayerRule(rule)) {
+                iterateCSSRules(rule.cssRules, iterate, onImportError);
             } else;
         });
     }
@@ -907,6 +1001,40 @@
                 });
             }
         }
+        if (
+            cssText.includes("background-color: ;") &&
+            !style.getPropertyValue("background")
+        ) {
+            handleEmptyShorthand("background", style, iterate);
+        }
+        if (
+            cssText.includes("border-") &&
+            cssText.includes("-color: ;") &&
+            !style.getPropertyValue("border")
+        ) {
+            handleEmptyShorthand("border", style, iterate);
+        }
+    }
+    function handleEmptyShorthand(shorthand, style, iterate) {
+        const parentRule = style.parentRule;
+        if (isStyleRule(parentRule)) {
+            const sourceCSSText =
+                parentRule.parentStyleSheet?.ownerNode?.textContent;
+            if (sourceCSSText) {
+                let escapedSelector = escapeRegExpSpecialChars(
+                    parentRule.selectorText
+                );
+                escapedSelector = escapedSelector.replaceAll(/\s+/g, "\\s*");
+                escapedSelector = escapedSelector.replaceAll(/::/g, "::?");
+                const regexp = new RegExp(
+                    `${escapedSelector}\\s*{[^}]*?${shorthand}:\\s*([^;}]+)`
+                );
+                const match = sourceCSSText.match(regexp);
+                if (match) {
+                    iterate(shorthand, match[1]);
+                }
+            }
+        }
     }
     const cssURLRegex = /url\((('.*?')|(".*?")|([^\)]*?))\)/g;
     const cssImportRegex =
@@ -935,14 +1063,92 @@
             }
         });
     }
-    const cssCommentsRegex = /\/\*[\s\S]*?\*\//g;
-    function removeCSSComments$1($css) {
-        return $css.replace(cssCommentsRegex, "");
-    }
     const fontFaceRegex = /@font-face\s*{[^}]*}/g;
     function replaceCSSFontFace($css) {
         return $css.replace(fontFaceRegex, "");
     }
+    const styleRules = new WeakSet();
+    const importRules = new WeakSet();
+    const mediaRules = new WeakSet();
+    const supportsRules = new WeakSet();
+    const layerRules = new WeakSet();
+    function isStyleRule(rule) {
+        if (!rule) {
+            return false;
+        }
+        if (styleRules.has(rule)) {
+            return true;
+        }
+        if (rule.selectorText) {
+            styleRules.add(rule);
+            return true;
+        }
+        return false;
+    }
+    function isImportRule(rule) {
+        if (!rule) {
+            return false;
+        }
+        if (styleRules.has(rule)) {
+            return false;
+        }
+        if (importRules.has(rule)) {
+            return true;
+        }
+        if (rule.href) {
+            importRules.add(rule);
+            return true;
+        }
+        return false;
+    }
+    function isMediaRule(rule) {
+        if (!rule) {
+            return false;
+        }
+        if (styleRules.has(rule)) {
+            return false;
+        }
+        if (mediaRules.has(rule)) {
+            return true;
+        }
+        if (rule.media) {
+            mediaRules.add(rule);
+            return true;
+        }
+        return false;
+    }
+    function isSupportsRule(rule) {
+        if (!rule) {
+            return false;
+        }
+        if (styleRules.has(rule)) {
+            return false;
+        }
+        if (supportsRules.has(rule)) {
+            return true;
+        }
+        if (rule instanceof CSSSupportsRule) {
+            supportsRules.add(rule);
+            return true;
+        }
+        return false;
+    }
+    function isLayerRule(rule) {
+        if (!rule) {
+            return false;
+        }
+        if (styleRules.has(rule)) {
+            return false;
+        }
+        if (layerRules.has(rule)) {
+            return true;
+        }
+        if (rule instanceof CSSLayerBlockRule) {
+            layerRules.add(rule);
+            return true;
+        }
+        return false;
+    }
 
     function evalMath(expression) {
         const rpnStack = [];
@@ -1006,94 +1212,8 @@
         ["/", new Operator(2, (left, right) => left / right)]
     ]);
 
-    function getMatches(regex, input, group = 0) {
-        const matches = [];
-        let m;
-        while ((m = regex.exec(input))) {
-            matches.push(m[group]);
-        }
-        return matches;
-    }
-    function getParenthesesRange(input, searchStartIndex = 0) {
-        return getOpenCloseRange(input, searchStartIndex, "(", ")", []);
-    }
-    function getOpenCloseRange(
-        input,
-        searchStartIndex,
-        openToken,
-        closeToken,
-        excludeRanges
-    ) {
-        let indexOf;
-        if (excludeRanges.length === 0) {
-            indexOf = (token, pos) => input.indexOf(token, pos);
-        } else {
-            indexOf = (token, pos) =>
-                indexOfExcluding(input, token, pos, excludeRanges);
-        }
-        const {length} = input;
-        let depth = 0;
-        let firstOpenIndex = -1;
-        for (let i = searchStartIndex; i < length; i++) {
-            if (depth === 0) {
-                const openIndex = indexOf(openToken, i);
-                if (openIndex < 0) {
-                    break;
-                }
-                firstOpenIndex = openIndex;
-                depth++;
-                i = openIndex;
-            } else {
-                const closeIndex = indexOf(closeToken, i);
-                if (closeIndex < 0) {
-                    break;
-                }
-                const openIndex = indexOf(openToken, i);
-                if (openIndex < 0 || closeIndex <= openIndex) {
-                    depth--;
-                    if (depth === 0) {
-                        return {start: firstOpenIndex, end: closeIndex + 1};
-                    }
-                    i = closeIndex;
-                } else {
-                    depth++;
-                    i = openIndex;
-                }
-            }
-        }
-        return null;
-    }
-    function indexOfExcluding(input, search, position, excludeRanges) {
-        const i = input.indexOf(search, position);
-        const exclusion = excludeRanges.find((r) => i >= r.start && i < r.end);
-        if (exclusion) {
-            return indexOfExcluding(
-                input,
-                search,
-                exclusion.end,
-                excludeRanges
-            );
-        }
-        return i;
-    }
-    function splitExcluding(input, separator, excludeRanges) {
-        const parts = [];
-        let commaIndex = -1;
-        let currIndex = 0;
-        while (
-            (commaIndex = indexOfExcluding(
-                input,
-                separator,
-                currIndex,
-                excludeRanges
-            )) >= 0
-        ) {
-            parts.push(input.substring(currIndex, commaIndex).trim());
-            currIndex = commaIndex + 1;
-        }
-        parts.push(input.substring(currIndex).trim());
-        return parts;
-    }
+    const isSystemDarkModeEnabled = () =>
+        matchMedia("(prefers-color-scheme: dark)").matches;
 
     const hslaParseCache = new Map();
     const rgbaParseCache = new Map();
@@ -1235,6 +1355,23 @@
         if ($color === "transparent") {
             return {r: 0, g: 0, b: 0, a: 0};
         }
+        if (
+            (c.startsWith("color(") || c.startsWith("color-mix(")) &&
+            c.endsWith(")")
+        ) {
+            return domParseColor(c);
+        }
+        if (c.startsWith("light-dark(") && c.endsWith(")")) {
+            const match = c.match(
+                /^light-dark\(\s*([a-z]+(\(.*\))?),\s*([a-z]+(\(.*\))?)\s*\)$/
+            );
+            if (match) {
+                const schemeColor = isSystemDarkModeEnabled()
+                    ? match[3]
+                    : match[1];
+                return parse(schemeColor);
+            }
+        }
         return null;
     }
     function getNumbers($color) {
@@ -1548,6 +1685,21 @@
     function getSRGBLightness(r, g, b) {
         return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
     }
+    let canvas$1;
+    let context$1;
+    function domParseColor($color) {
+        if (!context$1) {
+            canvas$1 = document.createElement("canvas");
+            canvas$1.width = 1;
+            canvas$1.height = 1;
+            context$1 = canvas$1.getContext("2d", {willReadFrequently: true});
+        }
+        context$1.fillStyle = $color;
+        context$1.fillRect(0, 0, 1, 1);
+        const d = context$1.getImageData(0, 0, 1, 1).data;
+        const color = `rgba(${d[0]}, ${d[1]}, ${d[2]}, ${(d[3] / 255).toFixed(2)})`;
+        return parseRGB(color);
+    }
 
     function scale(x, inLow, inHigh, outLow, outHigh) {
         return ((x - inLow) * (outHigh - outLow)) / (inHigh - inLow) + outLow;
@@ -2456,8 +2608,9 @@
         ignoreImageSelectors,
         isCancelled
     ) {
+        let modifier = null;
         if (property.startsWith("--")) {
-            const modifier = getVariableModifier(
+            modifier = getVariableModifier(
                 variablesStore,
                 property,
                 value,
@@ -2465,30 +2618,16 @@
                 ignoreImageSelectors,
                 isCancelled
             );
-            if (modifier) {
-                return {
-                    property,
-                    value: modifier,
-                    important: getPriority(rule.style, property),
-                    sourceValue: value
-                };
-            }
         } else if (value.includes("var(")) {
-            const modifier = getVariableDependantModifier(
+            modifier = getVariableDependantModifier(
                 variablesStore,
                 property,
                 value
             );
-            if (modifier) {
-                return {
-                    property,
-                    value: modifier,
-                    important: getPriority(rule.style, property),
-                    sourceValue: value
-                };
-            }
         } else if (property === "color-scheme") {
-            return null;
+            modifier = getColorSchemeModifier();
+        } else if (property === "scrollbar-color") {
+            modifier = getScrollbarColorModifier(value);
         } else if (
             (property.includes("color") &&
                 property !== "-webkit-print-color-adjust") ||
@@ -2496,45 +2635,51 @@
             property === "stroke" ||
             property === "stop-color"
         ) {
-            const modifier = getColorModifier(property, value, rule);
-            if (modifier) {
-                return {
-                    property,
-                    value: modifier,
-                    important: getPriority(rule.style, property),
-                    sourceValue: value
-                };
+            if (
+                property.startsWith("border") &&
+                property !== "border-color" &&
+                value === "initial"
+            ) {
+                const borderSideProp = property.substring(
+                    0,
+                    property.length - 6
+                );
+                const borderSideVal =
+                    rule.style.getPropertyValue(borderSideProp);
+                if (
+                    borderSideVal.startsWith("0px") ||
+                    borderSideVal === "none"
+                ) {
+                    property = borderSideProp;
+                    modifier = borderSideVal;
+                } else {
+                    modifier = value;
+                }
+            } else {
+                modifier = getColorModifier(property, value, rule);
             }
         } else if (
             property === "background-image" ||
             property === "list-style-image"
         ) {
-            const modifier = getBgImageModifier(
+            modifier = getBgImageModifier(
                 value,
                 rule,
                 ignoreImageSelectors,
                 isCancelled
             );
-            if (modifier) {
-                return {
-                    property,
-                    value: modifier,
-                    important: getPriority(rule.style, property),
-                    sourceValue: value
-                };
-            }
         } else if (property.includes("shadow")) {
-            const modifier = getShadowModifier(value);
-            if (modifier) {
-                return {
-                    property,
-                    value: modifier,
-                    important: getPriority(rule.style, property),
-                    sourceValue: value
-                };
-            }
+            modifier = getShadowModifier(value);
         }
-        return null;
+        if (!modifier) {
+            return null;
+        }
+        return {
+            property,
+            value: modifier,
+            important: getPriority(rule.style, property),
+            sourceValue: value
+        };
     }
     function joinSelectors(...selectors) {
         return selectors.filter(Boolean).join(", ");
@@ -2548,11 +2693,12 @@
             );
             lines.push("}");
         }
-        if (isCSSColorSchemePropSupported) {
+        if (isCSSColorSchemePropSupported && !isIFrame && theme.mode === 1) {
             lines.push("html {");
-            lines.push(
-                `    color-scheme: ${theme.mode === 1 ? "dark" : "dark light"} !important;`
-            );
+            lines.push(`    color-scheme: dark !important;`);
+            lines.push("}");
+            lines.push("iframe {");
+            lines.push(`    color-scheme: initial;`);
             lines.push("}");
         }
         const bgSelectors = joinSelectors(
@@ -2746,7 +2892,8 @@
         "initial",
         "currentcolor",
         "none",
-        "unset"
+        "unset",
+        "auto"
     ]);
     function getColorModifier(prop, value, rule) {
         if (unparsableColors.has(value.toLowerCase())) {
@@ -2766,14 +2913,14 @@
                 (rule.style.getPropertyValue("mask-image") &&
                     rule.style.getPropertyValue("mask-image") !== "none")
             ) {
-                return (filter) => modifyForegroundColor(rgb, filter);
+                return (theme) => modifyForegroundColor(rgb, theme);
             }
-            return (filter) => modifyBackgroundColor(rgb, filter);
+            return (theme) => modifyBackgroundColor(rgb, theme);
         }
         if (prop.includes("border") || prop.includes("outline")) {
-            return (filter) => modifyBorderColor(rgb, filter);
+            return (theme) => modifyBorderColor(rgb, theme);
         }
-        return (filter) => modifyForegroundColor(rgb, filter);
+        return (theme) => modifyForegroundColor(rgb, theme);
     }
     const imageDetailsCache = new Map();
     const awaitingForImageLoading = new Map();
@@ -3081,6 +3228,24 @@
         }
         return (theme) => shadowModifier(theme).result;
     }
+    function getScrollbarColorModifier(value) {
+        const colorsMatch = value.match(
+            /^\s*([a-z]+(\(.*\))?)\s+([a-z]+(\(.*\))?)\s*$/
+        );
+        if (!colorsMatch) {
+            return value;
+        }
+        const thumb = parseColorWithCache(colorsMatch[1]);
+        const track = parseColorWithCache(colorsMatch[3]);
+        if (!thumb || !track) {
+            return null;
+        }
+        return (theme) =>
+            `${modifyForegroundColor(thumb, theme)} ${modifyBackgroundColor(thumb, theme)}`;
+    }
+    function getColorSchemeModifier() {
+        return (theme) => (theme.mode === 0 ? "dark light" : "dark");
+    }
     function getVariableModifier(
         variablesStore,
         prop,
@@ -3196,7 +3361,9 @@
                             this.unknownColorVars.has(ref) ||
                             this.isVarType(
                                 ref,
-                                VAR_TYPE_TEXTCOLOR | VAR_TYPE_BORDERCOLOR
+                                VAR_TYPE_BGCOLOR |
+                                    VAR_TYPE_TEXTCOLOR |
+                                    VAR_TYPE_BORDERCOLOR
                             )
                         );
                     }) != null;
@@ -3419,21 +3586,20 @@
                             return modified;
                         }
                         return new Promise((resolve) => {
-                            const firstUnknownVar = unknownVars
-                                .values()
-                                .next().value;
-                            const callback = () => {
-                                this.unsubscribeFromVariableTypeChanges(
-                                    firstUnknownVar,
+                            for (const unknownVar of unknownVars.values()) {
+                                const callback = () => {
+                                    this.unsubscribeFromVariableTypeChanges(
+                                        unknownVar,
+                                        callback
+                                    );
+                                    const newValue = modify();
+                                    resolve(newValue);
+                                };
+                                this.subscribeForVarTypeChange(
+                                    unknownVar,
                                     callback
                                 );
-                                const newValue = modify();
-                                resolve(newValue);
-                            };
-                            this.subscribeForVarTypeChange(
-                                firstUnknownVar,
-                                callback
-                            );
+                            }
                         });
                     }
                     return modified;
@@ -3520,8 +3686,11 @@
                 return;
             }
             this.definedVars.add(varName);
-            const isColor =
-                rawValueRegex.test(value) || parseColorWithCache(value);
+            const isColor = Boolean(
+                value.match(rawRGBSpaceRegex) ||
+                    value.match(rawRGBCommaRegex) ||
+                    parseColorWithCache(value)
+            );
             if (isColor) {
                 this.unknownColorVars.add(varName);
             } else if (
@@ -3597,7 +3766,9 @@
                                 this.unknownColorVars.has(ref) ||
                                 this.isVarType(
                                     ref,
-                                    VAR_TYPE_TEXTCOLOR | VAR_TYPE_BORDERCOLOR
+                                    VAR_TYPE_BGCOLOR |
+                                        VAR_TYPE_TEXTCOLOR |
+                                        VAR_TYPE_BORDERCOLOR
                                 )
                             );
                         }) != null;
@@ -3802,23 +3973,20 @@
             property === "-webkit-text-fill-color"
         );
     }
-    const rawValueRegex = /^\d{1,3}, ?\d{1,3}, ?\d{1,3}$/;
-    function parseRawValue(color) {
-        if (rawValueRegex.test(color)) {
-            const splitted = color.split(",");
-            let resultInRGB = "rgb(";
-            splitted.forEach((number) => {
-                resultInRGB += `${number.trim()}, `;
-            });
-            resultInRGB = resultInRGB.substring(0, resultInRGB.length - 2);
-            resultInRGB += ")";
-            return {isRaw: true, color: resultInRGB};
+    const rawRGBSpaceRegex = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})$/;
+    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 = `rgb(${match[1]}, ${match[2]}, ${match[3]})`;
+            return {isRaw: true, color};
         }
-        return {isRaw: false, color: color};
+        return {isRaw: false, color: input};
     }
-    function handleRawValue(color, theme, modifyFunction) {
-        const {isRaw, color: newColor} = parseRawValue(color);
-        const rgb = parseColorWithCache(newColor);
+    function handleRawColorValue(input, theme, modifyFunction) {
+        const {isRaw, color} = parseRawColorValue(input);
+        const rgb = parseColorWithCache(color);
         if (rgb) {
             const outputColor = modifyFunction(rgb, theme);
             if (isRaw) {
@@ -3829,16 +3997,16 @@
             }
             return outputColor;
         }
-        return newColor;
+        return color;
     }
     function tryModifyBgColor(color, theme) {
-        return handleRawValue(color, theme, modifyBackgroundColor);
+        return handleRawColorValue(color, theme, modifyBackgroundColor);
     }
     function tryModifyTextColor(color, theme) {
-        return handleRawValue(color, theme, modifyForegroundColor);
+        return handleRawColorValue(color, theme, modifyForegroundColor);
     }
     function tryModifyBorderColor(color, theme) {
-        return handleRawValue(color, theme, modifyBorderColor);
+        return handleRawColorValue(color, theme, modifyBorderColor);
     }
     function insertVarValues(source, varValues, stack = new Set()) {
         let containsUnresolvedVar = false;
@@ -4408,6 +4576,11 @@
         }
     }
 
+    const cssCommentsRegex = /\/\*[\s\S]*?\*\//g;
+    function removeCSSComments(cssText) {
+        return cssText.replace(cssCommentsRegex, "");
+    }
+
     const themeCacheKeys = [
         "mode",
         "brightness",
@@ -4461,9 +4634,12 @@
                     let cssText = rule.cssText;
                     let textDiffersFromPrev = false;
                     notFoundCacheKeys.delete(cssText);
-                    if (rule.parentRule instanceof CSSMediaRule) {
+                    if (isMediaRule(rule.parentRule)) {
                         cssText += `;${rule.parentRule.media.mediaText}`;
                     }
+                    if (isLayerRule(rule.parentRule)) {
+                        cssText += `;${rule.parentRule.name}`;
+                    }
                     if (!rulesTextCache.has(cssText)) {
                         rulesTextCache.add(cssText);
                         textDiffersFromPrev = true;
@@ -4728,7 +4904,7 @@
             function buildStyleSheet() {
                 function createTarget(group, parent) {
                     const {rule} = group;
-                    if (rule instanceof CSSMediaRule) {
+                    if (isMediaRule(rule)) {
                         const {media} = rule;
                         const index = parent.cssRules.length;
                         parent.insertRule(
@@ -4737,6 +4913,12 @@
                         );
                         return parent.cssRules[index];
                     }
+                    if (isLayerRule(rule)) {
+                        const {name} = rule;
+                        const index = parent.cssRules.length;
+                        parent.insertRule(`@layer ${name} {}`, index);
+                        return parent.cssRules[index];
+                    }
                     return parent;
                 }
                 function iterateReadyRules(group, target, styleIterator) {
@@ -4991,9 +5173,7 @@
             if (!(element instanceof HTMLStyleElement)) {
                 return false;
             }
-            const cssText = removeCSSComments$1(
-                element.textContent ?? ""
-            ).trim();
+            const cssText = removeCSSComments(element.textContent ?? "").trim();
             return cssText.match(cssImportRegex);
         }
         function hasImports(cssRules, checkCrossOrigin) {
@@ -5367,7 +5547,7 @@
         });
     }
     async function replaceCSSImports(cssText, basePath, cache = new Map()) {
-        cssText = removeCSSComments$1(cssText);
+        cssText = removeCSSComments(cssText);
         cssText = replaceCSSFontFace(cssText);
         cssText = replaceCSSRelativeURLsWithAbsolute(cssText, basePath);
         const importMatches = getMatches(cssImportRegex, cssText);
@@ -6589,6 +6769,7 @@
         const enableCustomElementRegistryProxy = !(
             fixes && fixes.disableCustomElementRegistryProxy
         );
+        document.dispatchEvent(new CustomEvent("__darkreader__cleanUp"));
         {
             const proxyScript = createOrUpdateScript("darkreader--proxy");
             proxyScript.append(
@@ -6846,7 +7027,6 @@
         }
         changeMetaThemeColorWhenAvailable(theme);
     }
-    let pendingAdoptedVarMatch = false;
     function handleAdoptedStyleSheets(node) {
         if (isFirefox) {
             const fallback = getAdoptedStyleSheetFallback(node);
@@ -6864,42 +7044,9 @@
                 sheets.forEach((s) => {
                     variablesStore.addRulesForMatching(s.cssRules);
                 });
+                variablesStore.matchVariablesAndDependents();
                 newManger.render(theme, ignoredImageAnalysisSelectors);
-                pendingAdoptedVarMatch = true;
             });
-            potentialAdoptedStyleNodes.delete(node);
-        } else if (!potentialAdoptedStyleNodes.has(node)) {
-            potentialAdoptedStyleNodes.add(node);
-        }
-    }
-    const potentialAdoptedStyleNodes = new Set();
-    let potentialAdoptedStyleFrameId = null;
-    function watchPotentialAdoptedStyleNodes() {
-        potentialAdoptedStyleFrameId = requestAnimationFrame(() => {
-            let changed = false;
-            potentialAdoptedStyleNodes.forEach((node) => {
-                if (node.isConnected) {
-                    handleAdoptedStyleSheets(node);
-                    changed = true;
-                } else {
-                    potentialAdoptedStyleNodes.delete(node);
-                }
-            });
-            if (changed || pendingAdoptedVarMatch) {
-                variablesStore.matchVariablesAndDependents();
-                pendingAdoptedVarMatch = false;
-            }
-            watchPotentialAdoptedStyleNodes();
-        });
-    }
-    function stopWatchingPotentialAdoptedStyleNodes() {
-        potentialAdoptedStyleFrameId &&
-            cancelAnimationFrame(potentialAdoptedStyleFrameId);
-        potentialAdoptedStyleNodes.clear();
-        if (isFirefox) {
-            document.dispatchEvent(
-                new CustomEvent("__darkreader__stopAdoptedStyleSheetsWatcher")
-            );
         }
     }
     function getAdoptedStyleChangeToken(node) {
@@ -6971,7 +7118,6 @@
                 handleAdoptedStyleSheets(shadowRoot);
             }
         );
-        watchPotentialAdoptedStyleNodes();
         watchForInlineStyles(
             (element) => {
                 overrideInlineStyle(
@@ -7147,7 +7293,6 @@
         adoptedStyleManagers.splice(0);
         adoptedStyleFallbacks.forEach((fallback) => fallback.destroy());
         adoptedStyleFallbacks.clear();
-        stopWatchingPotentialAdoptedStyleNodes();
         metaObserver && metaObserver.disconnect();
         cleaners.forEach((clean) => clean());
         cleaners.splice(0);
@@ -7202,7 +7347,7 @@
                 };
                 rules.push(rule);
             }
-            ruleStart = brackets.end + 1;
+            ruleStart = brackets.end;
         });
         return rules;
     }
@@ -7229,9 +7374,6 @@
         }
         return ranges;
     }
-    function removeCSSComments(cssText) {
-        return cssText.trim().replace(/\/\*.*?\*\//g, "");
-    }
     function getTokenExclusionRanges(cssText) {
         const singleQuoteGoesFirst =
             cssText.indexOf("'") < cssText.indexOf('"');
@@ -7287,13 +7429,19 @@
         );
         return declarations;
     }
+    function isParsedStyleRule(rule) {
+        return "selectors" in rule;
+    }
 
     function formatCSS(cssText) {
         const parsed = parseCSS(cssText);
+        return formatParsedCSS(parsed);
+    }
+    function formatParsedCSS(parsed) {
         const lines = [];
         const tab = "    ";
         function formatRule(rule, indent) {
-            if (isStyleRule(rule)) {
+            if (isParsedStyleRule(rule)) {
                 formatStyleRule(rule, indent);
             } else {
                 formatAtRule(rule, indent);
@@ -7338,13 +7486,10 @@
             return aNorm.localeCompare(bNorm);
         });
     }
-    function isStyleRule(rule) {
-        return "selectors" in rule;
-    }
     function clearEmptyRules(rules) {
         for (let i = rules.length - 1; i >= 0; i--) {
             const rule = rules[i];
-            if (isStyleRule(rule)) {
+            if (isParsedStyleRule(rule)) {
                 if (rule.declarations.length === 0) {
                     rules.splice(i, 1);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkreader",
-  "version": "4.9.80",
+  "version": "4.9.82",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",
@@ -58,24 +58,21 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
-    "@rollup/pluginutils": "5.1.0",
     "@types/chrome": "0.0.263",
-    "@types/eslint": "8.56.5",
+    "@types/eslint": "8.56.6",
     "@types/jasmine": "5.1.4",
     "@types/jest": "29.5.12",
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
-    "@types/node": "20.11.25",
-    "@types/offscreencanvas": "2019.7.3",
+    "@types/node": "20.12.2",
     "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.4.0",
+    "@typescript-eslint/parser": "7.4.0",
     "chokidar": "3.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-local": "4.2.1",
-    "get-stream": "8.0.1",
     "globby": "14.0.1",
     "jasmine-core": "5.1.2",
     "jest": "29.7.0",
@@ -91,12 +88,12 @@
     "less": "4.2.0",
     "malevic": "0.20.1",
     "prettier": "3.2.5",
-    "puppeteer-core": "22.4.1",
-    "rollup": "4.12.1",
+    "puppeteer-core": "22.6.1",
+    "rollup": "4.13.2",
     "rollup-plugin-istanbul": "5.0.0",
     "ts-jest": "29.1.2",
     "tslib": "2.6.2",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "web-ext": "7.11.0",
     "ws": "8.16.0",
     "yazl": "2.5.1"