From 11f61776a7caac291b48e77999b6b0367e632a87 Mon Sep 17 00:00:00 2001
From: Jesse Wang <144086244+jxiwang@users.noreply.github.com>
Date: Mon, 10 Jun 2024 11:07:29 -0700
Subject: [PATCH] Revert "Switch CSS parser to better handle AddHover"

---
 .changeset/rich-dots-lay.md              |  5 --
 packages/rrweb-snapshot/src/css.ts       | 62 +++---------------------
 packages/rrweb-snapshot/test/css.test.ts | 29 -----------
 packages/rrweb-snapshot/tsconfig.json    |  1 -
 4 files changed, 6 insertions(+), 91 deletions(-)
 delete mode 100644 .changeset/rich-dots-lay.md

diff --git a/.changeset/rich-dots-lay.md b/.changeset/rich-dots-lay.md
deleted file mode 100644
index ba889e446e..0000000000
--- a/.changeset/rich-dots-lay.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'rrweb-snapshot': patch
----
-
-Fix css parsing errors
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
index 82b4c41f96..d7a413eb67 100644
--- a/packages/rrweb-snapshot/src/css.ts
+++ b/packages/rrweb-snapshot/src/css.ts
@@ -431,71 +431,21 @@ export function parse(css: string, options: ParserOptions = {}) {
    */
 
   function selector() {
-    whitespace();
-    while (css[0] == '}') {
-      error('extra closing bracket');
-      css = css.slice(1);
-      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(/^([^{]+)/);
     if (!m) {
       return;
     }
     /* @fix Remove all comments from selectors
      * http://ostermiller.org/findcomment.html */
-    const cleanedInput = m[0]
-      .trim()
+    return trim(m[0])
       .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
-
-      // Handle strings by replacing commas inside them
       .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (m) => {
         return m.replace(/,/g, '\u200C');
+      })
+      .split(/\s*(?![^(]*\)),\s*/)
+      .map((s) => {
+        return s.replace(/\u200C/g, ',');
       });
-
-    // Split using a custom function and restore commas in strings
-    return customSplit(cleanedInput).map((s) =>
-      s.replace(/\u200C/g, ',').trim(),
-    );
-  }
-
-  /**
-   * Split selector correctly, ensuring not to split on comma if inside ().
-   */
-
-  function customSplit(input: string) {
-    const result = [];
-    let currentSegment = '';
-    let depthParentheses = 0; // Track depth of parentheses
-    let depthBrackets = 0; // Track depth of square brackets
-
-    for (const char of input) {
-      if (char === '(') {
-        depthParentheses++;
-      } else if (char === ')') {
-        depthParentheses--;
-      } else if (char === '[') {
-        depthBrackets++;
-      } else if (char === ']') {
-        depthBrackets--;
-      }
-
-      // Split point is a comma that is not inside parentheses or square brackets
-      if (char === ',' && depthParentheses === 0 && depthBrackets === 0) {
-        result.push(currentSegment);
-        currentSegment = '';
-      } else {
-        currentSegment += char;
-      }
-    }
-
-    // Add the last segment
-    if (currentSegment) {
-      result.push(currentSegment);
-    }
-
-    return result;
   }
 
   /**
diff --git a/packages/rrweb-snapshot/test/css.test.ts b/packages/rrweb-snapshot/test/css.test.ts
index d3c9482a90..2818386071 100644
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/packages/rrweb-snapshot/test/css.test.ts
@@ -78,35 +78,6 @@ describe('css parser', () => {
     expect(errors[0].filename).toEqual('foo.css');
   });
 
-  it('should parse selector with comma nested inside ()', () => {
-    const result = parse(
-      '[_nghost-ng-c4172599085]:not(.fit-content).aim-select:hover:not(:disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--disabled, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--invalid, [_nghost-ng-c4172599085]:not(.fit-content).aim-select--active) { border-color: rgb(84, 84, 84); }',
-    );
-
-    expect(result.parent).toEqual(null);
-
-    const rules = result.stylesheet!.rules;
-    expect(rules.length).toEqual(1);
-
-    let rule = rules[0] as Rule;
-    expect(rule.parent).toEqual(result);
-    expect(rule.selectors?.length).toEqual(1);
-
-    let decl = rule.declarations![0];
-    expect(decl.parent).toEqual(rule);
-  });
-
-  it('parses { and } in attribute selectors correctly', () => {
-    const result = parse('foo[someAttr~="{someId}"] { color: red; }');
-    const rules = result.stylesheet!.rules;
-
-    expect(rules.length).toEqual(1);
-
-    const rule = rules[0] as Rule;
-
-    expect(rule.selectors![0]).toEqual('foo[someAttr~="{someId}"]');
-  });
-
   it('should set parent property', () => {
     const result = parse(
       'thing { test: value; }\n' +
diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
index 2766ca4a82..879f459ae4 100644
--- a/packages/rrweb-snapshot/tsconfig.json
+++ b/packages/rrweb-snapshot/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "target": "ES6",
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Node",