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-snapshot/src/css.ts

@@ -345,7 +345,7 @@ export function parse(css: string, options: ParserOptions = {}) {
     whitespace();
     comments(rules);
     while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
-      if (node !== false) {
+      if (node) {
         rules.push(node);
         comments(rules);
       }
@@ -383,7 +383,7 @@ export function parse(css: string, options: ParserOptions = {}) {
   function comments(rules: Rule[] = []) {
     let c: Comment | void;
     while ((c = comment())) {
-      if (c !== false) {
+      if (c) {
         rules.push(c);
       }
       c = comment();

packages/rrweb-snapshot/src/snapshot.ts

@@ -19,7 +19,7 @@ import {
   isShadowRoot,
   maskInputValue,
   isNativeShadowDom,
-  getCssRulesString,
+  stringifyStylesheet,
   getInputType,
   toLowerCase,
   validateStringifiedCssRule,
@@ -554,7 +554,7 @@ function serializeTextNode(
         // to _only_ include the current rule(s) added by the text node.
         // So we'll be conservative and keep textContent as-is.
       } else if ((n.parentNode as HTMLStyleElement).sheet?.cssRules) {
-        textContent = getCssRulesString(
+        textContent = stringifyStylesheet(
           (n.parentNode as HTMLStyleElement).sheet!,
         );
       }
@@ -644,7 +644,7 @@ function serializeElementNode(
     });
     let cssText: string | null = null;
     if (stylesheet) {
-      cssText = getCssRulesString(stylesheet);
+      cssText = stringifyStylesheet(stylesheet);
     }
     if (cssText) {
       delete attributes.rel;
@@ -659,7 +659,7 @@ function serializeElementNode(
     // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element
     !(n.innerText || n.textContent || '').trim().length
   ) {
-    const cssText = getCssRulesString(
+    const cssText = stringifyStylesheet(
       (n as HTMLStyleElement).sheet as CSSStyleSheet,
     );
     if (cssText) {

packages/rrweb-snapshot/src/utils.ts

@@ -54,12 +54,51 @@ function fixBrowserCompatibilityIssuesInCSS(cssText: string): string {
   return cssText;
 }
 
-export function getCssRulesString(s: CSSStyleSheet): string | null {
+// Remove this declaration once typescript has added `CSSImportRule.supportsText` to the lib.
+declare interface CSSImportRule extends CSSRule {
+  readonly href: string;
+  readonly layerName: string | null;
+  readonly media: MediaList;
+  readonly styleSheet: CSSStyleSheet;
+  /**
+   * experimental API, currently only supported in firefox
+   * https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule/supportsText
+   */
+  readonly supportsText?: string | null;
+}
+
+/**
+ * Browsers sometimes incorrectly escape `@import` on `.cssText` statements.
+ * This function tries to correct the escaping.
+ * more info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259
+ * @param cssImportRule
+ * @returns `cssText` with browser inconsistencies fixed, or null if not applicable.
+ */
+export function escapeImportStatement(rule: CSSImportRule): string {
+  const { cssText } = rule;
+  if (cssText.split('"').length < 3) return cssText;
+
+  const statement = ['@import', `url(${JSON.stringify(rule.href)})`];
+  if (rule.layerName === '') {
+    statement.push(`layer`);
+  } else if (rule.layerName) {
+    statement.push(`layer(${rule.layerName})`);
+  }
+  if (rule.supportsText) {
+    statement.push(`supports(${rule.supportsText})`);
+  }
+  if (rule.media.length) {
+    statement.push(rule.media.mediaText);
+  }
+  return statement.join(' ') + ';';
+}
+
+export function stringifyStylesheet(s: CSSStyleSheet): string | null {
   try {
     const rules = s.rules || s.cssRules;
     return rules
       ? fixBrowserCompatibilityIssuesInCSS(
-          Array.from(rules).map(getCssRuleString).join(''),
+          Array.from(rules).map(stringifyRule).join(''),
         )
       : null;
   } catch (error) {
@@ -67,16 +106,22 @@ export function getCssRulesString(s: CSSStyleSheet): string | null {
   }
 }
 
-export function getCssRuleString(rule: CSSRule): string {
-  let cssStringified = rule.cssText;
+export function stringifyRule(rule: CSSRule): string {
+  let importStringified;
   if (isCSSImportRule(rule)) {
     try {
-      cssStringified = getCssRulesString(rule.styleSheet) || cssStringified;
-    } catch {
+      importStringified =
+        // for same-origin stylesheets,
+        // we can access the imported stylesheet rules directly
+        stringifyStylesheet(rule.styleSheet) ||
+        // work around browser issues with the raw string `@import url(...)` statement
+        escapeImportStatement(rule);
+    } catch (error) {
       // ignore
     }
   }
-  return validateStringifiedCssRule(cssStringified);
+
+  return validateStringifiedCssRule(importStringified || rule.cssText);
 }
 
 export function validateStringifiedCssRule(cssStringified: string): string {

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

@@ -490,7 +490,7 @@ exports[`integration tests [html file]: with-style-sheet-with-import.html 1`] =
   <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
   <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
   <title>with style sheet with import</title>
-  <style>body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
+  <style>@import url(\\"//fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&amp;family=Roboto:wght@100;300;400;500;700&amp;display=swap\\\\\\"\\");body { margin: 0px; background: url(\\"http://localhost:3030/a.jpg\\"); border-image: url(\\"data:image/svg+xml;utf8,&lt;svg xmlns=\\\\\\"http://www.w3.org/2000/svg\\\\\\" x=\\\\\\"0px\\\\\\" y=\\\\\\"0px\\\\\\" viewBox=\\\\\\"0 0 256 256\\\\\\"&gt;&lt;g&gt;&lt;g&gt;&lt;polygon points=\\\\\\"79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128\\\\\\"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;/svg&gt;\\") 100% / 1 / 0 stretch; }p { color: red; background: url(\\"http://localhost:3030/css/b.jpg\\"); }body &gt; p { color: yellow; }</style>
 </head><body>
 </body></html>"
 `;

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

@@ -1,5 +1,8 @@
 import { parse, Rule, Media } from '../src/css';
-import { validateStringifiedCssRule } from './../src/utils';
+import {
+  validateStringifiedCssRule,
+  escapeImportStatement,
+} from './../src/utils';
 
 describe('css parser', () => {
   it('should save the filename and source', () => {
@@ -120,4 +123,64 @@ describe('css parser', () => {
     );
     expect(out3).toEqual('[data-aa\\:other] { color: red; }');
   });
+
+  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;`);
+  });
 });

packages/rrweb-snapshot/test/css/style-with-import.css

@@ -1 +1,2 @@
-@import "./style.css";
+@import '//fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@100;300;400;500;700&display=swap"';
+@import './style.css';