Perf: don't run the regex replace unless the selectorText contains a colon (#1280)

* Perf: don't run the regex replace unless the selectorText contains a colon (rules generally contain colons)

* Need to check type before querying selectorText property - also good as it means we only try to fix colons at the leaf level
---------

Authored-by: eoghan murray <eoghan@getthere.ie>

packages/rrweb-snapshot/src/snapshot.ts

@@ -22,7 +22,6 @@ import {
   stringifyStylesheet,
   getInputType,
   toLowerCase,
-  validateStringifiedCssRule,
 } from './utils';
 
 let _id = 1;

packages/rrweb-snapshot/src/utils.ts

@@ -119,26 +119,29 @@ export function stringifyRule(rule: CSSRule): string {
     } catch (error) {
       // ignore
     }
+  } else if (isCSSStyleRule(rule) && rule.selectorText.includes(':')) {
+    // Safari does not escape selectors with : properly
+    // see https://bugs.webkit.org/show_bug.cgi?id=184604
+    return fixSafariColons(rule.cssText);
   }
 
-  return validateStringifiedCssRule(importStringified || rule.cssText);
+  return importStringified || rule.cssText;
 }
 
-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;
+export function fixSafariColons(cssStringified: string): string {
+  // Replace e.g. [aa:bb] with [aa\\:bb]
+  const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+  return cssStringified.replace(regex, '$1\\$2');
 }
 
 export function isCSSImportRule(rule: CSSRule): rule is CSSImportRule {
   return 'styleSheet' in rule;
 }
 
+export function isCSSStyleRule(rule: CSSRule): rule is CSSStyleRule {
+  return 'selectorText' in rule;
+}
+
 export class Mirror implements IMirror<Node> {
   private idNodeMap: idNodeMap = new Map();
   private nodeMetaMap: nodeMetaMap = new WeakMap();

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

@@ -1,8 +1,5 @@
 import { parse, Rule, Media } from '../src/css';
-import {
-  validateStringifiedCssRule,
-  escapeImportStatement,
-} from './../src/utils';
+import { fixSafariColons, escapeImportStatement } from './../src/utils';
 
 describe('css parser', () => {
   it('should save the filename and source', () => {
@@ -112,15 +109,13 @@ describe('css parser', () => {
   });
 
   it('parses : in attribute selectors correctly', () => {
-    const out1 = validateStringifiedCssRule('[data-foo] { color: red; }');
+    const out1 = fixSafariColons('[data-foo] { color: red; }');
     expect(out1).toEqual('[data-foo] { color: red; }');
 
-    const out2 = validateStringifiedCssRule('[data-foo:other] { color: red; }');
+    const out2 = fixSafariColons('[data-foo:other] { color: red; }');
     expect(out2).toEqual('[data-foo\\:other] { color: red; }');
 
-    const out3 = validateStringifiedCssRule(
-      '[data-aa\\:other] { color: red; }',
-    );
+    const out3 = fixSafariColons('[data-aa\\:other] { color: red; }');
     expect(out3).toEqual('[data-aa\\:other] { color: red; }');
   });