Add workaround for Chrome/Edge css import escaping bug (#1287)

* Upgrade to typescript 4.9.5

* Apply formatting changes

* Add workaround for chrome incorrect escaping bug

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259

* Apply formatting changes

* Create itchy-dryers-double.md

* Create rich-jars-remember.md

* Apply formatting changes

* Update packages/rrweb-snapshot/src/css.ts

* Apply formatting changes

* Update packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

* Apply formatting changes

* Update snapshot

* Apply formatting changes

* Rename and refactor fixBrowserCompatibilityIssuesInCSSImports, getCssRulesString and getCssRuleString based on @eoghanmurray feedback

* Apply formatting changes

* Apply formatting changes

packages/rrweb/package.json

@@ -51,7 +51,7 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@types/chai": "^4.1.6",
-    "@types/dom-mediacapture-transform": "^0.1.3",
+    "@types/dom-mediacapture-transform": "0.1.4",
     "@types/inquirer": "^8.2.1",
     "@types/jest": "^29.5.0",
     "@types/jest-image-snapshot": "^6.1.0",

packages/rrweb/src/record/constructable-stylesheets.d.ts

@@ -1,10 +0,0 @@
-// This informs the TS compiler about constructed stylesheets.
-// It can be removed when this is fixed: https://github.com/Microsoft/TypeScript/issues/30022
-declare interface DocumentOrShadowRoot {
-  adoptedStyleSheets?: CSSStyleSheet[];
-}
-
-declare interface CSSStyleSheet {
-  replace?(text: string): Promise<CSSStyleSheet>;
-  replaceSync?(text: string): void;
-}

packages/rrweb/src/record/observers/canvas/canvas.ts

@@ -19,19 +19,19 @@ export default function initCanvasContextObserver(
       'getContext',
       function (
         original: (
-          this: ICanvas,
+          this: ICanvas | HTMLCanvasElement,
           contextType: string,
           ...args: Array<unknown>
         ) => void,
       ) {
         return function (
-          this: ICanvas,
+          this: ICanvas | HTMLCanvasElement,
           contextType: string,
           ...args: Array<unknown>
         ) {
           if (!isBlocked(this, blockClass, blockSelector, true)) {
             const ctxName = getNormalizedContextName(contextType);
-            if (!('__context' in this)) this.__context = ctxName;
+            if (!('__context' in this)) (this as ICanvas).__context = ctxName;
 
             if (
               setPreserveDrawingBufferToTrue &&

packages/rrweb/src/record/observers/canvas/serialize-args.ts

@@ -125,7 +125,7 @@ export function serializeArg(
     };
   }
 
-  return value as CanvasArg;
+  return value as unknown as CanvasArg;
 }
 
 export const serializeArgs = (

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -49,7 +49,10 @@ function patchGLPrototype(
           return function (this: typeof prototype, ...args: Array<unknown>) {
             const result = original.apply(this, args);
             saveWebGLVar(result, win, this);
-            if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
+            if (
+              'tagName' in this.canvas &&
+              !isBlocked(this.canvas, blockClass, blockSelector, true)
+            ) {
               const recordArgs = serializeArgs([...args], win, this);
               const mutation: canvasMutationWithType = {
                 type,

packages/rrweb/src/record/stylesheet-manager.ts

@@ -1,5 +1,5 @@
 import type { elementNode, serializedNodeWithId } from 'rrweb-snapshot';
-import { getCssRuleString } from 'rrweb-snapshot';
+import { stringifyRule } from 'rrweb-snapshot';
 import type {
   adoptedStyleSheetCallback,
   adoptedStyleSheetParam,
@@ -66,7 +66,7 @@ export class StylesheetManager {
           styleId,
           rules: rules.map((r, index) => {
             return {
-              rule: getCssRuleString(r),
+              rule: stringifyRule(r),
               index,
             };
           }),