better splitting of selectors (#1440)

* better splitting of selectors - overlapping with #1401 
* Add test from example at PostHog/posthog#21427
* ignore brackets inside selector strings
* Add another test as noticed that it's possible to escape strings
* Ensure we are ignoring commas within strings

Co-authored-by: Eoghan Murray <[email protected]>

.changeset/modern-doors-watch.md

@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': patch
+---
+
+better nested css selector splitting when commas or brackets happen to be in quoted text

packages/rrweb-snapshot/src/css.ts

@@ -437,6 +437,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
     if (!m) {
       return;
     }
+
     /* @fix Remove all comments from selectors
      * http://ostermiller.org/findcomment.html */
     const cleanedInput = m[0]
@@ -463,16 +464,25 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
     let currentSegment = '';
     let depthParentheses = 0; // Track depth of parentheses
     let depthBrackets = 0; // Track depth of square brackets
+    let currentStringChar = null;
 
     for (const char of input) {
-      if (char === '(') {
+      const hasStringEscape = currentSegment.endsWith('\\');
+
+      if (currentStringChar) {
+        if (currentStringChar === char && !hasStringEscape) {
+          currentStringChar = null;
+        }
+      } else if (char === '(') {
         depthParentheses++;
       } else if (char === ')') {
         depthParentheses--;
       } else if (char === '[') {
         depthBrackets++;
       } else if (char === ']') {
         depthBrackets--;
+      } else if ('\'"'.includes(char)) {
+        currentStringChar = char;
       }
 
       // Split point is a comma that is not inside parentheses or square brackets

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

@@ -148,6 +148,50 @@ describe('css parser', () => {
     expect(out3).toEqual('[data-aa\\:other] { color: red; }');
   });
 
+  it('parses nested commas in selectors correctly', () => {
+    const result = parse(
+      `
+body > ul :is(li:not(:first-of-type) a:hover, li:not(:first-of-type).active a) {
+  background: red;
+}
+`,
+    );
+    expect((result.stylesheet!.rules[0] as Rule)!.selectors!.length).toEqual(1);
+
+    const trickresult = parse(
+      `
+li[attr="weirdly("] a:hover, li[attr="weirdly)"] a {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (trickresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(2);
+
+    const weirderresult = parse(
+      `
+li[attr="weirder\\"("] a:hover, li[attr="weirder\\")"] a {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (weirderresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(2);
+
+    const commainstrresult = parse(
+      `
+li[attr="has,comma"] a:hover {
+  background-color: red;
+}
+`,
+    );
+    expect(
+      (commainstrresult.stylesheet!.rules[0] as Rule)!.selectors!.length,
+    ).toEqual(1);
+  });
+
   it('parses imports with quotes correctly', () => {
     const out1 = escapeImportStatement({
       cssText: `@import url("/foo.css;900;800"");`,