Warn instead of fail on exceptions thrown from postcss (#1580)
* postcss was introduced in #1458 for use within adaptCssForReplay * #1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style> * the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css
This commit is contained in:
committed by
GitHub
parent
ea3c555b49
commit
041a2e237f
5
.changeset/angry-turtles-provide.md
Normal file
5
.changeset/angry-turtles-provide.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"rrweb-snapshot": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Handle exceptions thrown from postcss when calling adaptCssForReplay
|
||||||
@@ -62,11 +62,17 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
|
|||||||
const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
|
const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
|
||||||
if (cachedStyle) return cachedStyle;
|
if (cachedStyle) return cachedStyle;
|
||||||
|
|
||||||
|
let result = cssText;
|
||||||
|
try {
|
||||||
const ast: { css: string } = postcss([
|
const ast: { css: string } = postcss([
|
||||||
mediaSelectorPlugin,
|
mediaSelectorPlugin,
|
||||||
pseudoClassPlugin,
|
pseudoClassPlugin,
|
||||||
]).process(cssText);
|
]).process(cssText);
|
||||||
const result = ast.css;
|
result = ast.css;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to adapt css for replay', error);
|
||||||
|
}
|
||||||
|
|
||||||
cache?.stylesWithHoverClass.set(cssText, result);
|
cache?.stylesWithHoverClass.set(cssText, result);
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
import * as fs from 'fs';
|
import * as fs from 'fs';
|
||||||
import * as path from 'path';
|
import * as path from 'path';
|
||||||
import { beforeEach, describe, expect as _expect, it } from 'vitest';
|
import { beforeEach, describe, expect as _expect, it, vi } from 'vitest';
|
||||||
import {
|
import {
|
||||||
adaptCssForReplay,
|
adaptCssForReplay,
|
||||||
buildNodeWithSN,
|
buildNodeWithSN,
|
||||||
@@ -270,4 +270,17 @@ ul li.specified c.\\:hover img {
|
|||||||
should_not_modify,
|
should_not_modify,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('handles exceptions from postcss when calling adaptCssForReplay', () => {
|
||||||
|
const consoleWarnSpy = vi
|
||||||
|
.spyOn(console, 'warn')
|
||||||
|
.mockImplementation(() => {});
|
||||||
|
// trigger CssSyntaxError by passing invalid css
|
||||||
|
const cssText = 'a{';
|
||||||
|
adaptCssForReplay(cssText, cache);
|
||||||
|
expect(consoleWarnSpy).toHaveBeenLastCalledWith(
|
||||||
|
'Failed to adapt css for replay',
|
||||||
|
expect.any(Error),
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user