From 2ccb13e820f68cdd535aa440394dd7f6c6a4007e Mon Sep 17 00:00:00 2001
From: Yuki Iwanaga <yuki@creasty.com>
Date: Tue, 1 Sep 2026 23:44:26 +0000
Subject: [PATCH] fix(rrweb-snapshot): align _cssText split points with rule
 boundaries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`applyCssSplits` hands each `/* rr_split */` part to one of the `<style>`'s
text nodes, so that a later mutation can modify an individual node. But the
split points recorded by `markCssSplits` regularly land in the middle of a
rule: `splitCssText` locates them by searching for a text node's content
inside the browser-serialized stylesheet (normalising whitespace to compare,
then converting the offset back), which lands close to the right place but
not exactly on it.

That is harmless while the parts stay adjacent — concatenating the text
nodes gives back the original css. It stops being harmless when a mutation
inserts a sibling text node between two parts, which is exactly what the
splits exist for: a css-in-js library adding a rule at runtime inserts a
text node into the same `<style>`, positioned by `nextId`. The browser then
sees

    ... color: rgba(0, 0, 0, 0.84.dqzkfX{cursor:pointer; ...

the declaration never closes, and every rule until the parser recovers is
discarded. In a 43-second recording of a styled-components app (~200 text
nodes in one `<style>`, 45 split points) 57 of 311 rules were dropped this
way, leaving two navigation buttons with the UA button appearance while
their neighbours rendered correctly.

Move each split point forward to the end of the rule it lands in before
distributing the parts. Braces inside strings and comments are not counted,
and nested blocks close at their outermost brace. The position of a split
point is a guess to begin with, so nothing is lost by moving it: the
concatenation is unchanged, only which text node holds which rule.

The same alignment is applied to `endIndex` on the `hackCss` path, since
`adaptCssForReplay` changes the length of the css — the existing `searchBit`
scan runs as before and its result is then snapped to a rule boundary in the
rewritten string.

Doing this on the replay side rather than in `splitCssText` also fixes
recordings that already exist, which matters given how long recorder rollout
takes relative to a player deploy.
---
 .changeset/olive-donkeys-repeat.md            |   5 +
 .../rrweb-plugin-network-record/tsconfig.json |  13 +-
 .../rrweb-plugin-network-replay/tsconfig.json |  14 ++-
 packages/rrweb-snapshot/src/rebuild-utils.ts  |   3 +
 packages/rrweb-snapshot/src/rebuild.ts        |  19 ++-
 packages/rrweb-snapshot/src/utils.ts          |  78 ++++++++++++
 packages/rrweb-snapshot/test/css.test.ts      | 119 +++++++++++++++++-
 7 files changed, 241 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/olive-donkeys-repeat.md

diff --git a/.changeset/olive-donkeys-repeat.md b/.changeset/olive-donkeys-repeat.md
new file mode 100644
index 0000000000..39035fc2b0
--- /dev/null
+++ b/.changeset/olive-donkeys-repeat.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Fix `<style>` rules being dropped on replay when a mutation inserts a text node between two `_cssText` splits. The split points recorded by `markCssSplits` regularly land in the middle of a rule, which produces invalid css once a sibling is inserted between the parts; `applyCssSplits` now moves each split point forward to the end of the rule it lands in.
diff --git a/packages/plugins/rrweb-plugin-network-record/tsconfig.json b/packages/plugins/rrweb-plugin-network-record/tsconfig.json
index b70866e1ab..fc5391c651 100644
--- a/packages/plugins/rrweb-plugin-network-record/tsconfig.json
+++ b/packages/plugins/rrweb-plugin-network-record/tsconfig.json
@@ -1,7 +1,13 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src"],
-  "exclude": ["vite.config.ts", "vitest.config.ts", "test"],
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "test"
+  ],
   "compilerOptions": {
     "rootDir": "src",
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
@@ -12,6 +18,9 @@
     },
     {
       "path": "../../utils"
+    },
+    {
+      "path": "../../rrweb"
     }
   ]
 }
