clarity-js 0.7.41 → 0.7.42

package/src/layout/mutation.ts

@@ -24,6 +24,8 @@ let mutations: MutationQueue[] = [];
 let insertRule: (rule: string, index?: number) => number = null;
 let deleteRule: (index?: number) => void = null;
 let attachShadow: (init: ShadowRootInit)  => ShadowRoot = null;
+let mediaInsertRule: (rule: string, index?: number) => number = null;
+let mediaDeleteRule: (index?: number) => void = null;
 let queue: Node[] = [];
 let timeout: number = null;
 let activePeriod = null;
@@ -48,13 +50,29 @@ export function start(): void {
       };
     }
 
+    if (mediaInsertRule === null) { 
+      mediaInsertRule = CSSMediaRule.prototype.insertRule; 
+      CSSMediaRule.prototype.insertRule = function(): number {
+        if (core.active()) { schedule(this.parentStyleSheet.ownerNode); }
+        return mediaInsertRule.apply(this, arguments);
+      };
+    }
+
     if (deleteRule === null) { 
       deleteRule = CSSStyleSheet.prototype.deleteRule;
       CSSStyleSheet.prototype.deleteRule = function(): void {
         if (core.active()) { schedule(this.ownerNode); }
         return deleteRule.apply(this, arguments);
       };
-   }
+    }
+
+    if (mediaDeleteRule === null) { 
+      mediaDeleteRule = CSSMediaRule.prototype.deleteRule;
+      CSSMediaRule.prototype.deleteRule = function(): void {
+        if (core.active()) { schedule(this.parentStyleSheet.ownerNode); }
+        return mediaDeleteRule.apply(this, arguments);
+      };
+    }
 
    // Add a hook to attachShadow API calls
    // In case we are unable to add a hook and browser throws an exception,

package/src/layout/node.ts

@@ -214,9 +214,11 @@ function observe(root: Node): void {
 function getStyleValue(style: HTMLStyleElement): string {
     // Call trim on the text content to ensure we do not process white spaces ( , \n, \r\n, \t, etc.)
     // Also, check if stylesheet has any data-* attribute, if so process rules instead of looking up text
+    // Additionally, check if style node has an id - if so it's at a high risk to have experienced dynamic
+    // style updates which would make the textContent out of date with its true style contribution.
     let value = style.textContent ? style.textContent.trim() : Constant.Empty;
     let dataset = style.dataset ? Object.keys(style.dataset).length : 0;
-    if (value.length === 0 || dataset > 0) {
+    if (value.length === 0 || dataset > 0 || style.id.length > 0) {
         value = getCssRules(style.sheet as CSSStyleSheet);
     }
     return value;