Remember CSSOM tweaks importance

lindylearn · Jun 27, 2022 · c884079 · c884079
1 parent c66f3cb
commit c884079
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/source/content-script/modifications/CSSOM/responsiveStyle.ts b/source/content-script/modifications/CSSOM/responsiveStyle.ts
@@ -73,7 +73,8 @@ export default class ResponsiveStyleModifier implements PageModifier {
         }
     }
 
-    private expiredRulesOriginalStyles: object[] = [];
+    private expiredRulesOriginalStyles: { [key: string]: [string, boolean] }[] =
+        [];
     private addedRules: CSSStyleRule[] = [];
     enableResponsiveStyles() {
         // disable desktop-only styles
@@ -85,7 +86,10 @@ export default class ResponsiveStyleModifier implements PageModifier {
             // TODO measure performance of this
             const obj = {};
             for (const key of rule.style) {
-                obj[key] = rule.style.getPropertyValue(key);
+                obj[key] = [
+                    rule.style.getPropertyValue(key),
+                    rule.style.getPropertyPriority(key) === "important",
+                ];
             }
             this.expiredRulesOriginalStyles.push(obj);
 
@@ -109,10 +113,14 @@ export default class ResponsiveStyleModifier implements PageModifier {
 
     disableResponsiveStyles() {
         this.expiredRules.map((rule, index) => {
-            for (const [key, value] of Object.entries(
+            for (const [key, [value, isImportant]] of Object.entries(
                 this.expiredRulesOriginalStyles[index]
             )) {
-                rule.style.setProperty(key, value);
+                rule.style.setProperty(
+                    key,
+                    value,
+                    isImportant ? "important" : ""
+                );
             }
         });
 

diff --git a/source/content-script/modifications/CSSOM/stylePatches.ts b/source/content-script/modifications/CSSOM/stylePatches.ts
@@ -10,8 +10,10 @@ export default class StylePatchesModifier implements PageModifier {
     }
 
     private styleRuleTweaks: [CSSStyleRule, { [key: string]: string }][] = [];
-    private originalStyleValues: [CSSStyleRule, { [key: string]: string }][] =
-        [];
+    private originalStyleValues: [
+        CSSStyleRule,
+        { [key: string]: [string, boolean] }
+    ][] = [];
     async prepare() {
         // iterating the CSSOM can take time -- so run outside transitionIn()
         // TODO maybe do in afterTransitionIn()?
@@ -32,8 +34,14 @@ export default class StylePatchesModifier implements PageModifier {
 
     transitionOut() {
         this.originalStyleValues.forEach(([rule, propertiesToSet]) => {
-            for (const [key, value] of Object.entries(propertiesToSet)) {
-                rule.style.setProperty(key, value);
+            for (const [key, [value, isImportant]] of Object.entries(
+                propertiesToSet
+            )) {
+                rule.style.setProperty(
+                    key,
+                    value,
+                    isImportant ? "important" : ""
+                );
             }
         });
     }
@@ -88,7 +96,10 @@ export default class StylePatchesModifier implements PageModifier {
 
             const originalValues = {};
             for (const [key] of Object.entries(propertiesToSet)) {
-                originalValues[key] = rule.style.getPropertyValue(key);
+                originalValues[key] = [
+                    rule.style.getPropertyValue(key),
+                    rule.style.getPropertyPriority(key) === "important",
+                ];
             }
             this.originalStyleValues.push([rule, originalValues]);
         }

diff --git a/source/content-script/modifications/CSSOM/theme.ts b/source/content-script/modifications/CSSOM/theme.ts
@@ -397,7 +397,10 @@ export default class ThemeModifier implements PageModifier {
         return siteSupportsDarkMode;
     }
 
-    private activeDarkModeStyleTweaks: [CSSStyleRule, object][] = [];
+    private activeDarkModeStyleTweaks: [
+        CSSStyleRule,
+        { [key: string]: string }
+    ][] = [];
     private enableDarkModeStyleTweaks() {
         // patch site stylesheet colors
         this.cssomProvider.iterateRules((rule) => {
@@ -410,7 +413,10 @@ export default class ThemeModifier implements PageModifier {
                 // save properties for restoration later
                 const obj = {};
                 for (const key of rule.style) {
-                    obj[key] = rule.style.getPropertyValue(key);
+                    obj[key] = [
+                        rule.style.getPropertyValue(key),
+                        rule.style.getPropertyPriority(key) === "important",
+                    ];
                 }
                 this.activeDarkModeStyleTweaks.push([rule, obj]);
 
@@ -428,8 +434,14 @@ export default class ThemeModifier implements PageModifier {
 
     private disableDarkModeStyleTweaks() {
         this.activeDarkModeStyleTweaks.map(([rule, originalStyle]) => {
-            for (const [key, value] of Object.entries(originalStyle)) {
-                rule.style.setProperty(key, value);
+            for (const [key, [value, isImportant]] of Object.entries(
+                originalStyle
+            )) {
+                rule.style.setProperty(
+                    key,
+                    value,
+                    isImportant ? "important" : ""
+                );
             }
         });
         this.activeDarkModeStyleTweaks = [];