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

* fix: Fix CSS rules captured in Safari

* Apply formatting changes

* add changeset

* fix

---------

Co-authored-by: mydea <mydea@users.noreply.github.com>

packages/rrweb-snapshot/src/snapshot.ts

@@ -22,6 +22,7 @@ import {
   getCssRulesString,
   getInputType,
   toLowerCase,
+  validateStringifiedCssRule,
 } from './utils';
 
 let _id = 1;
@@ -53,7 +54,9 @@ function getValidTagName(element: HTMLElement): Lowercase<string> {
 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/src/utils.ts

@@ -76,6 +76,17 @@ export function getCssRuleString(rule: CSSRule): string {
       // ignore
     }
   }
+  return validateStringifiedCssRule(cssStringified);
+}
+
+export function validateStringifiedCssRule(cssStringified: string): string {
+  // Safari does not escape selectors with : properly
+  if (cssStringified.includes(':')) {
+    // Replace e.g. [aa:bb] with [aa\\:bb]
+    const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+    return cssStringified.replace(regex, '$1\\$2');
+  }
+
   return cssStringified;
 }