refactor nested style code (#667)

packages/rrweb/src/replay/index.ts

@@ -58,6 +58,7 @@ import {
   VirtualStyleRules,
   VirtualStyleRulesMap,
   getNestedRule,
+  getPositionsAndIndex,
 } from './virtual-styles';
 
 const SKIP_TIME_THRESHOLD = 10 * 1000;
@@ -976,23 +977,24 @@ export class Replayer {
         }
 
         if (d.adds) {
-          d.adds.forEach(({ rule, index }) => {
+          d.adds.forEach(({ rule, index: nestedIndex }) => {
             if (styleSheet) {
               try {
-                if (Array.isArray(index)) {
+                if (Array.isArray(nestedIndex)) {
-                  const positions = [...index];
+                  const { positions, index } = getPositionsAndIndex(
-                  const insertAt = positions.pop();
+                    nestedIndex,
+                  );
                   const nestedRule = getNestedRule(
                     styleSheet.cssRules,
                     positions,
                   );
-                  nestedRule.insertRule(rule, insertAt);
+                  nestedRule.insertRule(rule, index);
                 } else {
-                  const _index =
+                  const index =
-                  index === undefined
+                    nestedIndex === undefined
-                    ? undefined
+                      ? undefined
-                    : Math.min(index, styleSheet.cssRules.length);
+                      : Math.min(nestedIndex, styleSheet.cssRules.length);
-                  styleSheet.insertRule(rule, _index);
+                  styleSheet.insertRule(rule, index);
                 }
               } catch (e) {
                 /**
@@ -1005,27 +1007,32 @@ export class Replayer {
                  */
               }
             } else {
-              rules?.push({ cssText: rule, index, type: StyleRuleType.Insert });
+              rules?.push({
+                cssText: rule,
+                index: nestedIndex,
+                type: StyleRuleType.Insert,
+              });
             }
           });
         }
 
         if (d.removes) {
-          d.removes.forEach(({ index }) => {
+          d.removes.forEach(({ index: nestedIndex }) => {
             if (usingVirtualParent) {
-              rules?.push({ index, type: StyleRuleType.Remove });
+              rules?.push({ index: nestedIndex, type: StyleRuleType.Remove });
             } else {
               try {
-                if (Array.isArray(index)) {
+                if (Array.isArray(nestedIndex)) {
-                  const positions = [...index];
+                  const { positions, index } = getPositionsAndIndex(
-                  const deleteAt = positions.pop();
+                    nestedIndex,
+                  );
                   const nestedRule = getNestedRule(
                     styleSheet!.cssRules,
                     positions,
                   );
-                  nestedRule.deleteRule(deleteAt || 0);
+                  nestedRule.deleteRule(index || 0);
                 } else {
-                  styleSheet?.deleteRule(index);
+                  styleSheet?.deleteRule(nestedIndex);
                 }
               } catch (e) {
                 /**

packages/rrweb/src/replay/virtual-styles.ts

@@ -39,6 +39,12 @@ export function getNestedRule(
   }
 }
 
+export function getPositionsAndIndex(nestedIndex: number[]) {
+  const positions = [...nestedIndex];
+  const index = positions.pop();
+  return { positions, index };
+}
+
 export function applyVirtualStyleRulesToNode(
   storedRules: VirtualStyleRules,
   styleNode: HTMLStyleElement,
@@ -47,13 +53,12 @@ export function applyVirtualStyleRulesToNode(
     if (rule.type === StyleRuleType.Insert) {
       try {
         if (Array.isArray(rule.index)) {
-          const positions = [...rule.index];
+          const { positions, index } = getPositionsAndIndex(rule.index);
-          const insertAt = positions.pop();
           const nestedRule = getNestedRule(
             styleNode.sheet!.cssRules,
             positions,
           );
-          nestedRule.insertRule(rule.cssText, insertAt);
+          nestedRule.insertRule(rule.cssText, index);
         } else {
           styleNode.sheet?.insertRule(rule.cssText, rule.index);
         }
@@ -66,13 +71,12 @@ export function applyVirtualStyleRulesToNode(
     } else if (rule.type === StyleRuleType.Remove) {
       try {
         if (Array.isArray(rule.index)) {
-          const positions = [...rule.index];
+          const { positions, index } = getPositionsAndIndex(rule.index);
-          const deleteAt = positions.pop();
           const nestedRule = getNestedRule(
             styleNode.sheet!.cssRules,
             positions,
           );
-          nestedRule.deleteRule(deleteAt || 0);
+          nestedRule.deleteRule(index || 0);
         } else {
           styleNode.sheet?.deleteRule(rule.index);
         }

packages/rrweb/typings/replay/virtual-styles.d.ts

@@ -7,11 +7,11 @@ export declare enum StyleRuleType {
 declare type InsertRule = {
     cssText: string;
     type: StyleRuleType.Insert;
-    index?: number;
+    index?: number | number[];
 };
 declare type RemoveRule = {
     type: StyleRuleType.Remove;
-    index: number;
+    index: number | number[];
 };
 declare type SnapshotRule = {
     type: StyleRuleType.Snapshot;
@@ -19,6 +19,7 @@ declare type SnapshotRule = {
 };
 export declare type VirtualStyleRules = Array<InsertRule | RemoveRule | SnapshotRule>;
 export declare type VirtualStyleRulesMap = Map<INode, VirtualStyleRules>;
+export declare function getNestedRule(rules: CSSRuleList, position: number[]): CSSGroupingRule;
 export declare function applyVirtualStyleRulesToNode(storedRules: VirtualStyleRules, styleNode: HTMLStyleElement): void;
 export declare function storeCSSRules(parentElement: HTMLStyleElement, virtualStyleRulesMap: VirtualStyleRulesMap): void;
 export {};

packages/rrweb/typings/types.d.ts

@@ -282,10 +282,10 @@ export declare type scrollPosition = {
 export declare type scrollCallback = (p: scrollPosition) => void;
 export declare type styleSheetAddRule = {
     rule: string;
-    index?: number;
+    index?: number | number[];
 };
 export declare type styleSheetDeleteRule = {
-    index: number;
+    index: number | number[];
 };
 export declare type styleSheetRuleParam = {
     id: number;