From 865c0b5fdcaf474dc11749884b1e9b2bcc454001 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 13 Aug 2021 18:31:43 +0200
Subject: [PATCH 1/4] fix typo

---
 docs/observer.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/observer.md b/docs/observer.md
index 20417b42c6..aed6cf4ee2 100644
--- a/docs/observer.md
+++ b/docs/observer.md
@@ -1,4 +1,5 @@
 # Incremental snapshots
+
 After completing a full snapshot, we need to record events that change the state.
 
 Right now, rrweb records the following events (we will expand upon this):
@@ -18,9 +19,11 @@ Right now, rrweb records the following events (we will expand upon this):
 - Input
 
 ## Mutation Observer
+
 Since we don't execute any JavaScript during replay, we instead need to record all changes scripts make to the document.
 
 Consider this example:
+
 > User clicks a button. A dropdown menu appears. User selects the first item. The dropdown menu disappears.
 
 During replay, the dropdown menu does not automatically appear after the "click button" is executed, because the original JavaScript is not part of the recording. Thus, we need to record the creation of the dropdown menu DOM nodes, the selection of the first item, and subsequent deletion of the dropdown menu DOM nodes. This is the most difficult part.
@@ -33,9 +36,10 @@ The first thing to understand is that MutationObserver uses a **Bulk Asynchronou
 
 This mechanism is not problematic for normal use, because we do not only have the mutation record, but we can also directly access the DOM object of the mutated node as well as any parent, child and sibling nodes.
 
-However in rrweb, since we have a serialization process, we need more sophisticated soluation to be able to deal with various scenarios.
+However in rrweb, since we have a serialization process, we need more sophisticated solution to be able to deal with various scenarios.
 
 ### Add node
+
 For example, the following two operations generate the same DOM structure, but produce a different set of mutation records:
 
 ```
@@ -63,32 +67,40 @@ We already introduced in the [serialization design document](./serialization.md)
 As you can see, since we have delayed serialization of the newly added nodes, all mutation records also need to be processed first, and only then the new nodes can be de-duplicated without causing trouble.
 
 ### Remove node
+
 When processing mutation records, we may encounter a removed node that has not yet been serialized. That indicates that it is a newly added node, and the "add node" mutation record is also somewhere in the mutation records we received. We label these nodes as "dropped nodes".
 
 There are two cases we need to handle here:
+
 1. Since the node was removed already, there is no need to replay it, and thus we remove it from the newly added node pool.
 2. This also applies to descendants of the dropped node, thus when processing newly added nodes we need to check if it has a dropped node as an ancestor.
 
 ### Attribute change
+
 Although MutationObserver is an asynchronous batch callback, we can still assume that the time interval between mutations occurring in a callback is extremely short, so we can optimize the size of the incremental snapshot by overwriting some data when recording the DOM property changes.
 
 For example, resizing a `<textarea>` will trigger a large number of mutation records with varying width and height properties. While a full record will make replay more realistic, it can also result in a large increase in the number of incremental snapshots. After making a trade-off, we think that only the final value of an attribute of the same node needs to be recorded in a single mutation callback, that is, each subsequent mutation record will overwrite the attribute change part of the mutation record that existing before the write.
 
 ## Mouse movement
+
 By recording the mouse movement position, we can simulate the mouse movement trajectory during replay.
 
 Try to ensure that the mouse moves smoothly during replay and also minimize the number of corresponding incremental snapshots, so we need to perform two layers of throttling while listening to mousemove. The first layer records the mouse coordinates at most once every 20 ms, the second layer transmits the mouse coordinate set at most once every 500 ms to ensure a single snapshot doesn't accumulate a lot of mouse position data and becomes too large.
 
 ### Time reversal
+
 We record a timestamp when each incremental snapshot is generated so that during replay it can be applied at the correct time. However, due to the effect of throttling, the timestamps of the mouse movement corresponding to the incremental snapshot will be later than the actual recording time, so we need to record a negative time difference for correction and time calibration during replay.
 
 ## Input
+
 We need to observe the input of the three elements `<input>`, `<textarea>`, `<select>`, including human input and programmatic changes.
 
 ### Human input
+
 For human input, we mainly rely on listening to the input and change events. It is necessary to deduplicate different events triggered for the same the human input action. In addition, `<input type="radio" />` is also a special kind of control. If the multiple radio elements have the same name attribute, then when one is selected, the others will be reversed, but no event will be triggered on those others, so this needs to be handled separately.
 
 ### Programmatic changes
+
 Setting the properties of these elements directly through the code will not trigger the MutationObserver. We can still achieve monitoring by hijacking the setter of the corresponding property. The sample code is as follows:
 
 ```typescript

