feat: add new css parser - postcss (#1458)

* feat: add new css parser

* make selectors change

* selectors and tests

* media changes

* remove old css references

* better variable name

* use postcss and port tests

* fix media test

* inline plugins

* fix failing multiline selector

* correct test result

* move tests to correct file

* cleanup all tests

* remove unused css-tree

* update bundle

* cleanup dependencies

* revert config files to master

* remove d.ts files

* update snapshot

* reset rebuilt test

* apply fuzzy css matching

* remove extra test

* Fix imports

* Newer versions of nswapi break rrdom-nodejs tests.
Example:
 FAIL  test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll
TypeError: e[api] is not a function
 ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37
 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113
 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32
 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36
 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24

* Migrate from jest to vitest

* Order of selectors has changed with postcss

* Remove unused eslint

---------

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

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

@@ -3,7 +3,12 @@
  */
 import { describe, it, test, expect } from 'vitest';
 import { NodeType, serializedNode } from '../src/types';
-import { extractFileExtension, isNodeMetaEqual } from '../src/utils';
+import {
+  escapeImportStatement,
+  extractFileExtension,
+  fixSafariColons,
+  isNodeMetaEqual,
+} from '../src/utils';
 import type { serializedNodeWithId } from 'rrweb-snapshot';
 
 describe('utils', () => {
@@ -199,4 +204,80 @@ describe('utils', () => {
       expect(extension).toBe('js');
     });
   });
+
+  describe('escapeImportStatement', () => {
+    it('parses imports with quotes correctly', () => {
+      const out1 = escapeImportStatement({
+        cssText: `@import url("/foo.css;900;800"");`,
+        href: '/foo.css;900;800"',
+        media: {
+          length: 0,
+        },
+        layerName: null,
+        supportsText: null,
+      } as unknown as CSSImportRule);
+      expect(out1).toEqual(`@import url("/foo.css;900;800\\"");`);
+
+      const out2 = escapeImportStatement({
+        cssText: `@import url("/foo.css;900;800"") supports(display: flex);`,
+        href: '/foo.css;900;800"',
+        media: {
+          length: 0,
+        },
+        layerName: null,
+        supportsText: 'display: flex',
+      } as unknown as CSSImportRule);
+      expect(out2).toEqual(
+        `@import url("/foo.css;900;800\\"") supports(display: flex);`,
+      );
+
+      const out3 = escapeImportStatement({
+        cssText: `@import url("/foo.css;900;800"");`,
+        href: '/foo.css;900;800"',
+        media: {
+          length: 1,
+          mediaText: 'print, screen',
+        },
+        layerName: null,
+        supportsText: null,
+      } as unknown as CSSImportRule);
+      expect(out3).toEqual(`@import url("/foo.css;900;800\\"") print, screen;`);
+
+      const out4 = escapeImportStatement({
+        cssText: `@import url("/foo.css;900;800"") layer(layer-1);`,
+        href: '/foo.css;900;800"',
+        media: {
+          length: 0,
+        },
+        layerName: 'layer-1',
+        supportsText: null,
+      } as unknown as CSSImportRule);
+      expect(out4).toEqual(
+        `@import url("/foo.css;900;800\\"") layer(layer-1);`,
+      );
+
+      const out5 = escapeImportStatement({
+        cssText: `@import url("/foo.css;900;800"") layer;`,
+        href: '/foo.css;900;800"',
+        media: {
+          length: 0,
+        },
+        layerName: '',
+        supportsText: null,
+      } as unknown as CSSImportRule);
+      expect(out5).toEqual(`@import url("/foo.css;900;800\\"") layer;`);
+    });
+  });
+  describe('fixSafariColons', () => {
+    it('parses : in attribute selectors correctly', () => {
+      const out1 = fixSafariColons('[data-foo] { color: red; }');
+      expect(out1).toEqual('[data-foo] { color: red; }');
+
+      const out2 = fixSafariColons('[data-foo:other] { color: red; }');
+      expect(out2).toEqual('[data-foo\\:other] { color: red; }');
+
+      const out3 = fixSafariColons('[data-aa\\:other] { color: red; }');
+      expect(out3).toEqual('[data-aa\\:other] { color: red; }');
+    });
+  });
 });