fix: css bug identified in user site (#83)

see https://posthoghelp.zendesk.com/agent/tickets/29917

in which a style node has multiple text node children
_together_ those nodes make up a valid style rule
but calling `adaptCssForReplay` on each individually causes it to throw

let's make it not throw and then if needed can gather examples of what
valid and invalid input look like to figure out the next step

Author: pauldambra

packages/rrdom/test/diff.test.ts

@@ -1413,7 +1413,7 @@ describe('diff algorithm for rrdom', () => {
        * If the selector match is case insensitive, it will cause some CSS style problems in the replayer.
        * This test result executed in JSDom is different from that in real browser so we use puppeteer as test environment.
        */
-      const browser = await puppeteer.launch();
+      const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
       const page = await browser.newPage();
       await page.goto('about:blank');
 

packages/rrdom/test/virtual-dom.test.ts

@@ -242,7 +242,7 @@ describe('RRDocument for browser environment', () => {
     let page: puppeteer.Page;
 
     beforeAll(async () => {
-      browser = await puppeteer.launch();
+      browser = await puppeteer.launch({ args: ['--no-sandbox'] });
       code = fs.readFileSync(
         path.resolve(__dirname, '../dist/rrdom.umd.cjs'),
         'utf8',

packages/rrweb-snapshot/src/rebuild.ts

@@ -6,7 +6,7 @@ import {
   type elementNode,
   type legacyAttributes,
 } from '@posthog/rrweb-types';
-import { type tagMap, type BuildCache } from './types';
+import { type tagMap, type BuildCache, type textNode } from './types';
 import {
   isElement,
   Mirror,
@@ -89,6 +89,29 @@ export function createCache(): BuildCache {
   };
 }
 
+function safeDocNode(
+  n: textNode,
+  options: {
+    doc: Document;
+    hackCss: boolean;
+    cache: BuildCache;
+  },
+) {
+  let stringContent = n.textContent;
+  if (n.isStyle && options.hackCss) {
+    try {
+      stringContent = adaptCssForReplay(n.textContent, options.cache);
+    } catch {
+      // if, for example, a style node has multiple text nodes
+      // which can only be adopted to CSS all together,
+      // then this will fail...
+      // ignore
+    }
+  }
+
+  return options.doc.createTextNode(stringContent);
+}
+
 function buildNode(
   n: serializedNodeWithId,
   options: {
@@ -327,11 +350,12 @@ function buildNode(
       return node;
     }
     case NodeType.Text:
-      return doc.createTextNode(
-        n.isStyle && hackCss
-          ? adaptCssForReplay(n.textContent, cache)
-          : n.textContent,
-      );
+      return safeDocNode(n, {
+        cache,
+        doc,
+        hackCss,
+      });
+
     case NodeType.CDATA:
       if (n.textContent.trim() === '') {
         return null;

packages/rrweb-snapshot/test/__snapshots__/rebuild.test.ts.snap

@@ -103,6 +103,7 @@ describe('integration tests', function (this: ISuite) {
     serverURL = getServerURL(server);
     browser = await puppeteer.launch({
       // headless: false,
+      args: ['--no-sandbox'],
     });
 
     code = fs.readFileSync(
@@ -435,6 +436,7 @@ describe('iframe integration tests', function (this: ISuite) {
     serverURL = getServerURL(server);
     browser = await puppeteer.launch({
       // headless: false,
+      args: ['--no-sandbox'],
     });
 
     code = fs.readFileSync(
@@ -479,6 +481,7 @@ describe('dialog integration tests', function (this: ISuite) {
     serverURL = getServerURL(server);
     browser = await puppeteer.launch({
       // headless: false,
+      args: ['--no-sandbox'],
     });
 
     code = fs.readFileSync(
@@ -525,6 +528,7 @@ describe('shadow DOM integration tests', function (this: ISuite) {
     serverURL = getServerURL(server);
     browser = await puppeteer.launch({
       // headless: false,
+      args: ['--no-sandbox'],
     });
 
     code = fs.readFileSync(