From b881a7c3b7200c835dd036c9bef670c0908a747c Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 13 Aug 2021 18:35:40 +0200
Subject: [PATCH 2/4] record nested style rules

---
 packages/rrweb/src/record/observer.ts         |  54 +++++++
 packages/rrweb/src/types.ts                   |   6 +-
 .../test/__snapshots__/record.test.ts.snap    | 142 ++++++++++++++++++
 packages/rrweb/test/record.test.ts            |  46 ++++++
 4 files changed, 245 insertions(+), 3 deletions(-)

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index bd4ecca4f5..e38e90d44b 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -495,6 +495,23 @@ 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);
+      pos.unshift(index);
+    } else {
+      const rules = Array.from(rule.parentStyleSheet!.cssRules);
+      const index = rules.indexOf(rule);
+      pos.unshift(index);
+    }
+    return pos;
+  }
+  return recurse(rule, positions);
+}
+
 function initStyleSheetObserver(
   cb: styleSheetRuleCallback,
   mirror: Mirror,
@@ -523,9 +540,46 @@ function initStyleSheetObserver(
     return deleteRule.apply(this, arguments);
   };
 
+  const groupingInsertRule = CSSGroupingRule.prototype.insertRule;
+  CSSGroupingRule.prototype.insertRule = function (
+    rule: string,
+    index?: number,
+  ) {
+    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        adds: [
+          {
+            rule,
+            index: [
+              ...getNestedCSSRulePositions(this),
+              index || 0, // defaults to 0
+            ],
+          },
+        ],
+      });
+    }
+    return groupingInsertRule.apply(this, arguments);
+  };
+
+  const groupingDeleteRule = CSSGroupingRule.prototype.deleteRule;
+  CSSGroupingRule.prototype.deleteRule = function (index: number) {
+    const id = mirror.getId(this.parentStyleSheet.ownerNode as INode);
+    if (id !== -1) {
+      cb({
+        id,
+        removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+      });
+    }
+    return groupingDeleteRule.apply(this, arguments);
+  };
+
   return () => {
     CSSStyleSheet.prototype.insertRule = insertRule;
     CSSStyleSheet.prototype.deleteRule = deleteRule;
+    CSSGroupingRule.prototype.insertRule = groupingInsertRule;
+    CSSGroupingRule.prototype.deleteRule = groupingDeleteRule;
   };
 }
 
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 463f9293a4..a79e701f7d 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -295,7 +295,7 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: styleValueWithPriority | string | false;
+  [key: string]: styleValueWithPriority | string | false;
 };
 
 export type styleValueWithPriority = [string, string];
