No neg lookbehind (rrweb-io#1493)

* Older versions of Safari 16 don't support lookbehind assertions - https://caniuse.com/js-regexp-lookbehind * Refactor to show the similarity between these two regexes * Apply formatting changes * Create no-neg-lookbehind.md --------- Co-authored-by: eoghanmurray <[email protected]>
amplitude · Aug 6, 2024 · 5b85646 · 5b85646
1 parent fb075f1
commit 5b85646
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/.changeset/no-neg-lookbehind.md b/.changeset/no-neg-lookbehind.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Replay: Replace negative lookbehind in regexes from css parser as it causes issues with Safari 16
diff --git a/.changeset/silent-plants-perform.md b/.changeset/silent-plants-perform.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Return early for child same origin frames
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
@@ -424,6 +424,17 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
    * Parse selector.
    */
 
+  // originally from https://github.com/NxtChg/pieces/blob/3eb39c8287a97632e9347a24f333d52d916bc816/js/css_parser/css_parse.js#L46C1-L47C1
+  const selectorMatcher = new RegExp(
+    '^((' +
+      [
+        /[^\\]"(?:\\"|[^"])*"/.source, // consume any quoted parts (checking that the double quote isn't itself escaped)
+        /[^\\]'(?:\\'|[^'])*'/.source, // same but for single quotes
+        '[^{]',
+      ].join('|') +
+      ')+)',
+  );
+
   function selector() {
     whitespace();
     while (css[0] == '}') {
@@ -432,8 +443,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
       whitespace();
     }
 
-    // Use match logic from https://github.com/NxtChg/pieces/blob/3eb39c8287a97632e9347a24f333d52d916bc816/js/css_parser/css_parse.js#L46C1-L47C1
-    const m = match(/^(((?<!\\)"(?:\\"|[^"])*"|(?<!\\)'(?:\\'|[^'])*'|[^{])+)/);
+    const m = match(selectorMatcher);
     if (!m) {
       return;
     }
@@ -869,8 +879,8 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
         name +
         '\\s*((?:' +
         [
-          '(?<!\\\\)"(?:\\\\"|[^"])*"',
-          "(?<!\\\\)'(?:\\\\'|[^'])*'",
+          /[^\\]"(?:\\"|[^"])*"/.source, // consume any quoted parts (checking that the double quote isn't itself escaped)
+          /[^\\]'(?:\\'|[^'])*'/.source, // same but for single quotes
           '[^;]',
         ].join('|') +
         ')+);',