gc virtual style map when DOM has been removed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "0.12.12",
+  "version": "0.12.13",
   "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/replay/index.ts

@@ -1378,6 +1378,9 @@ export class Replayer {
       if (!target) {
         return this.warnNodeNotFound(d, mutation.id);
       }
+      if (this.virtualStyleRulesMap.has(target)) {
+        this.virtualStyleRulesMap.delete(target);
+      }
       let parent: INode | null | ShadowRoot = this.mirror.getNode(
         mutation.parentId,
       );

src/replay/virtual-styles.ts

@@ -66,18 +66,22 @@ export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
 ) {
+  const { sheet } = styleNode;
+  if (!sheet) {
+    // styleNode without sheet means the DOM has been removed
+    // so the rules no longer need to be applied
+    return;
+  }
+
   storedRules.forEach((rule) => {
     if (rule.type === StyleRuleType.Insert) {
       try {
         if (Array.isArray(rule.index)) {
           const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(
-            styleNode.sheet!.cssRules,
-            positions,
-          );
+          const nestedRule = getNestedRule(sheet.cssRules, positions);
           nestedRule.insertRule(rule.cssText, index);
         } else {
-          styleNode.sheet?.insertRule(rule.cssText, rule.index);
+          sheet.insertRule(rule.cssText, rule.index);
         }
       } catch (e) {
         /**
@@ -89,13 +93,10 @@ export function applyVirtualStyleRulesToNode(
       try {
         if (Array.isArray(rule.index)) {
           const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(
-            styleNode.sheet!.cssRules,
-            positions,
-          );
+          const nestedRule = getNestedRule(sheet.cssRules, positions);
           nestedRule.deleteRule(index || 0);
         } else {
-          styleNode.sheet?.deleteRule(rule.index);
+          sheet.deleteRule(rule.index);
         }
       } catch (e) {
         /**
@@ -107,13 +108,13 @@ export function applyVirtualStyleRulesToNode(
       restoreSnapshotOfStyleRulesToNode(rule.cssTexts, styleNode);
     } else if (rule.type === StyleRuleType.SetProperty) {
       const nativeRule = (getNestedRule(
-        styleNode.sheet!.cssRules,
+        sheet.cssRules,
         rule.index,
       ) as unknown) as CSSStyleRule;
       nativeRule.style.setProperty(rule.property, rule.value, rule.priority);
     } else if (rule.type === StyleRuleType.RemoveProperty) {
       const nativeRule = (getNestedRule(
-        styleNode.sheet!.cssRules,
+        sheet.cssRules,
         rule.index,
       ) as unknown) as CSSStyleRule;
       nativeRule.style.removeProperty(rule.property);