Add stripping of css comments and also semicolons to the `normalizeCs…

…sString` function (thanks Justin). Add test to show when this matters

packages/rrweb-snapshot/src/utils.ts

@@ -443,10 +443,12 @@ export function absolutifyURLs(cssText: string | null, href: string): string {
   );
 }
 
-function normalizeCssString(cssText: string): string {
-  // remove spaces
-  // TODO: normalize other differences between css as authored vs. stringifyStylesheet
-  return cssText.replace(/[\s]/g, '');
+/**
+ * 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, '');
 }
 
 /**

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

@@ -109,6 +109,26 @@ describe('css splitter', () => {
     }
   });
 
+  it('finds css textElement splits correctly when comments are present', () => {
+    const window = new Window({ url: 'https://localhost:8080' });
+    const document = window.document;
+    // as authored, with comment, missing semicolons
+    document.head.innerHTML =
+      '<style>.a{color:red}.b{color:blue} /* author comment */</style>';
+    const style = document.querySelector('style');
+    if (style) {
+      style.append('/* author comment */.a{color:red}.b{color:green}');
+
+      // how it is currently stringified (spaces present)
+      const expected = [
+        '.a { color: red; } .b { color: blue; }',
+        '.a { color: red; } .b { color: green; }',
+      ];
+      const browserSheet = expected.join('');
+      expect(splitCssText(browserSheet, style)).toEqual(expected);
+    }
+  });
+
   it('finds css textElement splits correctly when vendor prefixed rules have been removed', () => {
     const style = JSDOM.fragment(`<style></style>`).querySelector('style');
     if (style) {

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

@@ -10,7 +10,7 @@ import {
   createCache,
 } from '../src/rebuild';
 import { NodeType } from '../src/types';
-import { createMirror, Mirror } from '../src/utils';
+import { createMirror, Mirror, normalizeCssString } from '../src/utils';
 
 const expect = _expect as unknown as {
   <T = unknown>(actual: T): {
@@ -20,7 +20,7 @@ const expect = _expect as unknown as {
 
 expect.extend({
   toMatchCss: function (received: string, expected: string) {
-    const pass = normCss(received) === normCss(expected);
+    const pass = normalizeCssString(received) === normalizeCssString(expected);
     const message: () => string = () =>
       pass
         ? ''
@@ -32,10 +32,6 @@ expect.extend({
   },
 });
 
-function normCss(cssText: string): string {
-  return cssText.replace(/[\s;]/g, '');
-}
-
 function getDuration(hrtime: [number, number]) {
   const [seconds, nanoseconds] = hrtime;
   return seconds * 1000 + nanoseconds / 1000000;