better splitting of selectors (#1440)

* better splitting of selectors - overlapping with #1401 
* Add test from example at https://github.com/PostHog/posthog/pull/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 <eoghan@getthere.ie>

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"");`,