feat: add support for recording and replaying adoptedStyleSheets API

.github/workflows/style-check.yml

@@ -27,7 +27,7 @@ jobs:
         run: yarn lint:report
         # Continue to the next step even if this fails
         continue-on-error: true
-      - name: Upload ESLint report
+      - name: Upload ESLint Report
         uses: actions/upload-artifact@v3
         with:
           name: eslint_report.json
@@ -50,7 +50,7 @@ jobs:
           report-json: 'eslint_report.json'
 
   prettier_check:
-    # In the forked PR, it's hard to format code and push to the branch directly.
+    # In the forked PR, it's hard to format code and push to the branch directly, so the action only check the format correctness.
     if: github.event_name != 'push' && github.event.pull_request.head.repo.full_name != 'rrweb-io/rrweb'
     runs-on: ubuntu-latest
     name: Format Check
@@ -66,7 +66,7 @@ jobs:
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn
-      - name: Prettify code
+      - name: Prettier Check
         run: yarn prettier --check '**/*.{ts,md}'
 
   prettier:
@@ -86,9 +86,9 @@ jobs:
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn
-      - name: Prettify code
+      - name: Prettify Code
         run: yarn prettier --write '**/*.{ts,md}'
-      - name: Commit changes
+      - name: Commit Changes
         uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: Apply formatting changes

package.json

@@ -41,8 +41,5 @@
     "live-stream": "cd packages/rrweb && yarn live-stream",
     "lint": "yarn run concurrently --success=all -r -m=1 'yarn run markdownlint docs' 'yarn eslint packages/*/src --ext .ts,.tsx,.js,.jsx,.svelte'",
     "lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx"
-  },
-  "resolutions": {
-    "**/jsdom/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz"
   }
 }

packages/rrdom-nodejs/tsconfig.json

@@ -17,7 +17,12 @@
   },
   "compileOnSave": true,
   "exclude": ["test"],
