darkreader 4.9.79 → 4.9.80

package/darkreader.js

@@ -1,5 +1,5 @@
 /**
- * Dark Reader v4.9.79
+ * Dark Reader v4.9.80
  * https://darkreader.org/
  */
 
@@ -936,7 +936,7 @@
         });
     }
     const cssCommentsRegex = /\/\*[\s\S]*?\*\//g;
-    function removeCSSComments($css) {
+    function removeCSSComments$1($css) {
         return $css.replace(cssCommentsRegex, "");
     }
     const fontFaceRegex = /@font-face\s*{[^}]*}/g;
@@ -1014,51 +1014,29 @@
         }
         return matches;
     }
-    function formatCSS(text) {
-        function trimLeft(text) {
-            return text.replace(/^\s+/, "");
-        }
-        function getIndent(depth) {
-            if (depth === 0) {
-                return "";
-            }
-            return " ".repeat(4 * depth);
-        }
-        if (text.length < 50000) {
-            const emptyRuleRegexp = /[^{}]+{\s*}/;
-            while (emptyRuleRegexp.test(text)) {
-                text = text.replace(emptyRuleRegexp, "");
-            }
-        }
-        const css = text
-            .replace(/\s{2,}/g, " ")
-            .replace(/\{/g, "{\n")
-            .replace(/\}/g, "\n}\n")
-            .replace(/\;(?![^\(|\"]*(\)|\"))/g, ";\n")
-            .replace(/\,(?![^\(|\"]*(\)|\"))/g, ",\n")
-            .replace(/\n\s*\n/g, "\n")
-            .split("\n");
-        let depth = 0;
-        const formatted = [];
-        for (let x = 0, len = css.length; x < len; x++) {
-            const line = `${css[x]}\n`;
-            if (line.includes("{")) {
-                formatted.push(getIndent(depth++) + trimLeft(line));
-            } else if (line.includes("}")) {
-                formatted.push(getIndent(--depth) + trimLeft(line));
-            } else {
-                formatted.push(getIndent(depth) + trimLeft(line));
-            }
-        }
-        return formatted.join("").trim();
-    }
     function getParenthesesRange(input, searchStartIndex = 0) {
-        const length = input.length;
+        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 = input.indexOf("(", i);
+                const openIndex = indexOf(openToken, i);
                 if (openIndex < 0) {
                     break;
                 }
@@ -1066,17 +1044,17 @@
                 depth++;
                 i = openIndex;
             } else {
-                const closingIndex = input.indexOf(")", i);
-                if (closingIndex < 0) {
+                const closeIndex = indexOf(closeToken, i);
+                if (closeIndex < 0) {
                     break;
                 }
-                const openIndex = input.indexOf("(", i);
-                if (openIndex < 0 || closingIndex < openIndex) {
+                const openIndex = indexOf(openToken, i);
+                if (openIndex < 0 || closeIndex <= openIndex) {
                     depth--;
                     if (depth === 0) {
-                        return {start: firstOpenIndex, end: closingIndex + 1};
+                        return {start: firstOpenIndex, end: closeIndex + 1};
                     }
-                    i = closingIndex;
+                    i = closeIndex;
                 } else {
                     depth++;
                     i = openIndex;
@@ -1085,6 +1063,37 @@
         }
         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 hslaParseCache = new Map();
     const rgbaParseCache = new Map();
@@ -1923,11 +1932,11 @@
             poleBg
         );
     }
-    function modifyShadowColor(rgb, filter) {
-        return modifyBackgroundColor(rgb, filter);
+    function modifyShadowColor(rgb, theme) {
+        return modifyBackgroundColor(rgb, theme);
     }
-    function modifyGradientColor(rgb, filter) {
-        return modifyBackgroundColor(rgb, filter);
+    function modifyGradientColor(rgb, theme) {
+        return modifyBackgroundColor(rgb, theme);
     }
 
     function createTextStyle(config) {
@@ -2707,28 +2716,28 @@
         }
         return lines.join("\n");
     }
-    function getModifiedFallbackStyle(filter, {strict}) {
+    function getModifiedFallbackStyle(theme, {strict}) {
         const factory = defaultFallbackFactory;
-        return factory(filter, {strict});
+        return factory(theme, {strict});
     }
-    function defaultFallbackFactory(filter, {strict}) {
+    function defaultFallbackFactory(theme, {strict}) {
         const lines = [];
-        const isMicrosoft = ["microsoft.com", "docs.microsoft.com"].includes(
-            location.hostname
-        );
         lines.push(
-            `html, body, ${strict ? `body :not(iframe)${isMicrosoft ? ':not(div[style^="position:absolute;top:0;left:-"]' : ""}` : "body > :not(iframe)"} {`
+            `html, body, ${strict ? "body :not(iframe)" : "body > :not(iframe)"} {`
         );
         lines.push(
-            `    background-color: ${modifyBackgroundColor({r: 255, g: 255, b: 255}, filter)} !important;`
+            `    background-color: ${modifyBackgroundColor({r: 255, g: 255, b: 255}, theme)} !important;`
         );
         lines.push(
-            `    border-color: ${modifyBorderColor({r: 64, g: 64, b: 64}, filter)} !important;`
+            `    border-color: ${modifyBorderColor({r: 64, g: 64, b: 64}, theme)} !important;`
         );
         lines.push(
-            `    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, filter)} !important;`
+            `    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, theme)} !important;`
         );
         lines.push("}");
+        lines.push(`div[style*="background-color: rgb(135, 135, 135)"] {`);
+        lines.push(`    background-color: #878787 !important;`);
+        lines.push("}");
         return lines.join("\n");
     }
     const unparsableColors = new Set([
@@ -2824,26 +2833,26 @@
                     part = part.trim();
                     let rgb = parseColorWithCache(part);
                     if (rgb) {
-                        return (filter) => modifyGradientColor(rgb, filter);
+                        return (theme) => modifyGradientColor(rgb, theme);
                     }
                     const space = part.lastIndexOf(" ");
                     rgb = parseColorWithCache(part.substring(0, space));
                     if (rgb) {
-                        return (filter) =>
-                            `${modifyGradientColor(rgb, filter)} ${part.substring(space + 1)}`;
+                        return (theme) =>
+                            `${modifyGradientColor(rgb, theme)} ${part.substring(space + 1)}`;
                     }
                     const colorStopMatch = part.match(colorStopRegex);
                     if (colorStopMatch) {
                         rgb = parseColorWithCache(colorStopMatch[3]);
                         if (rgb) {
-                            return (filter) =>
-                                `${colorStopMatch[1]}(${colorStopMatch[2] ? `${colorStopMatch[2]}, ` : ""}${modifyGradientColor(rgb, filter)})`;
+                            return (theme) =>
+                                `${colorStopMatch[1]}(${colorStopMatch[2] ? `${colorStopMatch[2]}, ` : ""}${modifyGradientColor(rgb, theme)})`;
                         }
                     }
                     return () => part;
                 });
-                return (filter) => {
-                    return `${typeGradient}(${parts.map((modify) => modify(filter)).join(", ")})${hasComma ? ", " : ""}`;
+                return (theme) => {
+                    return `${typeGradient}(${parts.map((modify) => modify(theme)).join(", ")})${hasComma ? ", " : ""}`;
                 };
             };
             const getURLModifier = (urlValue) => {
@@ -2858,10 +2867,10 @@
                 const baseURL =
                     parentStyleSheet && parentStyleSheet.href
                         ? getCSSBaseBath(parentStyleSheet.href)
-                        : parentStyleSheet.ownerNode?.baseURI ||
+                        : parentStyleSheet?.ownerNode?.baseURI ||
                           location.origin;
                 url = getAbsoluteURL(baseURL, url);
-                return async (filter) => {
+                return async (theme) => {
                     if (isURLEmpty) {
                         return "url('')";
                     }
@@ -2909,7 +2918,7 @@
                     if (imageDetails) {
                         const bgImageValue = getBgImageValue(
                             imageDetails,
-                            filter
+                            theme
                         );
                         if (bgImageValue) {
                             return bgImageValue;
@@ -2924,7 +2933,7 @@
                     return `url("${url}")`;
                 };
             };
-            const getBgImageValue = (imageDetails, filter) => {
+            const getBgImageValue = (imageDetails, theme) => {
                 const {isDark, isLight, isTransparent, isLarge, width} =
                     imageDetails;
                 let result;
@@ -2937,25 +2946,25 @@
                 } else if (
                     isDark &&
                     isTransparent &&
-                    filter.mode === 1 &&
+                    theme.mode === 1 &&
                     width > 2
                 ) {
                     logInfo(`Inverting dark image ${logSrc}`);
                     const inverted = getFilteredImageURL(imageDetails, {
-                        ...filter,
-                        sepia: clamp(filter.sepia + 10, 0, 100)
+                        ...theme,
+                        sepia: clamp(theme.sepia + 10, 0, 100)
                     });
                     result = `url("${inverted}")`;
-                } else if (isLight && !isTransparent && filter.mode === 1) {
+                } else if (isLight && !isTransparent && theme.mode === 1) {
                     logInfo(`Dimming light image ${logSrc}`);
-                    const dimmed = getFilteredImageURL(imageDetails, filter);
+                    const dimmed = getFilteredImageURL(imageDetails, theme);
                     result = `url("${dimmed}")`;
-                } else if (filter.mode === 0 && isLight) {
+                } else if (theme.mode === 0 && isLight) {
                     logInfo(`Applying filter to image ${logSrc}`);
                     const filtered = getFilteredImageURL(imageDetails, {
-                        ...filter,
-                        brightness: clamp(filter.brightness - 10, 5, 200),
-                        sepia: clamp(filter.sepia + 10, 0, 100)
+                        ...theme,
+                        brightness: clamp(theme.brightness - 10, 5, 200),
+                        sepia: clamp(theme.sepia + 10, 0, 100)
                     });
                     result = `url("${filtered}")`;
                 } else {
@@ -3010,10 +3019,10 @@
                     }
                 }
             );
-            return (filter) => {
+            return (theme) => {
                 const results = modifiers
                     .filter(Boolean)
-                    .map((modify) => modify(filter));
+                    .map((modify) => modify(theme));
                 if (results.some((r) => r instanceof Promise)) {
                     return Promise.all(results).then((asyncResults) => {
                         return asyncResults.filter(Boolean).join("");
@@ -3048,12 +3057,12 @@
                     notParsed++;
                     return () => value.substring(prefixIndex, matchEnd);
                 }
-                return (filter) =>
-                    `${value.substring(prefixIndex, matchIndex)}${modifyShadowColor(rgb, filter)}${i === colorMatches.length - 1 ? value.substring(matchEnd) : ""}`;
+                return (theme) =>
+                    `${value.substring(prefixIndex, matchIndex)}${modifyShadowColor(rgb, theme)}${i === colorMatches.length - 1 ? value.substring(matchEnd) : ""}`;
             });
-            return (filter) => {
+            return (theme) => {
                 const modified = modifiers
-                    .map((modify) => modify(filter))
+                    .map((modify) => modify(theme))
                     .join("");
                 return {
                     matchesLength: colorMatches.length,
@@ -3947,7 +3956,8 @@
         "stop-color",
         "stroke",
         "bgcolor",
-        "color"
+        "color",
+        "background"
     ];
     const INLINE_STYLE_SELECTOR = INLINE_STYLE_ATTRS.map(
         (attr) => `[${attr}]`
@@ -4101,18 +4111,12 @@
         attrObservers.clear();
     }
     const inlineStyleCache = new WeakMap();
-    const filterProps = [
-        "brightness",
-        "contrast",
-        "grayscale",
-        "sepia",
-        "mode"
-    ];
+    const themeProps = ["brightness", "contrast", "grayscale", "sepia", "mode"];
     function getInlineStyleCacheKey(el, theme) {
         return INLINE_STYLE_ATTRS.map(
             (attr) => `${attr}="${el.getAttribute(attr)}"`
         )
-            .concat(filterProps.map((prop) => `${prop}="${theme[prop]}"`))
+            .concat(themeProps.map((prop) => `${prop}="${theme[prop]}"`))
             .join(" ");
     }
     function shouldIgnoreInlineStyle(element, selectors) {
@@ -4173,7 +4177,7 @@
                 setProps(mod.declarations);
                 mod.onTypeChange.addListener(setProps);
             }
-            function setAsyncValue(promise) {
+            function setAsyncValue(promise, sourceValue) {
                 promise.then((value) => {
                     if (
                         value &&
@@ -4182,6 +4186,20 @@
                     ) {
                         setStaticValue(value);
                     }
+                    if (value && targetCSSProp === "background-image") {
+                        if (
+                            (element === document.documentElement ||
+                                element === document.body) &&
+                            value === sourceValue
+                        ) {
+                            value = "none";
+                        }
+                        setStaticValue(value);
+                    }
+                    inlineStyleCache.set(
+                        element,
+                        getInlineStyleCacheKey(element, theme)
+                    );
                 });
             }
             const value =
@@ -4189,7 +4207,7 @@
             if (typeof value === "string") {
                 setStaticValue(value);
             } else if (value instanceof Promise) {
-                setAsyncValue(value);
+                setAsyncValue(value, cssVal);
             } else if (typeof value === "object") {
                 setVarDeclaration(value);
             }
@@ -4212,6 +4230,18 @@
             }
             setCustomProp("background-color", "background-color", value);
         }
+        if (
+            (element === document.documentElement ||
+                element === document.body) &&
+            element.hasAttribute("background")
+        ) {
+            const url = getAbsoluteURL(
+                location.href,
+                element.getAttribute("background") ?? ""
+            );
+            const value = `url("${url}")`;
+            setCustomProp("background-image", "background-image", value);
+        }
         if (element.hasAttribute("color") && element.rel !== "mask-icon") {
             let value = element.getAttribute("color");
             if (
@@ -4272,6 +4302,12 @@
         element.style &&
             iterateCSSDeclarations(element.style, (property, value) => {
                 if (property === "background-image" && value.includes("url")) {
+                    if (
+                        element === document.documentElement ||
+                        element === document.body
+                    ) {
+                        setCustomProp(property, property, value);
+                    }
                     return;
                 }
                 if (
@@ -4955,7 +4991,9 @@
             if (!(element instanceof HTMLStyleElement)) {
                 return false;
             }
-            const cssText = removeCSSComments(element.textContent ?? "").trim();
+            const cssText = removeCSSComments$1(
+                element.textContent ?? ""
+            ).trim();
             return cssText.match(cssImportRegex);
         }
         function hasImports(cssRules, checkCrossOrigin) {
@@ -5329,7 +5367,7 @@
         });
     }
     async function replaceCSSImports(cssText, basePath, cache = new Map()) {
-        cssText = removeCSSComments(cssText);
+        cssText = removeCSSComments$1(cssText);
         cssText = replaceCSSFontFace(cssText);
         cssText = replaceCSSRelativeURLsWithAbsolute(cssText, basePath);
         const importMatches = getMatches(cssImportRegex, cssText);
@@ -6138,7 +6176,9 @@
                     }
             );
         }
-        const shouldProxyChildNodes = location.hostname === "www.vy.no";
+        const shouldProxyChildNodes = ["brilliant.org", "www.vy.no"].includes(
+            location.hostname
+        );
         if (shouldProxyChildNodes) {
             overrideProperty(Node, "childNodes", {
                 get: (native) =>
@@ -6422,7 +6462,7 @@
     const adoptedStyleFallbacks = new Map();
     const adoptedStyleNodeIds = new WeakMap();
     const adoptedStyleChangeTokens = new WeakMap();
-    let filter = null;
+    let theme = null;
     let fixes = null;
     let isIFrame$1 = null;
     let ignoredImageAnalysisSelectors = [];
@@ -6462,22 +6502,22 @@
             "darkreader--fallback",
             document
         );
-        fallbackStyle.textContent = getModifiedFallbackStyle(filter, {
+        fallbackStyle.textContent = getModifiedFallbackStyle(theme, {
             strict: true
         });
         document.head.insertBefore(fallbackStyle, document.head.firstChild);
         setupNodePositionWatcher(fallbackStyle, "fallback");
         const userAgentStyle = createOrUpdateStyle("darkreader--user-agent");
         userAgentStyle.textContent = getModifiedUserAgentStyle(
-            filter,
+            theme,
             isIFrame$1,
-            filter.styleSystemControls
+            theme.styleSystemControls
         );
         document.head.insertBefore(userAgentStyle, fallbackStyle.nextSibling);
         setupNodePositionWatcher(userAgentStyle, "user-agent");
         const textStyle = createOrUpdateStyle("darkreader--text");
-        if (filter.useFont || filter.textStroke > 0) {
-            textStyle.textContent = createTextStyle(filter);
+        if (theme.useFont || theme.textStroke > 0) {
+            textStyle.textContent = createTextStyle(theme);
         } else {
             textStyle.textContent = "";
         }
@@ -6488,11 +6528,11 @@
             invertStyle.textContent = [
                 `${fixes.invert.join(", ")} {`,
                 `    filter: ${getCSSFilterValue({
-                    ...filter,
+                    ...theme,
                     contrast:
-                        filter.mode === 0
-                            ? filter.contrast
-                            : clamp(filter.contrast - 10, 0, 100)
+                        theme.mode === 0
+                            ? theme.contrast
+                            : clamp(theme.contrast - 10, 0, 100)
                 })} !important;`,
                 "}"
             ].join("\n");
@@ -6511,25 +6551,25 @@
         document.head.appendChild(overrideStyle);
         setupNodePositionWatcher(overrideStyle, "override");
         const variableStyle = createOrUpdateStyle("darkreader--variables");
-        const selectionColors = getSelectionColor(filter);
+        const selectionColors = getSelectionColor(theme);
         const {
             darkSchemeBackgroundColor,
             darkSchemeTextColor,
             lightSchemeBackgroundColor,
             lightSchemeTextColor,
             mode
-        } = filter;
+        } = theme;
         let schemeBackgroundColor =
             mode === 0 ? lightSchemeBackgroundColor : darkSchemeBackgroundColor;
         let schemeTextColor =
             mode === 0 ? lightSchemeTextColor : darkSchemeTextColor;
         schemeBackgroundColor = modifyBackgroundColor(
             parseColorWithCache(schemeBackgroundColor),
-            filter
+            theme
         );
         schemeTextColor = modifyForegroundColor(
             parseColorWithCache(schemeTextColor),
-            filter
+            theme
         );
         variableStyle.textContent = [
             `:root {`,
@@ -6572,11 +6612,11 @@
             invertStyle.textContent = [
                 `${fixes.invert.join(", ")} {`,
                 `    filter: ${getCSSFilterValue({
-                    ...filter,
+                    ...theme,
                     contrast:
-                        filter.mode === 0
-                            ? filter.contrast
-                            : clamp(filter.contrast - 10, 0, 100)
+                        theme.mode === 0
+                            ? theme.contrast
+                            : clamp(theme.contrast - 10, 0, 100)
                 })} !important;`,
                 "}"
             ].join("\n");
@@ -6610,9 +6650,9 @@
         observer.observe(root, {childList: true});
     }
     function createShadowStaticStyleOverrides(root) {
-        const uninit = root.firstChild === null;
+        const delayed = root.firstChild === null;
         createShadowStaticStyleOverridesInner(root);
-        if (uninit) {
+        if (delayed) {
             delayedCreateShadowStaticStyleOverrides(root);
         }
     }
@@ -6620,7 +6660,7 @@
         return $cssText.replace(/\${(.+?)}/g, (_, $color) => {
             const color = parseColorWithCache($color);
             if (color) {
-                return modifyColor(color, filter);
+                return modifyColor(color, theme);
             }
             return $color;
         });
@@ -6646,12 +6686,12 @@
         variablesStore.matchVariablesAndDependents();
         variablesStore.setOnRootVariableChange(() => {
             const rootVarsStyle = createOrUpdateStyle("darkreader--root-vars");
-            variablesStore.putRootVars(rootVarsStyle, filter);
+            variablesStore.putRootVars(rootVarsStyle, theme);
         });
         const rootVarsStyle = createOrUpdateStyle("darkreader--root-vars");
-        variablesStore.putRootVars(rootVarsStyle, filter);
+        variablesStore.putRootVars(rootVarsStyle, theme);
         styleManagers.forEach((manager) =>
-            manager.render(filter, ignoredImageAnalysisSelectors)
+            manager.render(theme, ignoredImageAnalysisSelectors)
         );
         if (loadingStyles.size === 0) {
             cleanFallbackStyle();
@@ -6672,7 +6712,7 @@
         inlineStyleElements.forEach((el) =>
             overrideInlineStyle(
                 el,
-                filter,
+                theme,
                 ignoredInlineSelectors,
                 ignoredImageAnalysisSelectors
             )
@@ -6736,7 +6776,7 @@
                 );
                 if (!fallbackStyle.textContent) {
                     fallbackStyle.textContent = getModifiedFallbackStyle(
-                        filter,
+                        theme,
                         {strict: false}
                     );
                 }
@@ -6758,7 +6798,7 @@
             }
             variablesStore.addRulesForMatching(details.rules);
             variablesStore.matchVariablesAndDependents();
-            manager.render(filter, ignoredImageAnalysisSelectors);
+            manager.render(theme, ignoredImageAnalysisSelectors);
         }
         const manager = manageStyle(element, {
             update,
@@ -6777,10 +6817,10 @@
     }
     const throttledRenderAllStyles = throttle((callback) => {
         styleManagers.forEach((manager) =>
-            manager.render(filter, ignoredImageAnalysisSelectors)
+            manager.render(theme, ignoredImageAnalysisSelectors)
         );
         adoptedStyleManagers.forEach((manager) =>
-            manager.render(filter, ignoredImageAnalysisSelectors)
+            manager.render(theme, ignoredImageAnalysisSelectors)
         );
         callback && callback();
     });
@@ -6799,16 +6839,15 @@
     }
     function createThemeAndWatchForUpdates() {
         createStaticStyleOverrides();
-        if (!documentIsVisible() && !filter.immediateModify) {
+        if (!documentIsVisible() && !theme.immediateModify) {
             setDocumentVisibilityListener(runDynamicStyle);
         } else {
             runDynamicStyle();
         }
-        changeMetaThemeColorWhenAvailable(filter);
+        changeMetaThemeColorWhenAvailable(theme);
     }
     let pendingAdoptedVarMatch = false;
     function handleAdoptedStyleSheets(node) {
-        const theme = filter;
         if (isFirefox) {
             const fallback = getAdoptedStyleSheetFallback(node);
             fallback.render(theme, ignoredImageAnalysisSelectors);
@@ -6920,7 +6959,7 @@
                     });
                 variablesStore.matchVariablesAndDependents();
                 newManagers.forEach((manager) =>
-                    manager.render(filter, ignoredImageAnalysisSelectors)
+                    manager.render(theme, ignoredImageAnalysisSelectors)
                 );
                 newManagers.forEach((manager) => manager.watch());
                 stylesToRestore.forEach((style) =>
@@ -6937,7 +6976,7 @@
             (element) => {
                 overrideInlineStyle(
                     element,
-                    filter,
+                    theme,
                     ignoredInlineSelectors,
                     ignoredImageAnalysisSelectors
                 );
@@ -6948,7 +6987,7 @@
                         const rootVarsStyle = createOrUpdateStyle(
                             "darkreader--root-vars"
                         );
-                        variablesStore.putRootVars(rootVarsStyle, filter);
+                        variablesStore.putRootVars(rootVarsStyle, theme);
                     }
                 }
             },
@@ -6961,7 +7000,7 @@
                     forEach(inlineStyleElements, (el) =>
                         overrideInlineStyle(
                             el,
-                            filter,
+                            theme,
                             ignoredInlineSelectors,
                             ignoredImageAnalysisSelectors
                         )
@@ -7011,11 +7050,11 @@
         return false;
     }
     function createOrUpdateDynamicThemeInternal(
-        filterConfig,
+        themeConfig,
         dynamicThemeFixes,
         iframe
     ) {
-        filter = filterConfig;
+        theme = themeConfig;
         fixes = dynamicThemeFixes;
         if (fixes) {
             ignoredImageAnalysisSelectors = Array.isArray(
@@ -7030,7 +7069,7 @@
             ignoredImageAnalysisSelectors = [];
             ignoredInlineSelectors = [];
         }
-        if (filter.immediateModify) {
+        if (theme.immediateModify) {
             setIsDOMReady(() => {
                 return true;
             });
@@ -7047,7 +7086,7 @@
             );
             document.documentElement.setAttribute(
                 "data-darkreader-scheme",
-                filter.mode ? "dark" : "dimmed"
+                theme.mode ? "dark" : "dimmed"
             );
             createThemeAndWatchForUpdates();
         } else {
@@ -7056,7 +7095,7 @@
                     "darkreader--fallback"
                 );
                 document.documentElement.appendChild(fallbackStyle);
-                fallbackStyle.textContent = getModifiedFallbackStyle(filter, {
+                fallbackStyle.textContent = getModifiedFallbackStyle(theme, {
                     strict: true
                 });
             }
@@ -7123,6 +7162,201 @@
         clearColorCache();
     }
 
+    function parseCSS(cssText) {
+        cssText = removeCSSComments(cssText);
+        cssText = cssText.trim();
+        if (!cssText) {
+            return [];
+        }
+        const rules = [];
+        const excludeRanges = getTokenExclusionRanges(cssText);
+        const bracketRanges = getAllOpenCloseRanges(
+            cssText,
+            "{",
+            "}",
+            excludeRanges
+        );
+        let ruleStart = 0;
+        bracketRanges.forEach((brackets) => {
+            const key = cssText.substring(ruleStart, brackets.start).trim();
+            const content = cssText.substring(
+                brackets.start + 1,
+                brackets.end - 1
+            );
+            if (key.startsWith("@")) {
+                const typeEndIndex = key.search(/[\s\(]/);
+                const rule = {
+                    type:
+                        typeEndIndex < 0 ? key : key.substring(0, typeEndIndex),
+                    query:
+                        typeEndIndex < 0
+                            ? ""
+                            : key.substring(typeEndIndex).trim(),
+                    rules: parseCSS(content)
+                };
+                rules.push(rule);
+            } else {
+                const rule = {
+                    selectors: parseSelectors(key),
+                    declarations: parseDeclarations(content)
+                };
+                rules.push(rule);
+            }
+            ruleStart = brackets.end + 1;
+        });
+        return rules;
+    }
+    function getAllOpenCloseRanges(
+        input,
+        openToken,
+        closeToken,
+        excludeRanges = []
+    ) {
+        const ranges = [];
+        let i = 0;
+        let range;
+        while (
+            (range = getOpenCloseRange(
+                input,
+                i,
+                openToken,
+                closeToken,
+                excludeRanges
+            ))
+        ) {
+            ranges.push(range);
+            i = range.end;
+        }
+        return ranges;
+    }
+    function removeCSSComments(cssText) {
+        return cssText.trim().replace(/\/\*.*?\*\//g, "");
+    }
+    function getTokenExclusionRanges(cssText) {
+        const singleQuoteGoesFirst =
+            cssText.indexOf("'") < cssText.indexOf('"');
+        const firstQuote = singleQuoteGoesFirst ? "'" : '"';
+        const secondQuote = singleQuoteGoesFirst ? '"' : "'";
+        const excludeRanges = getAllOpenCloseRanges(
+            cssText,
+            firstQuote,
+            firstQuote
+        );
+        excludeRanges.push(
+            ...getAllOpenCloseRanges(
+                cssText,
+                secondQuote,
+                secondQuote,
+                excludeRanges
+            )
+        );
+        excludeRanges.push(
+            ...getAllOpenCloseRanges(cssText, "[", "]", excludeRanges)
+        );
+        excludeRanges.push(
+            ...getAllOpenCloseRanges(cssText, "(", ")", excludeRanges)
+        );
+        return excludeRanges;
+    }
+    function parseSelectors(selectorText) {
+        const excludeRanges = getTokenExclusionRanges(selectorText);
+        return splitExcluding(selectorText, ",", excludeRanges);
+    }
+    function parseDeclarations(cssDeclarationsText) {
+        const declarations = [];
+        const excludeRanges = getTokenExclusionRanges(cssDeclarationsText);
+        splitExcluding(cssDeclarationsText, ";", excludeRanges).forEach(
+            (part) => {
+                const colonIndex = part.indexOf(":");
+                if (colonIndex > 0) {
+                    const importantIndex = part.indexOf("!important");
+                    declarations.push({
+                        property: part.substring(0, colonIndex).trim(),
+                        value: part
+                            .substring(
+                                colonIndex + 1,
+                                importantIndex > 0
+                                    ? importantIndex
+                                    : part.length
+                            )
+                            .trim(),
+                        important: importantIndex > 0
+                    });
+                }
+            }
+        );
+        return declarations;
+    }
+
+    function formatCSS(cssText) {
+        const parsed = parseCSS(cssText);
+        const lines = [];
+        const tab = "    ";
+        function formatRule(rule, indent) {
+            if (isStyleRule(rule)) {
+                formatStyleRule(rule, indent);
+            } else {
+                formatAtRule(rule, indent);
+            }
+        }
+        function formatAtRule({type, query, rules}, indent) {
+            lines.push(`${indent}${type} ${query} {`);
+            rules.forEach((child) => formatRule(child, `${indent}${tab}`));
+            lines.push(`${indent}}`);
+        }
+        function formatStyleRule({selectors, declarations}, indent) {
+            const lastSelectorIndex = selectors.length - 1;
+            selectors.forEach((selector, i) => {
+                lines.push(
+                    `${indent}${selector}${i < lastSelectorIndex ? "," : " {"}`
+                );
+            });
+            const sorted = sortDeclarations(declarations);
+            sorted.forEach(({property, value, important}) => {
+                lines.push(
+                    `${indent}${tab}${property}: ${value}${important ? " !important" : ""};`
+                );
+            });
+            lines.push(`${indent}}`);
+        }
+        clearEmptyRules(parsed);
+        parsed.forEach((rule) => formatRule(rule, ""));
+        return lines.join("\n");
+    }
+    function sortDeclarations(declarations) {
+        const prefixRegex = /^-[a-z]-/;
+        return [...declarations].sort((a, b) => {
+            const aProp = a.property;
+            const bProp = b.property;
+            const aPrefix = aProp.match(prefixRegex)?.[0] ?? "";
+            const bPrefix = bProp.match(prefixRegex)?.[0] ?? "";
+            const aNorm = aPrefix ? aProp.replace(prefixRegex, "") : aProp;
+            const bNorm = bPrefix ? bProp.replace(prefixRegex, "") : bProp;
+            if (aNorm === bNorm) {
+                return aPrefix.localeCompare(bPrefix);
+            }
+            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 (rule.declarations.length === 0) {
+                    rules.splice(i, 1);
+                }
+            } else {
+                clearEmptyRules(rule.rules);
+                if (rule.rules.length === 0) {
+                    rules.splice(i, 1);
+                }
+            }
+        }
+    }
+
     const blobRegex = /url\(\"(blob\:.*?)\"\)/g;
     async function replaceBlobs(text) {
         const promises = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "darkreader",
-  "version": "4.9.79",
+  "version": "4.9.80",
   "description": "Dark mode for every website",
   "scripts": {
     "api": "node --max-old-space-size=3072 tasks/cli.js build --api",
@@ -15,7 +15,7 @@
     "prepublishOnly": "npm test && npm run api",
     "release": "npm test && npm run lint && node tasks/cli.js build --release",
     "test": "npm run test:unit",
-    "test:all": "npm run test:unit; npm run test:browser; npm run test:inject; npm run test:project",
+    "test:all": "npm run test:unit; npm run test:browser; npm run test:inject",
     "test:browser": "npm run test:chrome && npm run test:chrome-mv3 && npm run test:firefox",
     "test:chrome": "node tasks/cli.js build --debug --test --chrome-mv2 && jest --config=tests/browser/jest.config.mjs --runInBand",
     "test:chrome-mv3": "node tasks/cli.js build --debug --test --chrome-mv3 && jest --config=tests/browser/jest.config.chrome-mv3.mjs --runInBand",
@@ -24,10 +24,8 @@
     "test:firefox": "node tasks/cli.js build --debug --test --firefox-mv2 && jest --config=tests/browser/jest.config.firefox.mjs --runInBand",
     "test:inject": "node --max-old-space-size=3072 node_modules/.bin/karma start ./tests/inject/karma.conf.cjs",
     "test:inject:debug": "node --max-old-space-size=3072 node_modules/.bin/karma start ./tests/inject/karma.conf.cjs --debug",
-    "test:project": "jest --config=tests/project/jest.config.mjs",
     "test:unit": "jest --config=tests/unit/jest.config.mjs",
     "test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest --config=tests/unit/jest.config.mjs --runInBand --no-cache --watch",
-    "test:update-snapshots": "npm run test -- --updateSnapshot && npm run test:project -- --updateSnapshot",
     "translate-en-message": "node ./tasks/translate.js --message",
     "translate-new-en-messages": "node ./tasks/translate.js --new-messages",
     "deno:bootstrap": "deno run --allow-read=./ --allow-sys=uid --allow-write=deno.json tasks/deno.js"
@@ -61,17 +59,17 @@
     "@rollup/plugin-replace": "5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
     "@rollup/pluginutils": "5.1.0",
-    "@types/chrome": "0.0.261",
-    "@types/eslint": "8.56.3",
+    "@types/chrome": "0.0.263",
+    "@types/eslint": "8.56.5",
     "@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.20",
+    "@types/node": "20.11.25",
     "@types/offscreencanvas": "2019.7.3",
     "@types/ws": "8.5.10",
-    "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@typescript-eslint/parser": "7.0.2",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
     "chokidar": "3.6.0",
     "eslint": "8.57.0",
     "eslint-plugin-compat": "4.2.0",
@@ -85,7 +83,7 @@
     "karma": "6.4.3",
     "karma-chrome-launcher": "3.2.0",
     "karma-coverage": "2.2.1",
-    "karma-firefox-launcher": "2.1.2",
+    "karma-firefox-launcher": "2.1.3",
     "karma-jasmine": "5.1.0",
     "karma-rollup-preprocessor": "7.0.8",
     "karma-safari-launcher": "1.0.0",
@@ -93,12 +91,12 @@
     "less": "4.2.0",
     "malevic": "0.20.1",
     "prettier": "3.2.5",
-    "puppeteer-core": "22.2.0",
-    "rollup": "4.12.0",
+    "puppeteer-core": "22.4.1",
+    "rollup": "4.12.1",
     "rollup-plugin-istanbul": "5.0.0",
     "ts-jest": "29.1.2",
     "tslib": "2.6.2",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "web-ext": "7.11.0",
     "ws": "8.16.0",
     "yazl": "2.5.1"