diff --git a/packages/plugins/rrweb-plugin-network-replay/tsconfig.json b/packages/plugins/rrweb-plugin-network-replay/tsconfig.json
index dd9ef0fc92..8d73f951ee 100644
--- a/packages/plugins/rrweb-plugin-network-replay/tsconfig.json
+++ b/packages/plugins/rrweb-plugin-network-replay/tsconfig.json
@@ -1,17 +1,25 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src"],
-  "exclude": ["vite.config.ts", "test"],
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "test"
+  ],
   "compilerOptions": {
     "rootDir": "src",
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
   },
   "references": [
+    {
+      "path": "../rrweb-plugin-network-record"
+    },
     {
       "path": "../../types"
     },
     {
-      "path": "../rrweb-plugin-network-record"
+      "path": "../../rrweb"
     }
   ]
 }
diff --git a/packages/rrweb-snapshot/src/rebuild-utils.ts b/packages/rrweb-snapshot/src/rebuild-utils.ts
index da4a0f6704..07696de0f6 100644
--- a/packages/rrweb-snapshot/src/rebuild-utils.ts
+++ b/packages/rrweb-snapshot/src/rebuild-utils.ts
@@ -11,4 +11,7 @@ export {
   Mirror,
   isNodeMetaEqual,
   extractFileExtension,
+  cssRuleBoundaries,
+  nextCssRuleBoundary,
+  snapCssSplitsToRuleBoundaries,
 } from './utils';
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index a6ef85f01b..daae13e9e9 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -12,6 +12,9 @@ import {
   Mirror,
   isNodeMetaEqual,
   extractFileExtension,
+  cssRuleBoundaries,
+  nextCssRuleBoundary,
+  snapCssSplitsToRuleBoundaries,
 } from './rebuild-utils';
 import postcss from 'postcss';
 
@@ -206,7 +209,7 @@ export function applyCssSplits(
       childTextNodes.push(scn);
     }
   }
