fix: Incorrect parsing of functional pseudo class css selector (#169)

This fixes a parsing issue of CSS selectors that use a functional pseudo class with multiple arguments. For example, ``` .foo:has(button,div) {} ``` Would get parsed as 2 selectors: `.foo:has(button` and `div)` - this results in an invalid stylesheet and looks like the replay is broken. --------- Co-authored-by: Ryan Albrecht <[email protected]>
getsentry · Apr 26, 2024 · 7e60935 · 7e60935
1 parent dcf058c
commit 7e60935
Showing 1 changed file with 79 additions and 0 deletions.
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
@@ -192,6 +192,85 @@ li[attr="has,comma"] a:hover {
     ).toEqual(1);
   });
 
+  it.each([
+    ['.foo,.bar {}', ['.foo', '.bar']],
+    ['.bar:has(:disabled) {}', ['.bar:has(:disabled)']],
+    ['.bar:has(input, button) {}', ['.bar:has(input, button)']],
+    [
+      '.bar:has(input:is(:disabled),button:has(:disabled)) {}',
+      ['.bar:has(input:is(:disabled),button:has(:disabled))'],
+    ],
+    [
+      '.bar:has(div, input:is(:disabled), button) {}',
+      ['.bar:has(div, input:is(:disabled), button)'],
+    ],
+    [
+      '.bar:has(div, input:is(:disabled),button:has(:disabled,.baz)) {}',
+      ['.bar:has(div, input:is(:disabled),button:has(:disabled,.baz))'],
+    ],
+    [
+      '.bar:has(input), .foo:has(input, button), .baz {}',
+      ['.bar:has(input)', '.foo:has(input, button)', '.baz'],
+    ],
+    [
+      '.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz)){color: red;}',
+      [
+        '.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz))',
+      ],
+    ],
+    [
+      '.bar:has(:has(:has(a), :has(:has(:has(b, :has(a), c), e))), input:is(:disabled), button) {}',
+      [
+        '.bar:has(:has(:has(a), :has(:has(:has(b, :has(a), c), e))), input:is(:disabled), button)',
+      ],
+    ],
+    [
+      '.foo,.bar:has(input:is(:disabled)){color: red;}',
+      ['.foo', '.bar:has(input:is(:disabled))'],
+    ],
+    [
+      '.foo,.bar:has(input:is(:disabled),button:has(:disabled,.baz)){color: red;}',
+      ['.foo', '.bar:has(input:is(:disabled),button:has(:disabled,.baz))'],
+    ],
+    [
+      '.foo,.bar:has(input:is(:disabled),button:has(:disabled), div:has(:disabled,.baz)){color: red;}',
+      [
+        '.foo',
+        '.bar:has(input:is(:disabled),button:has(:disabled), div:has(:disabled,.baz))',
+      ],
+    ],
+    [
+      '.foo,.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz)){color: red;}',
+      [
+        '.foo',
+        '.bar:has(input:is(:disabled),button:has(:disabled,.baz), div:has(:disabled,.baz))',
+      ],
+    ],
+    ['.bar:has(:disabled), .foo {}', ['.bar:has(:disabled)', '.foo']],
+    [
+      '.bar:has(input:is(:disabled),.foo,button:is(:disabled)), .foo {}',
+      ['.bar:has(input:is(:disabled),.foo,button:is(:disabled))', '.foo'],
+    ],
+    [
+      '.bar:has(input:is(:disabled),.foo,button:is(:disabled)), .foo:has(input, button), .baz,  {}',
+      [
+        '.bar:has(input:is(:disabled),.foo,button:is(:disabled))',
+        '.foo:has(input, button)',
+        '.baz',
+      ],
+    ],
+  ])(
+    'can parse selector(s) with functional pseudo classes: %s',
+    (cssText, expected) => {
+      expect(
+        parse(
+          cssText,
+          // @ts-ignore
+        ).stylesheet?.rules[0].selectors,
+      ).toEqual(expected);
+    },
+  );
+
   it('parses imports with quotes correctly', () => {
     const out1 = escapeImportStatement({
       cssText: `@import url("/foo.css;900;800"");`,