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
2023-08-11 17:58:42 +02:00
parent 11f6567fd8
commit efdc167ca6
18 changed files with 343 additions and 156 deletions
--- a/packages/rrweb-snapshot/test/snapshots/integration.test.ts.snap
+++ b/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>"
 `;
--- a/packages/rrweb-snapshot/test/css.test.ts
+++ b/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;`);
+  });
 });
--- a/packages/rrweb-snapshot/test/css/style-with-import.css
+++ b/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';