fix: Fix CSS rules captured in Safari (#86)

Safari does not escape `:` in attribute selectors correctly, so we need
to do that instead.

See rrweb-io#1208

ref getsentry/sentry-javascript#7703

---------

Co-authored-by: Billy Vong <[email protected]>

Author: mydea

packages/rrweb-snapshot/src/snapshot.ts

@@ -70,6 +70,18 @@ function getCssRuleString(rule: CSSRule): string {
       // ignore
     }
   }
+
+  return validateStringifiedCssRule(cssStringified);
+}
+
+export function validateStringifiedCssRule(cssStringified: string): string {
+  // Safari does not escape selectors with : properly
+  if (cssStringified.indexOf(':') > -1) {
+    // Replace e.g. [aa:bb] with [aa\\:bb]
+    const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+    return cssStringified.replace(regex, '$1\\$2');
+  }
+
   return cssStringified;
 }
 
@@ -80,7 +92,7 @@ function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
 function stringifyStyleSheet(sheet: CSSStyleSheet): string {
   return sheet.cssRules
     ? Array.from(sheet.cssRules)
-        .map((rule) => rule.cssText || '')
+        .map((rule) => rule.cssText ? validateStringifiedCssRule(rule.cssText) : '')
         .join('')
     : '';
 }

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

@@ -1,4 +1,5 @@
 import { parse, Rule, Media } from '../src/css';
+import {validateStringifiedCssRule} from './../src/snapshot';
 
 describe('css parser', () => {
   it('should save the filename and source', () => {
@@ -106,4 +107,15 @@ describe('css parser', () => {
     decl = rule.declarations![0];
     expect(decl.parent).toEqual(rule);
   });
+
+  it('parses : in attribute selectors correctly', () => {
+    const out1 = validateStringifiedCssRule('[data-foo] { color: red; }');
+    expect(out1).toEqual('[data-foo] { color: red; }');
+
+    const out2 = validateStringifiedCssRule('[data-foo:other] { color: red; }');
+    expect(out2).toEqual('[data-foo\\:other] { color: red; }');
+
+    const out3 = validateStringifiedCssRule('[data-aa\\:other] { color: red; }');
+    expect(out3).toEqual('[data-aa\\:other] { color: red; }');
+  })
 });

packages/rrweb-snapshot/typings/snapshot.d.ts

@@ -1,5 +1,6 @@
 import { serializedNodeWithId, INode, idNodeMap, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
 export declare const IGNORED_NODE = -2;
+export declare function validateStringifiedCssRule(cssStringified: string): string;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
 export declare function absoluteToDoc(doc: Document, attributeValue: string): string;
 export declare function transformAttribute(doc: Document, element: HTMLElement, _tagName: string, _name: string, value: string | null, maskAllText: boolean, unmaskTextSelector: string | undefined | null, maskTextFn: MaskTextFn | undefined): string | null;