-  const cssTextSplits = cssText.split('/* rr_split */');
+  let cssTextSplits = cssText.split('/* rr_split */');
   while (
     cssTextSplits.length > 1 &&
     cssTextSplits.length > childTextNodes.length
@@ -214,9 +217,16 @@ export function applyCssSplits(
     // unexpected: remerge the last two so that we don't discard any css
     cssTextSplits.splice(-2, 2, cssTextSplits.slice(-2).join(''));
   }
+  // the split points recorded by `markCssSplits` regularly land in the middle
+  // of a rule; move them to the end of that rule so that a sibling inserted
+  // between two of these text nodes by a later mutation can't cut a rule in
+  // half (see `snapCssSplitsToRuleBoundaries`)
+  cssTextSplits = snapCssSplitsToRuleBoundaries(cssTextSplits);
   let adaptedCss = '';
+  let adaptedBoundaries: number[] = [];
   if (hackCss) {
     adaptedCss = adaptCssForReplay(cssTextSplits.join(''), cache);
+    adaptedBoundaries = cssRuleBoundaries(adaptedCss);
   }
   let startIndex = 0;
   for (let i = 0; i < childTextNodes.length; i++) {
@@ -248,6 +258,13 @@ export function applyCssSplits(
         // something went wrong, put a similar sized chunk in the right place
         endIndex += cssTextSplits[i].length;
       }
+      // `adaptCssForReplay` rewrites selectors, so the split point has to be
+      // re-aligned with the rewritten css as well
+      endIndex = nextCssRuleBoundary(
+        adaptedBoundaries,
+        endIndex,
+        adaptedCss.length,
+      );
       childTextNode.textContent = adaptedCss.substring(startIndex, endIndex);
       startIndex = endIndex;
     } else {
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
index fa6336dad6..4a331cff96 100644
--- a/packages/rrweb-snapshot/src/utils.ts
+++ b/packages/rrweb-snapshot/src/utils.ts
@@ -608,3 +608,81 @@ export function markCssSplits(
 ): string {
   return splitCssText(cssText, style).join('/* rr_split */');
 }
+
+/**
+ * Offsets just past the end of each top-level css rule (i.e. just after a `}`
+ * which closes back to depth zero). Braces inside strings and comments are
+ * not counted.
+ */
+export function cssRuleBoundaries(cssText: string): number[] {
+  const boundaries: number[] = [];
+  let depth = 0;
+  let quote: string | null = null;
+  for (let i = 0; i < cssText.length; i++) {
+    const char = cssText[i];
+    if (quote !== null) {
+      if (char === '\\') i++;
+      else if (char === quote) quote = null;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+    } else if (char === '/' && cssText[i + 1] === '*') {
+      const end = cssText.indexOf('*/', i + 2);
+      i = end === -1 ? cssText.length : end + 1;
+    } else if (char === '{') {
+      depth++;
+    } else if (char === '}') {
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) boundaries.push(i + 1);
+    }
+  }
+  return boundaries;
+}
+
+/**
+ * The first rule boundary at or after `index`, or the end of the string.
+ */
+export function nextCssRuleBoundary(
+  boundaries: number[],
+  index: number,
+  end: number,
+): number {
+  return boundaries.find((boundary) => boundary >= index) ?? end;
+}
+
+/**
+ * Move each split point forward to the end of the rule it lands in.
+ *
+ * `splitCssText` locates the split points by searching for each text node's
+ * content inside the browser-serialized stylesheet, so a split point regularly
+ * lands in the middle of a rule (e.g. after `color: rgba(0, 0, 0, 0.84`).
+ * That is harmless while the parts stay adjacent, but keeping the parts
+ * separate is only worthwhile because later mutations can insert siblings
+ * between them — and a rule cut in half around an inserted sibling is invalid
+ * css. The browser then goes looking for the closing brace and drops every
+ * rule until it recovers.
+ *
+ * The exact position of a split point is a guess to begin with, so nothing is
+ * lost by moving it to the next rule boundary.
+ */
+export function snapCssSplitsToRuleBoundaries(splits: string[]): string[] {
+  if (splits.length < 2) return splits;
+  const cssText = splits.join('');
+  const boundaries = cssRuleBoundaries(cssText);
+  const snapped: string[] = [];
+  let from = 0;
+  let at = 0;
+  for (let i = 0; i < splits.length - 1; i++) {
+    at += splits[i].length;
+    const boundary = nextCssRuleBoundary(
+      boundaries,
+      Math.max(at, from),
+      cssText.length,
+    );
+    snapped.push(cssText.substring(from, boundary));
+    from = boundary;
+  }
+  snapped.push(cssText.substring(from));
+  return snapped;
+}
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
index cd7bdbb596..0b18acd6b0 100644
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/packages/rrweb-snapshot/test/css.test.ts
@@ -5,7 +5,11 @@ import { describe, it, beforeEach, expect } from 'vitest';
 import { mediaSelectorPlugin, pseudoClassPlugin } from '../src/css';
 import postcss, { type AcceptedPlugin } from 'postcss';
 import { JSDOM } from 'jsdom';
-import { splitCssText, stringifyStylesheet } from './../src/utils';
+import {
+  snapCssSplitsToRuleBoundaries,
+  splitCssText,
+  stringifyStylesheet,
+} from './../src/utils';
 import { applyCssSplits } from './../src/rebuild';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -408,13 +412,74 @@ describe('applyCssSplits css rejoiner', function () {
       '/* rr_split */',
     );
     applyCssSplits(sn3, markedCssText, true, mockLastUnusedArg);
+    // the split points move to the end of the rule they landed in, so each
+    // text node holds whole rules rather than half of one
     expect((sn3.childNodes[0] as textNode).textContent).toEqual(
-      badStartThird.replace('.a:hover', '.a:hover,\n.a.\\:hover'),
+      '.a:hover,\n.a.\\:hover { background-color: red; }',
     );
     expect((sn3.childNodes[1] as textNode).textContent).toEqual(
-      badMidThird.replace('input:hover', 'input:hover,\ninput.\\:hover'),
+      ' input:hover,\ninput.\\:hover {border: 1px solid purple; }',
+    );
+    expect((sn3.childNodes[2] as textNode).textContent).toEqual('');
+    expect(
+      (sn3.childNodes[0] as textNode).textContent +
+        (sn3.childNodes[1] as textNode).textContent +
+        (sn3.childNodes[2] as textNode).textContent,
+    ).toEqual(
+      [badStartThird, badMidThird, badEndThird]
+        .join('')
+        .replace('.a:hover', '.a:hover,\n.a.\\:hover')
+        .replace('input:hover', 'input:hover,\ninput.\\:hover'),
+    );
+  });
+
+  it('moves a split point which lands inside a rule to the end of that rule', () => {
+    const markedCssText = [
+      '.a { color: red; }.b { col',
+      'or: green; }.c { color: blue; }',
+    ].join('/* rr_split */');
+    applyCssSplits(sn, markedCssText, false, mockLastUnusedArg);
+    expect((sn.childNodes[0] as textNode).textContent).toEqual(
+      '.a { color: red; }.b { color: green; }',
+    );
+    expect((sn.childNodes[1] as textNode).textContent).toEqual(
+      '.c { color: blue; }',
+    );
+  });
+
+  it('survives a sibling text node being inserted between the splits', () => {
+    // a later mutation can insert a text node between these two, which is the
+    // whole reason the split is preserved; the css has to stay valid when it
+    // does
+    const markedCssText = [
+      '.a { color: red; }.b { col',
+      'or: green; }.c { color: blue; }',
+    ].join('/* rr_split */');
+    applyCssSplits(sn, markedCssText, false, mockLastUnusedArg);
+    const inserted = '.inserted { color: pink; }';
+    expect(
+      (sn.childNodes[0] as textNode).textContent +
+        inserted +
+        (sn.childNodes[1] as textNode).textContent,
+    ).toEqual(
+      '.a { color: red; }.b { color: green; }' +
+        inserted +
+        '.c { color: blue; }',
+    );
+  });
+
+  it('does not mistake braces inside strings for the end of a rule', () => {
+    const markedCssText = [
+      '.a::after { content: "}',
+      '"; }.b { color: red; }',
+    ].join('/* rr_split */');
+    applyCssSplits(sn, markedCssText, false, mockLastUnusedArg);
+    expect((sn.childNodes[0] as textNode).textContent).toEqual(
+      '.a::after { content: "}"; }',
+    );
+    expect((sn.childNodes[1] as textNode).textContent).toEqual(
+      '.b { color: red; }',
     );
-    expect((sn3.childNodes[2] as textNode).textContent).toEqual(badEndThird);
   });
 
   it('maintains entire css text when there are too few child nodes', () => {
@@ -434,3 +499,49 @@ describe('applyCssSplits css rejoiner', function () {
     );
   });
 });
