john/hig-1046-apply-rrweb-css-change

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",

src/record/index.ts

@@ -201,7 +201,7 @@ function record<T = eventWithTime>(
       sampling,
       slimDOMOptions,
       iframeManager,
-      enableStrictPrivacy
+      enableStrictPrivacy,
     },
     mirror,
   });
@@ -355,6 +355,16 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
+          styleDeclarationCb: (r) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.StyleDeclaration,
+                  ...r,
+                },
+              }),
+            ),
           canvasMutationCb: (p) =>
             wrappedEmit(
               wrapEvent({
@@ -408,7 +418,7 @@ function record<T = eventWithTime>(
                   }),
                 ),
             })) || [],
-	    enableStrictPrivacy
+          enableStrictPrivacy,
         },
         hooks,
       );

src/record/observer.ts

@@ -43,6 +43,7 @@ import {
   fontCallback,
   fontParam,
   Mirror,
+  styleDeclarationCallback,
 } from '../types';
 import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
@@ -496,16 +497,18 @@ function initInputObserver(
   };
 }
 
-function getNestedCSSRulePositions(rule: CSSStyleRule): number[] {
-  const positions: Array<number> = [];
-  function recurse(rule: CSSRule, pos: number[]) {
-    if (rule.parentRule instanceof CSSGroupingRule) {
-      const rules = Array.from((rule.parentRule as CSSGroupingRule).cssRules);
-      const index = rules.indexOf(rule);
+function getNestedCSSRulePositions(rule: CSSRule): number[] {
+  const positions: number[] = [];
+  function recurse(childRule: CSSRule, pos: number[]) {
+    if (childRule.parentRule instanceof CSSGroupingRule) {
+      const rules = Array.from(
+        (childRule.parentRule as CSSGroupingRule).cssRules,
+      );
+      const index = rules.indexOf(childRule);
       pos.unshift(index);
     } else {
-      const rules = Array.from(rule.parentStyleSheet!.cssRules);
-      const index = rules.indexOf(rule);
+      const rules = Array.from(childRule.parentStyleSheet!.cssRules);
+      const index = rules.indexOf(childRule);
       pos.unshift(index);
     }
     return pos;
@@ -584,6 +587,60 @@ function initStyleSheetObserver(
   };
 }
 
+function initStyleDeclarationObserver(
+  cb: styleDeclarationCallback,
+  mirror: Mirror,
+): listenerHandler {
+  const setProperty = CSSStyleDeclaration.prototype.setProperty;
+  CSSStyleDeclaration.prototype.setProperty = function (
+    this: CSSStyleDeclaration,
+    property,
+    value,
+    priority,
+  ) {
+    const id = mirror.getId(
+      (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
+    );
+    if (id !== -1) {
+      cb({
+        id,
+        set: {
+          property,
+          value,
+          priority,
+        },
+        index: getNestedCSSRulePositions(this.parentRule!),
+      });
+    }
+    return setProperty.apply(this, arguments);
+  };
+
+  const removeProperty = CSSStyleDeclaration.prototype.removeProperty;
+  CSSStyleDeclaration.prototype.removeProperty = function (
+    this: CSSStyleDeclaration,
+    property,
+  ) {
+    const id = mirror.getId(
+      (this.parentRule?.parentStyleSheet?.ownerNode as unknown) as INode,
+    );
+    if (id !== -1) {
+      cb({
+        id,
+        remove: {
+          property,
+        },
+        index: getNestedCSSRulePositions(this.parentRule!),
+      });
+    }
+    return removeProperty.apply(this, arguments);
+  };
+
+  return () => {
+    CSSStyleDeclaration.prototype.setProperty = setProperty;
+    CSSStyleDeclaration.prototype.removeProperty = removeProperty;
+  };
+}
+
 function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
@@ -749,6 +806,7 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     inputCb,
     mediaInteractionCb,
     styleSheetRuleCb,
+    styleDeclarationCb,
     canvasMutationCb,
     fontCb,
   } = o;
@@ -800,6 +858,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     }
     styleSheetRuleCb(...p);
   };
+  o.styleDeclarationCb = (...p: Arguments<styleDeclarationCallback>) => {
+    if (hooks.styleDeclaration) {
+      hooks.styleDeclaration(...p);
+    }
+    styleDeclarationCb(...p);
+  };
   o.canvasMutationCb = (...p: Arguments<canvasMutationCallback>) => {
     if (hooks.canvasMutation) {
       hooks.canvasMutation(...p);
@@ -879,6 +943,10 @@ export function initObservers(
     o.styleSheetRuleCb,
     o.mirror,
   );
+  const styleDeclarationObserver = initStyleDeclarationObserver(
+    o.styleDeclarationCb,
+    o.mirror,
+  );
   const canvasMutationObserver = o.recordCanvas
     ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass, o.mirror)
     : () => {};
@@ -898,6 +966,7 @@ export function initObservers(
     inputHandler();
     mediaInteractionHandler();
     styleSheetObserver();
+    styleDeclarationObserver();
     canvasMutationObserver();
     fontObserver();
     pluginHandlers.forEach((h) => h());