-  "include": ["src", "test.d.ts", "../rrweb/src/record/workers/workers.d.ts"],
+  "include": [
+    "src",
+    "test.d.ts",
+    "../rrweb/src/record/workers/workers.d.ts",
+    "../rrweb/src/record/constructableStyleSheets.d.ts"
+  ],
   "references": [
     {
       "path": "../rrdom"

packages/rrdom/src/diff.ts

@@ -4,6 +4,8 @@ import type {
   canvasEventWithTime,
   inputData,
   scrollData,
+  styleDeclarationData,
+  styleSheetRuleData,
 } from 'rrweb/src/types';
 import type {
   IRRCDATASection,
@@ -79,6 +81,10 @@ export type ReplayerHandler = {
   ) => void;
   applyInput: (data: inputData) => void;
   applyScroll: (data: scrollData, isSync: boolean) => void;
+  applyStyleSheetMutation: (
+    data: styleDeclarationData | styleSheetRuleData,
+    styleSheet: CSSStyleSheet,
+  ) => void;
 };
 
 export function diff(
@@ -159,20 +165,25 @@ export function diff(
           }
           break;
         case 'STYLE':
-          applyVirtualStyleRulesToNode(
-            oldElement as HTMLStyleElement,
-            (newTree as RRStyleElement).rules,
-          );
+          {
+            const styleSheet = (oldElement as HTMLStyleElement).sheet;
+            styleSheet &&
+              (newTree as RRStyleElement).rules.forEach((data) =>
+                replayer.applyStyleSheetMutation(data, styleSheet),
+              );
+          }
           break;
       }
       if (newRRElement.shadowRoot) {
         if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const oldChildren = oldElement.shadowRoot!.childNodes;
         const newChildren = newRRElement.shadowRoot.childNodes;
         if (oldChildren.length > 0 || newChildren.length > 0)
           diffChildren(
             Array.from(oldChildren),
             newChildren,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             oldElement.shadowRoot!,
             replayer,
             rrnodeMirror,
@@ -333,6 +344,7 @@ function diffChildren(
       }
       indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
       if (indexInOld) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const nodeToMove = oldChildren[indexInOld]!;
         parentNode.insertBefore(nodeToMove, oldStartNode);
         diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
@@ -437,110 +449,3 @@ export function createOrGetNode(
   if (sn) domMirror.add(node, { ...sn });
   return node;
 }
-
-export function getNestedRule(
-  rules: CSSRuleList,
-  position: number[],
-): CSSGroupingRule {
-  const rule = rules[position[0]] as CSSGroupingRule;
-  if (position.length === 1) {
-    return rule;
-  } else {
-    return getNestedRule(
-      (rule.cssRules[position[1]] as CSSGroupingRule).cssRules,
-      position.slice(2),
-    );
-  }
-}
-
-export enum StyleRuleType {
-  Insert,
-  Remove,
-  Snapshot,
-  SetProperty,
-  RemoveProperty,
-}
-type InsertRule = {
-  cssText: string;
-  type: StyleRuleType.Insert;
-  index?: number | number[];
-};
-type RemoveRule = {
-  type: StyleRuleType.Remove;
-  index: number | number[];
-};
-type SetPropertyRule = {
-  type: StyleRuleType.SetProperty;
-  index: number[];
-  property: string;
-  value: string | null;
-  priority: string | undefined;
-};
-type RemovePropertyRule = {
-  type: StyleRuleType.RemoveProperty;
-  index: number[];
-  property: string;
-};
-
-export type VirtualStyleRules = Array<
-  InsertRule | RemoveRule | SetPropertyRule | RemovePropertyRule
->;
-
-export function getPositionsAndIndex(nestedIndex: number[]) {
-  const positions = [...nestedIndex];
-  const index = positions.pop();
-  return { positions, index };
-}
-
-export function applyVirtualStyleRulesToNode(
-  styleNode: HTMLStyleElement,
-  virtualStyleRules: VirtualStyleRules,
-) {
-  const sheet = styleNode.sheet!;
-
-  virtualStyleRules.forEach((rule) => {
-    if (rule.type === StyleRuleType.Insert) {
-      try {
-        if (Array.isArray(rule.index)) {
-          const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(sheet.cssRules, positions);
-          nestedRule.insertRule(rule.cssText, index);
-        } else {
-          sheet.insertRule(rule.cssText, rule.index);
-        }
-      } catch (e) {
-        /**
-         * sometimes we may capture rules with browser prefix
-         * insert rule with prefixs in other browsers may cause Error
-         */
-      }
-    } else if (rule.type === StyleRuleType.Remove) {
-      try {
-        if (Array.isArray(rule.index)) {
-          const { positions, index } = getPositionsAndIndex(rule.index);
-          const nestedRule = getNestedRule(sheet.cssRules, positions);
-          nestedRule.deleteRule(index || 0);
-        } else {
-          sheet.deleteRule(rule.index);
-        }
-      } catch (e) {
-        /**
-         * accessing styleSheet rules may cause SecurityError
-         * for specific access control settings
-         */
-      }
-    } else if (rule.type === StyleRuleType.SetProperty) {
-      const nativeRule = (getNestedRule(
-        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(
-        sheet.cssRules,
-        rule.index,
-      ) as unknown) as CSSStyleRule;
-      nativeRule.style.removeProperty(rule.property);
-    }
-  });
-}

packages/rrdom/src/index.ts

@@ -12,8 +12,9 @@ import type {
   canvasEventWithTime,
   inputData,
   scrollData,
+  styleSheetRuleData,
+  styleDeclarationData,
 } from 'rrweb/src/types';
-import type { VirtualStyleRules } from './diff';
 import {
   BaseRRNode as RRNode,
   BaseRRCDATASectionImpl,
@@ -164,7 +165,7 @@ export class RRCanvasElement extends RRElement implements IRRElement {
 }
 
 export class RRStyleElement extends RRElement {
-  public rules: VirtualStyleRules = [];
+  public rules: (styleSheetRuleData | styleDeclarationData)[] = [];
 }
 
 export class RRIFrameElement extends RRElement {
@@ -312,7 +313,8 @@ export function buildFromDom(
     }
 
     if (node.nodeName === 'IFRAME') {
-      walk((node as HTMLIFrameElement).contentDocument!, rrNode);
+      const iframeDoc = (node as HTMLIFrameElement).contentDocument;
+      iframeDoc && walk(iframeDoc, rrNode);
     } else if (
       node.nodeType === NodeType.DOCUMENT_NODE ||
       node.nodeType === NodeType.ELEMENT_NODE ||
@@ -323,6 +325,7 @@ export function buildFromDom(
         node.nodeType === NodeType.ELEMENT_NODE &&
         (node as HTMLElement).shadowRoot
       )
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         walk((node as HTMLElement).shadowRoot!, rrNode);
       node.childNodes.forEach((childNode) => walk(childNode, rrNode));
     }
@@ -475,11 +478,5 @@ function walk(node: IRRNode, mirror: IMirror<IRRNode>, blankSpace: string) {
 
 export { RRNode };
 
-export {
-  diff,
-  createOrGetNode,
-  StyleRuleType,
-  ReplayerHandler,
-  VirtualStyleRules,
-} from './diff';
+export { diff, createOrGetNode, ReplayerHandler } from './diff';
 export * from './document';