+
+describe('snapCssSplitsToRuleBoundaries', function () {
+  it('leaves splits which already sit on a rule boundary alone', () => {
+    const splits = ['.a { color: red; }', '.b { color: green; }'];
+    expect(snapCssSplitsToRuleBoundaries(splits)).toEqual(splits);
+  });
+
+  it('moves a split point forward to the end of the rule', () => {
+    expect(
+      snapCssSplitsToRuleBoundaries([
+        '.a { col',
+        'or: red; }.b { color: green; }',
+      ]),
+    ).toEqual(['.a { color: red; }', '.b { color: green; }']);
+  });
+
+  it('ignores braces inside strings and comments', () => {
+    expect(
+      snapCssSplitsToRuleBoundaries([
+        '.a { content: "}"; /* } */ ',
+        '}.b { color: red; }',
+      ]),
+    ).toEqual(['.a { content: "}"; /* } */ }', '.b { color: red; }']);
+  });
+
+  it('keeps nested at-rules together', () => {
+    expect(
+      snapCssSplitsToRuleBoundaries([
+        '@media print { .a { color',
+        ': red; } }.b { color: green; }',
+      ]),
+    ).toEqual(['@media print { .a { color: red; } }', '.b { color: green; }']);
+  });
+
+  it('empties trailing splits when everything snapped into an earlier one', () => {
+    expect(
+      snapCssSplitsToRuleBoundaries(['.a { col', 'or', ': red; }']),
+    ).toEqual(['.a { color: red; }', '', '']);
+  });
+
+  it('is a no-op for a single split', () => {
+    expect(snapCssSplitsToRuleBoundaries(['.a { color'])).toEqual([
+      '.a { color',
+    ]);
+  });
+});