xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 6de70cbf21
commit a6812827e0
18 changed files with 343 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/rrweb-snapshot/test/css.test.ts
View File

@@ -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;`);
});
});