Support constructed stylesheets in shadow DOM instances

README.md

@@ -21,6 +21,16 @@
 
 rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
 
+## Publishing @chromaui/rrweb-snapshot
+
+Chromatic maintains this fork of `rrweb-io/rrweb` solely to publish a version of `rrweb-snapshot` that supports constructable stylesheets for Chromatic e2e capture purposes.
+
+To distinguish Chromatic-specific builds from those coming from rrweb-io, a `-noAbsolute` label is appended to the end of the package version. If more than one Chromatic build is produced based off of the same rrweb-io version, a number is appended to the end of that label (e.g. `2.0.0-alpha.17-noAbsolute.1`).
+
+1. In `packages/rrweb-snapshot/package.json`, set the appropriate `-noAbsolute.X` version
+2. CD to `packages/rrweb-snapshot`
+3. Run `npm publish`
+
 ## Guide
 
 [**📚 Read the rrweb guide here. 📚**](./guide.md)

packages/rrweb-snapshot/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rrweb-snapshot",
-  "version": "2.0.0-alpha.17",
+  "name": "@chromaui/rrweb-snapshot",
+  "version": "2.0.0-alpha.17-noAbsolute",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
@@ -12,15 +12,15 @@
     "test:update": "yarn build && vitest run --update",
     "bench": "vite build && vitest bench",
     "dev": "vite build --watch",
-    "build": "yarn turbo prepublish -F rrweb-snapshot",
+    "build": "yarn turbo prepublish -F @chromaui/rrweb-snapshot",
     "check-types": "tsc --noEmit",
     "prepublish": "yarn check-types && vite build",
     "lint": "yarn eslint src"
   },
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rrweb-io/rrweb.git"
+    "url": "git+https://github.com/chromaui/rrweb.git"
   },
   "keywords": [
     "rrweb",
@@ -50,9 +50,9 @@
   "author": "[email protected]",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/rrweb-io/rrweb/issues"
+    "url": "https://github.com/chromaui/rrweb/issues"
   },
-  "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
+  "homepage": "https://github.com/chromaui/rrweb/tree/master/packages/rrweb-snapshot#readme",
   "devDependencies": {
     "@rrweb/utils": "^2.0.0-alpha.17",
     "@types/jsdom": "^20.0.0",

packages/rrweb-snapshot/src/rebuild.ts

@@ -152,7 +152,7 @@ export function buildStyleNode(
 }
 
 function buildNode(
-  n: serializedNodeWithId,
+  n: serializedNodeWithId & { chromaticAdoptedStylesheets?: string[] },
   options: {
     doc: Document;
     hackCss: boolean;
@@ -380,6 +380,13 @@ function buildNode(
          */
         if (!node.shadowRoot) {
           node.attachShadow({ mode: 'open' });
+          n.chromaticAdoptedStylesheets?.forEach(
+            (chromaticAdoptedStylesheet) => {
+              const styleSheet = new CSSStyleSheet();
+              styleSheet.replaceSync(chromaticAdoptedStylesheet);
+              node.shadowRoot?.adoptedStyleSheets.push(styleSheet);
+            },
+          );
         } else {
           while (node.shadowRoot.firstChild) {
             node.shadowRoot.removeChild(node.shadowRoot.firstChild);

packages/rrweb-snapshot/src/snapshot.ts

@@ -280,7 +280,7 @@
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
     el = dom.parentElement(node)!;
   }
   try {
     if (typeof maskTextClass === 'string') {
@@ -700,10 +700,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -1008,7 +1008,10 @@
     id = genId();
   }
 
-  const serializedNode = Object.assign(_serializedNode, { id });
+  const serializedNode: serializedNode & {
+    id: number;
+    chromaticAdoptedStylesheets?: Array<string | null>;
+  } = Object.assign(_serializedNode, { id });
   // add IGNORED_NODE to mirror to track nextSiblings
   mirror.add(n, serializedNode);
 
@@ -1025,8 +1028,15 @@
     // this property was not needed in replay side
     delete serializedNode.needBlock;
     const shadowRootEl = dom.shadowRoot(n);
-    if (shadowRootEl && isNativeShadowDom(shadowRootEl))
+    if (shadowRootEl && isNativeShadowDom(shadowRootEl)) {
       serializedNode.isShadowHost = true;
+      if (shadowRootEl.adoptedStyleSheets.length > 0) {
+        serializedNode.chromaticAdoptedStylesheets =
+          shadowRootEl.adoptedStyleSheets.map((stylesheet) =>
+            stringifyStylesheet(stylesheet),
+          );
+      }
+    }
   }
   if (
     (serializedNode.type === NodeType.Document ||

packages/rrweb/src/record/mutation.ts

@@ -349,6 +349,8 @@
         onStylesheetLoad: (link, childSn) => {
           this.stylesheetManager.attachLinkElement(link, childSn);
         },
+        // @ts-expect-error cssCaptured isn't specified as an accepted property,
+        // but we didn't touch anything near here, so ignoring for now
         cssCaptured,
       });
       if (sn) {
@@ -362,13 +364,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removes, n, this.mirror) &&
         !this.movedSet.has(dom.parentNode(n)!)
       ) {
         continue;
       }

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

@@ -628,7 +628,10 @@ exports[`record > captures adopted stylesheets in nested shadow doms and iframes
                         \\"childNodes\\": [],
                         \\"rootId\\": 29,
                         \\"id\\": 33,
-                        \\"isShadowHost\\": true
+                        \\"isShadowHost\\": true,
+                        \\"chromaticAdoptedStylesheets\\": [
+                          \\"div { font-size: large; }\\"
+                        ]
                       }
                     ],
                     \\"rootId\\": 29,
@@ -849,7 +852,11 @@ exports[`record > captures adopted stylesheets in shadow doms and iframe 1`] = `
                       }
                     ],
                     \\"id\\": 10,
-                    \\"isShadowHost\\": true
+                    \\"isShadowHost\\": true,
+                    \\"chromaticAdoptedStylesheets\\": [
+                      \\"div { color: yellow; }h2 { color: orange; }h3 { font-size: larger; }\\",
+                      \\"span { color: red; }\\"
+                    ]
                   },
                   {
                     \\"type\\": 3,
@@ -1204,7 +1211,10 @@ exports[`record > captures adopted stylesheets of shadow doms in checkout full s
                       }
                     ],
                     \\"id\\": 7,
-                    \\"isShadowHost\\": true
+                    \\"isShadowHost\\": true,
+                    \\"chromaticAdoptedStylesheets\\": [
+                      \\"h1 { color: blue; }\\"
+                    ]
                   },
                   {
                     \\"type\\": 3,
@@ -1304,7 +1314,10 @@ exports[`record > captures adopted stylesheets of shadow doms in checkout full s
                       }
                     ],
                     \\"id\\": 7,
-                    \\"isShadowHost\\": true
+                    \\"isShadowHost\\": true,
+                    \\"chromaticAdoptedStylesheets\\": [
+                      \\"h1 { color: blue; }\\"
+                    ]
                   },
                   {
                     \\"type\\": 3,