adding ignoreCSSAttributes to ignore the addition of certain css attr…

…ibutes

packages/rrweb/src/record/index.ts

@@ -68,7 +68,12 @@ function record<T = eventWithTime>(
     inlineImages = false,
     plugins,
     keepIframeSrcFn = () => false,
+    ignoreCSSAttributes = new Set([]),
   } = options;
+  options.ignoreCSSAttributes?.forEach((s) => {
+    console.log(`element: ${s}`);
+  });
+
   // runtime checks for user options
   if (!emit) {
     throw new Error('emit function is required');
@@ -438,6 +443,7 @@ function record<T = eventWithTime>(
           iframeManager,
           shadowDomManager,
           canvasManager,
+          ignoreCSSAttributes,
           plugins:
             plugins
               ?.filter((p) => p.observer)

packages/rrweb/src/record/observer.ts

@@ -598,7 +598,7 @@ function initStyleSheetObserver(
 }
 
 function initStyleDeclarationObserver(
-  { styleDeclarationCb, mirror }: observerParam,
+  { styleDeclarationCb, mirror, ignoreCSSAttributes }: observerParam,
   { win }: { win: IWindow },
 ): listenerHandler {
   const setProperty = win.CSSStyleDeclaration.prototype.setProperty;
@@ -608,6 +608,11 @@ function initStyleDeclarationObserver(
     value: string,
     priority: string,
   ) {
+    // ignore this mutation if we do not care about this css attribute
+    if (ignoreCSSAttributes.has(property)) {
+      console.log('here?');
+      return setProperty.apply(this, arguments);
+    }
     const id = mirror.getId(this.parentRule?.parentStyleSheet?.ownerNode);
     if (id !== -1) {
       styleDeclarationCb({
@@ -628,6 +633,11 @@ function initStyleDeclarationObserver(
     this: CSSStyleDeclaration,
     property: string,
   ) {
+    // ignore this mutation if we do not care about this css attribute
+    if (ignoreCSSAttributes.has(property)) {
+      console.log('here??');
+      return setProperty.apply(this, arguments);
+    }
     const id = mirror.getId(this.parentRule?.parentStyleSheet?.ownerNode);
     if (id !== -1) {
       styleDeclarationCb({

packages/rrweb/src/types.ts

@@ -236,6 +236,7 @@ export type recordOptions<T> = {
   maskInputFn?: MaskInputFn;
   maskTextFn?: MaskTextFn;
   slimDOMOptions?: SlimDOMOptions | 'all' | true;
+  ignoreCSSAttributes?:Set<string>;
   inlineStylesheet?: boolean;
   hooks?: hooksParam;
   packFn?: PackFn;
@@ -282,6 +283,7 @@ export type observerParam = {
   iframeManager: IframeManager;
   shadowDomManager: ShadowDomManager;
   canvasManager: CanvasManager;
+  ignoreCSSAttributes:Set<string>;
   plugins: Array<{
     observer: Function;
     callback: Function;

packages/rrweb/test/__snapshots__/record.test.ts.snap

@@ -640,6 +640,135 @@ exports[`record captures stylesheet rules 1`] = `
 ]"
 `;
 
+exports[`record does not capture style property changes when the css element is ignored 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 4,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"body { background: rgb(0, 0, 0); }\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 9
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 9,
+      \\"set\\": {
+        \\"property\\": \\"color\\",
+        \\"value\\": \\"green\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 13,
+      \\"id\\": 9,
+      \\"remove\\": {
+        \\"property\\": \\"background\\"
+      },
+      \\"index\\": [
+        0
+      ]
+    }
+  }
+]"
+`;
+
 exports[`record iframes captures stylesheet mutations in iframes 1`] = `
 "[
   {

packages/rrweb/test/record.test.ts

@@ -345,6 +345,34 @@ describe('record', function (this: ISuite) {
     assertSnapshot(ctx.events);
   });
 
+  // it('does not capture style property changes when the css element is ignored', async () => {
+  //   await ctx.page.evaluate(() => {
+  //     const { record } = ((window as unknown) as IWindow).rrweb;
+
+  //     record({
+  //       emit: ((window as unknown) as IWindow).emit,
+  //       ignoreCSSAttributes: new Set(['color']),
+  //     });
+
+  //     const styleElement = document.createElement('style');
+  //     document.head.appendChild(styleElement);
+
+  //     const styleSheet = <CSSStyleSheet>styleElement.sheet;
+  //     styleSheet.insertRule('body { background: #000; }');
+  //     setTimeout(() => {
+  //       (styleSheet.cssRules[0] as CSSStyleRule).style.setProperty(
+  //         'color',
+  //         'green',
+  //       );
+  //       (styleSheet.cssRules[0] as CSSStyleRule).style.removeProperty(
+  //         'background',
+  //       );
+  //     }, 0);
+  //   });
+  //   await ctx.page.waitForTimeout(50);
+  //   assertSnapshot(ctx.events);
+  // });
+
   it('captures inserted style text nodes correctly', async () => {
     await ctx.page.evaluate(() => {
       const { record } = ((window as unknown) as IWindow).rrweb;