Fix adapt css with split (#1600)

Fix for #1575 where postcss was raising an exception

* adapt the entire CSS as a whole in one pass with postcss, rather than adapting each split part separately
* break up the postcss output again and assign to individual text nodes (kind of inverse of splitCssText at record side)
* impose an upper bound of 30 iterations on the substring searches to preempt possible pathological behavior
* add tests to demonstrate the scenario and prevent regression

More technical details:
* Fix algorithm; checks against `ix_end` within loop were incorrect when `ix_start` was bigger than zero.  
* Fix that length check against wrong array was causing 'should record style mutations with multiple child nodes and replay them correctly' test to fail. 
Note on last point: I haven't looked into things more deeply than that the test was complaining about missing .length after `replayer.pause(1000);`

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

@@ -289,6 +289,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,