@@ -384,11 +384,11 @@ export type scrollCallback = (p: scrollPosition) => void;
 
 export type styleSheetAddRule = {
   rule: string;
-  index?: number;
+  index?: number | number[];
 };
 
 export type styleSheetDeleteRule = {
-  index: number;
+  index: number | number[];
 };
 
 export type styleSheetRuleParam = {
diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
index f2278deda4..4845431bd9 100644
--- a/packages/rrweb/test/__snapshots__/record.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -329,6 +329,148 @@ exports[`custom-event 1`] = `
 ]"
 `;
 
+exports[`nested-stylesheet-rules 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 7
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 3,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"style\\",
+            \\"attributes\\": {
+              \\"_cssText\\": \\"@media  {\\\\n  body { background: rgb(0, 0, 0); }\\\\n}\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 8
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #fff; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"removes\\": [
+        {
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 8,
+      \\"id\\": 8,
+      \\"adds\\": [
+        {
+          \\"rule\\": \\"body { color: #ccc; }\\",
+          \\"index\\": [
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`stylesheet-rules 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index fd78052e4c..8dbbe5a7f0 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -250,6 +250,52 @@ describe('record', function (this: ISuite) {
     expect(removeRuleCount).to.equal(1);
     assertSnapshot(this.events, __filename, 'stylesheet-rules');
   });
+
+  it('captures nested stylesheet rules', async () => {
+    await this.page.evaluate(() => {
+      const { record } = ((window as unknown) as IWindow).rrweb;
+
+      record({
+        emit: ((window as unknown) as IWindow).emit,
+      });
+
+      const styleElement = document.createElement('style');
+      document.head.appendChild(styleElement);
+
+      const styleSheet = <CSSStyleSheet>styleElement.sheet;
+      styleSheet.insertRule('@media {}');
+      const atMediaRule = styleSheet.cssRules[0] as CSSMediaRule;
+
+      const ruleIdx0 = atMediaRule.insertRule('body { background: #000; }', 0);
+      const ruleIdx1 = atMediaRule.insertRule('body { background: #111; }', 0);
+      atMediaRule.deleteRule(ruleIdx1);
+      setTimeout(() => {
+        atMediaRule.insertRule('body { color: #fff; }', 0);
+      }, 0);
+      setTimeout(() => {
+        atMediaRule.deleteRule(ruleIdx0);
+      }, 5);
+      setTimeout(() => {
+        atMediaRule.insertRule('body { color: #ccc; }', 0);
+      }, 10);
+    });
+    await this.page.waitForTimeout(50);
+    const styleSheetRuleEvents = this.events.filter(
+      (e) =>
+        e.type === EventType.IncrementalSnapshot &&
+        e.data.source === IncrementalSource.StyleSheetRule,
+    );
+    const addRuleCount = styleSheetRuleEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).adds),
+    ).length;
+    const removeRuleCount = styleSheetRuleEvents.filter((e) =>
+      Boolean((e.data as styleSheetRuleData).removes),
+    ).length;
+    // sync insert/delete should be ignored
+    expect(addRuleCount).to.equal(2);
+    expect(removeRuleCount).to.equal(1);
+    assertSnapshot(this.events, __filename, 'nested-stylesheet-rules');
+  });
 });
 
 describe('record iframes', function (this: ISuite) {

From f24483f6a7dd7e44ec501925ed24a7529b388291 Mon Sep 17 00:00:00 2001
From: Justin Halsall <Juice10@users.noreply.github.com>
Date: Fri, 13 Aug 2021 18:37:13 +0200
Subject: [PATCH 3/4] Replay nested style rules

---
 packages/rrweb/package.json                   |  2 +-
 packages/rrweb/src/replay/virtual-styles.ts   | 44 ++++++++++-
 .../rrweb/test/replay/virtual-styles.test.ts  | 57 +++++++++++++-
 yarn.lock                                     | 75 ++++++++++++++++++-
 4 files changed, 169 insertions(+), 9 deletions(-)

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9b4cc86195..3e4788f4c5 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -52,7 +52,7 @@
     "ignore-styles": "^5.0.1",
     "inquirer": "^6.2.1",
     "jest-snapshot": "^23.6.0",
-    "jsdom": "^16.6.0",
+    "jsdom": "^17.0.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^5.2.0",
     "prettier": "2.2.1",
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index 43c48be914..da65f59290 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -9,11 +9,11 @@ export enum StyleRuleType {
 type InsertRule = {
   cssText: string;
   type: StyleRuleType.Insert;
-  index?: number;
+  index?: number | number[];
 };
 type RemoveRule = {
   type: StyleRuleType.Remove;
-  index: number;
+  index: number | number[];
 };
 type SnapshotRule = {
   type: StyleRuleType.Snapshot;
@@ -23,6 +23,22 @@ type SnapshotRule = {
 export type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
 export type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
 
+function getNestedRule(
+  rules: CSSRuleList,
+  position: number[],
+): CSSGroupingRule {
+  const rule = rules[position[0]] as CSSGroupingRule;
+  if (position.length === 1) {
+    return rule;
+  } else {
+    return getNestedRule(
+      ((rule as CSSGroupingRule).cssRules[position[1]] as CSSGroupingRule)
+        .cssRules,
+      position.slice(2),
+    );
+  }
+}
+
 export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
@@ -30,7 +46,17 @@ export function applyVirtualStyleRulesToNode(
   storedRules.forEach((rule) => {
     if (rule.type === StyleRuleType.Insert) {
       try {
-        styleNode.sheet?.insertRule(rule.cssText, rule.index);
+        if (Array.isArray(rule.index)) {
+          const positions = [...rule.index];
+          const insertAt = positions.pop();
+          const nestedRule = getNestedRule(
+            styleNode.sheet!.cssRules,
+            positions,
+          );
+          nestedRule.insertRule(rule.cssText, insertAt);
+        } else {
+          styleNode.sheet?.insertRule(rule.cssText, rule.index);
+        }
       } catch (e) {
         /**
          * sometimes we may capture rules with browser prefix
@@ -39,7 +65,17 @@ export function applyVirtualStyleRulesToNode(
       }
     } else if (rule.type === StyleRuleType.Remove) {
       try {
-        styleNode.sheet?.deleteRule(rule.index);
+        if (Array.isArray(rule.index)) {
+          const positions = [...rule.index];
+          const deleteAt = positions.pop();
+          const nestedRule = getNestedRule(
+            styleNode.sheet!.cssRules,
+            positions,
+          );
+          nestedRule.deleteRule(deleteAt || 0);
+        } else {
+          styleNode.sheet?.deleteRule(rule.index);
+        }
       } catch (e) {
         /**
          * accessing styleSheet rules may cause SecurityError
diff --git a/packages/rrweb/test/replay/virtual-styles.test.ts b/packages/rrweb/test/replay/virtual-styles.test.ts
index ef2524033e..ba82bc4397 100644
--- a/packages/rrweb/test/replay/virtual-styles.test.ts
+++ b/packages/rrweb/test/replay/virtual-styles.test.ts
@@ -44,7 +44,7 @@ describe('virtual styles', () => {
       expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
     });
 
-    it('should delete rule at index 1', () => {
+    it('should delete rule at index 0', () => {
       const dom = new JSDOM(`
         <style>
           a {color: blue;}
@@ -109,5 +109,60 @@ describe('virtual styles', () => {
         Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
       ).to.have.ordered.members(cssTexts);
     });
+
+    // JSDOM/CSSOM is currently broken for this test
+    // remove '.skip' once https://github.com/NV/CSSOM/pull/113#issue-712485075 is merged
+    it.skip('should insert rule at index [0,0] and keep exsisting rules', () => {
+      const dom = new JSDOM(`
+        <style>
+          @media {
+            a {color: blue}
+            div {color: black}
+          }
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const cssText = '.added-rule {border: 1px solid yellow;}';
+      const virtualStyleRules: VirtualStyleRules = [
+        { cssText, index: [0, 0], type: StyleRuleType.Insert },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      console.log(
+        Array.from((styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules),
+      );
+
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
+      ).to.equal(3);
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
+      ).to.equal(cssText);
+    });
+
+    it('should delete rule at index [0,1]', () => {
+      const dom = new JSDOM(`
+        <style>
+          @media {
+            a {color: blue;}
+            div {color: black;}
+          }
+        </style>
+      `);
+      const styleEl = dom.window.document.getElementsByTagName('style')[0];
+
+      const virtualStyleRules: VirtualStyleRules = [
+        { index: [0, 1], type: StyleRuleType.Remove },
+      ];
+      applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
+
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
+      ).to.equal(1);
+      expect(
+        (styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
+      ).to.equal('a {color: blue;}');
+    });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index e0138bfbe5..365f749bd5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -459,7 +459,7 @@ acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.2.4:
+acorn@^8.2.4, acorn@^8.4.1:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
   integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
@@ -1366,6 +1366,11 @@ cssom@^0.4.4:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
 
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
 cssom@~0.3.6:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
@@ -1387,6 +1392,15 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+data-urls@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.0.tgz#3ff551c986d7c6234a0ac4bbf20a269e1cd6b378"
+  integrity sha512-4AefxbTTdFtxDUdh0BuMBs2qJVL25Mow2zlcuuePegQwgD6GEmQao42LLEeksOui8nL4RcNEugIpFP7eRd33xg==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^9.0.0"
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1415,7 +1429,7 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-decimal.js@^10.2.1:
+decimal.js@^10.2.1, decimal.js@^10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
@@ -2101,6 +2115,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -2918,7 +2941,7 @@ jsdom-global@^3.0.2:
   resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9"
   integrity sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=
 
-jsdom@^16.4.0, jsdom@^16.6.0:
+jsdom@^16.4.0:
   version "16.6.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
   integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
@@ -2951,6 +2974,39 @@ jsdom@^16.4.0, jsdom@^16.6.0:
     ws "^7.4.5"
     xml-name-validator "^3.0.0"
 
+jsdom@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae"
+  integrity sha512-MUq4XdqwtNurZDVeKScENMPHnkgmdIvMzZ1r1NSwHkDuaqI6BouPjr+17COo4/19oLNnmdpFDPOHVpgIZmZ+VA==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.4.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.0"
+    decimal.js "^10.3.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^9.0.0"
+    ws "^8.0.0"
+    xml-name-validator "^3.0.0"
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -5370,6 +5426,14 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
+whatwg-url@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d"
+  integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA==
+  dependencies:
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -5438,6 +5502,11 @@ ws@^7.2.3, ws@^7.4.3, ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
   integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
 
+ws@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.1.0.tgz#75e5ec608f66d3d3934ec6dbc4ebc8a34a68638c"
+  integrity sha512-0UWlCD2s3RSclw8FN+D0zDTUyMO+1kHwJQQJzkgUh16S8d3NYON0AKCEQPffE0ez4JyRFu76QDA9KR5bOG/7jw==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"

From a14c5707f05583e7640507b917bba9445798a16d Mon Sep 17 00:00:00 2001
From: yz-yu <aryu0112@gmail.com>
Date: Sun, 15 Aug 2021 15:40:58 +0800
Subject: [PATCH 4/4] handle index array in replayer

---
 packages/rrweb/src/replay/index.ts          | 34 ++++++++++++++++-----
 packages/rrweb/src/replay/virtual-styles.ts |  2 +-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 9b49eba4ad..6d822569b6 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -57,6 +57,7 @@ import {
   StyleRuleType,
   VirtualStyleRules,
   VirtualStyleRulesMap,
+  getNestedRule,
 } from './virtual-styles';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -978,19 +979,26 @@ export class Replayer {
           d.adds.forEach(({ rule, index }) => {
             if (styleSheet) {
               try {
-                const _index =
+                if (Array.isArray(index)) {
+                  const positions = [...index];
+                  const insertAt = positions.pop();
+                  const nestedRule = getNestedRule(
+                    styleSheet.cssRules,
+                    positions,
+                  );
+                  nestedRule.insertRule(rule, insertAt);
+                } else {
+                  const _index =
                   index === undefined
                     ? undefined
                     : Math.min(index, styleSheet.cssRules.length);
-                try {
                   styleSheet.insertRule(rule, _index);
-                } catch (e) {
-                  /**
-                   * sometimes we may capture rules with browser prefix
-                   * insert rule with prefixs in other browsers may cause Error
-                   */
                 }
               } catch (e) {
+                /**
+                 * sometimes we may capture rules with browser prefix
+                 * insert rule with prefixs in other browsers may cause Error
+                 */
                 /**
                  * accessing styleSheet rules may cause SecurityError
                  * for specific access control settings
@@ -1008,7 +1016,17 @@ export class Replayer {
               rules?.push({ index, type: StyleRuleType.Remove });
             } else {
               try {
-                styleSheet?.deleteRule(index);
+                if (Array.isArray(index)) {
+                  const positions = [...index];
+                  const deleteAt = positions.pop();
+                  const nestedRule = getNestedRule(
+                    styleSheet!.cssRules,
+                    positions,
+                  );
+                  nestedRule.deleteRule(deleteAt || 0);
+                } else {
+                  styleSheet?.deleteRule(index);
+                }
               } catch (e) {
                 /**
                  * same as insertRule
diff --git a/packages/rrweb/src/replay/virtual-styles.ts b/packages/rrweb/src/replay/virtual-styles.ts
index da65f59290..e9086eedd6 100644
--- a/packages/rrweb/src/replay/virtual-styles.ts
+++ b/packages/rrweb/src/replay/virtual-styles.ts
@@ -23,7 +23,7 @@ type SnapshotRule = {
 export type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
 export type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
 
-function getNestedRule(
+export function getNestedRule(
   rules: CSSRuleList,
   position: number[],
 ): CSSGroupingRule {