Fix adapt css with split

.changeset/fix-adapt-css.md

@@ -0,0 +1,6 @@
+---
+"rrweb": patch
+"rrweb-snapshot": patch
+---
+
+#1575 Fix that postcss could fall over when trying to process css content split arbitrarily

packages/rrweb-snapshot/package.json

@@ -3,6 +3,8 @@
   "version": "2.0.0-alpha.17",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
+    "format": "yarn prettier --write '**/*.{ts,md}'",
+    "format:head": "git diff --name-only HEAD^ |grep '/rrweb-snapshot/.*\\.ts$\\|\\.md$' |sed 's|packages/rrweb-snapshot/||'|xargs yarn prettier --write",
     "prepare": "npm run prepack",
     "prepack": "npm run build",
     "retest": "vitest run",

packages/rrweb-snapshot/src/rebuild.ts

@@ -104,15 +104,44 @@ export function applyCssSplits(
     // unexpected: remerge the last two so that we don't discard any css
     cssTextSplits.splice(-2, 2, cssTextSplits.slice(-2).join(''));
   }
+  let adaptedCss = '';
+  if (hackCss) {
+    adaptedCss = adaptCssForReplay(cssTextSplits.join(''), cache);
+  }
+  let ix_start = 0;
   for (let i = 0; i < childTextNodes.length; i++) {
+    if (i === cssTextSplits.length) {
+      break;
+    }
     const childTextNode = childTextNodes[i];
-    const cssTextSection = cssTextSplits[i];
-    if (childTextNode && cssTextSection) {
-      // id will be assigned when these child nodes are
-      // iterated over in buildNodeWithSN
-      childTextNode.textContent = hackCss
-        ? adaptCssForReplay(cssTextSection, cache)
-        : cssTextSection;
+    if (!hackCss) {
+      childTextNode.textContent = cssTextSplits[i];
+    } else if (i < childTextNodes.length - 1) {
+      let ix_end = ix_start;
+      let end_search = cssTextSplits[i + 1].length;
+
+      // don't do hundreds of searches, in case a mismatch
+      // is caused close to start of string
+      end_search = Math.min(end_search, 30);
+
+      let found = false;
+      for (; end_search > 2; end_search--) {
+        let search_bit = cssTextSplits[i + 1].substring(0, end_search);
+        let search_ix = adaptedCss.substring(ix_start).indexOf(search_bit);
+        found = search_ix !== -1;
+        if (found) {
+          ix_end += search_ix;
+          break;
+        }
+      }
+      if (!found) {
+        // something went wrong, put a similar sized chunk in the right place
+        ix_end += cssTextSplits[i].length;
+      }
+      childTextNode.textContent = adaptedCss.substring(ix_start, ix_end);
+      ix_start = ix_end;
+    } else {
+      childTextNode.textContent = adaptedCss.substring(ix_start);
     }
   }
 }

packages/rrweb-snapshot/test/css.test.ts

@@ -231,6 +231,52 @@ describe('applyCssSplits css rejoiner', function () {
     expect((sn3.childNodes[2] as textNode).textContent).toEqual('');
   });
 
+  it('applies css splits correctly when split parts are invalid by themselves', () => {
+    const badFirstHalf = 'a:hov';
+    const badSecondHalf = 'er { color: red; }';
+    const markedCssText = [badFirstHalf, badSecondHalf].join('/* rr_split */');
+    applyCssSplits(sn, markedCssText, true, mockLastUnusedArg);
+    expect(
+      (sn.childNodes[0] as textNode).textContent +
+        (sn.childNodes[1] as textNode).textContent,
+    ).toEqual('a:hover,\na.\\:hover { color: red; }');
+  });
+
+  it('applies css splits correctly when split parts are invalid by themselves x3', () => {
+    let sn3 = {
+      type: NodeType.Element,
+      tagName: 'style',
+      childNodes: [
+        {
+          type: NodeType.Text,
+          textContent: '',
+        },
+        {
+          type: NodeType.Text,
+          textContent: '',
+        },
+        {
+          type: NodeType.Text,
+          textContent: '',
+        },
+      ],
+    } as serializedElementNodeWithId;
+    const badStartThird = '.a:hover { background-color';
+    const badMidThird = ': red; } input:hover {';
+    const badEndThird = 'border: 1px solid purple; }';
+    const markedCssText = [badStartThird, badMidThird, badEndThird].join(
+      '/* rr_split */',
+    );
+    applyCssSplits(sn3, markedCssText, true, mockLastUnusedArg);
+    expect((sn3.childNodes[0] as textNode).textContent).toEqual(
+      badStartThird.replace('.a:hover', '.a:hover,\n.a.\\:hover'),
+    );
+    expect((sn3.childNodes[1] as textNode).textContent).toEqual(
+      badMidThird.replace('input:hover', 'input:hover,\ninput.\\:hover'),
+    );
+    expect((sn3.childNodes[2] as textNode).textContent).toEqual(badEndThird);
+  });
+
   it('maintains entire css text when there are too few child nodes', () => {
     let sn1 = {
       type: NodeType.Element,

packages/rrweb/package.json

@@ -3,6 +3,8 @@
   "version": "2.0.0-alpha.17",
   "description": "record and replay the web",
   "scripts": {
+    "format": "yarn prettier --write '**/*.{ts,md}'",
+    "format:head": "git diff --name-only HEAD^ |grep '/rrweb/.*\\.ts$\\|\\.md$' |sed 's|packages/rrweb/||'|xargs yarn prettier --write",
     "prepare": "npm run prepack",
     "prepack": "npm run build",
     "retest": "cross-env PUPPETEER_HEADLESS=true yarn retest:headful",