Solve the same bug another way; by normalization

packages/rrweb-snapshot/src/utils.ts

@@ -80,7 +80,7 @@
  * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
  * This function tries to correct the escaping.
  * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
  * @param cssImportRule
  * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
  */
 export function escapeImportStatement(rule: CSSImportRule): string {
@@ -450,8 +450,12 @@
  * Intention is to normalize by remove spaces, semicolons and CSS comments
  * so that we can compare css as authored vs. output of stringifyStylesheet
  */
-export function normalizeCssString(cssText: string): string {
-  return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, '');
+export function normalizeCssString(cssText: string, _testNoPxNorm=false): string {
+  if (_testNoPxNorm) {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, '');
+  } else {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, '').replace(/0px/g, '0');
+  }
 }
 
 /**
@@ -463,19 +467,20 @@
 export function splitCssText(
   cssText: string,
   style: HTMLStyleElement,
+  _testNoPxNorm=false,
 ): string[] {
   const childNodes = Array.from(style.childNodes);
   const splits: string[] = [];
   let iterLimit = 0;
   if (childNodes.length > 1 && cssText && typeof cssText === 'string') {
-    let cssTextNorm = normalizeCssString(cssText);
+    let cssTextNorm = normalizeCssString(cssText, _testNoPxNorm);
     const normFactor = cssTextNorm.length / cssText.length;
     for (let i = 1; i < childNodes.length; i++) {
       if (
         childNodes[i].textContent &&
         typeof childNodes[i].textContent === 'string'
       ) {
-        const textContentNorm = normalizeCssString(childNodes[i].textContent!);
+        const textContentNorm = normalizeCssString(childNodes[i].textContent!, _testNoPxNorm);
         let j = 3;
         for (; j < textContentNorm.length; j++) {
           if (
@@ -538,7 +543,7 @@
                 splits.push(cssText);
                 return splits;
               }
-              const normPart = normalizeCssString(cssText.substring(0, k));
+              const normPart = normalizeCssString(cssText.substring(0, k), _testNoPxNorm);
               if (normPart.length === splitNorm) {
                 splits.push(cssText.substring(0, k));
                 cssText = cssText.substring(k);

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

@@ -247,7 +247,7 @@ describe('css splitter', () => {
       // happydom? bug avoid: strangely a greater than symbol in the template string below
       // e.g. '.prose > :last-child' causes more than one child to be appended
       style.append(`ass~="not-prose"] *)) {
-    margin-top: 0;  /* this line triggers the bug as we would do a simpler match if it was authored as 'margin-top: 0px;' */
+    margin-top: 0;  /* cssRules transforms this to '0px' which was preventing matching prior to normalization */
 }
 
 .section-news-v3-detail .news-cnt-wrapper .plugins-wrapper2 :where(.prose :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
@@ -273,7 +273,10 @@ describe('css splitter', () => {
       ];
       const browserSheet = expected.join('');
       expect(stringifyStylesheet(style.sheet!)).toEqual(browserSheet);
-      expect(splitCssText(browserSheet, style)).toEqual(expected);
+      let _testNoPxNorm = true; // trigger the original motivating scenario for this test
+      expect(splitCssText(browserSheet, style, _testNoPxNorm)).toEqual(expected);
+      _testNoPxNorm = false; // this case should also be solved by normalizing '0px' -> '0'
+      expect(splitCssText(browserSheet, style, _testNoPxNorm)).toEqual(expected);
     }
   });