Skip to content

Commit

Permalink
Warn instead of fail on exceptions thrown from postcss (#1580)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
guntherjh authored Feb 6, 2025
1 parent a6893f7 commit 47a7c3f
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/angry-turtles-provide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"rrweb-snapshot": patch
---

Handle exceptions thrown from postcss when calling adaptCssForReplay
16 changes: 11 additions & 5 deletions packages/rrweb-snapshot/src/rebuild.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,17 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string {
const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
if (cachedStyle) return cachedStyle;

const ast: { css: string } = postcss([
mediaSelectorPlugin,
pseudoClassPlugin,
]).process(cssText);
const result = ast.css;
let result = cssText;
try {
const ast: { css: string } = postcss([
mediaSelectorPlugin,
pseudoClassPlugin,
]).process(cssText);
result = ast.css;
} catch (error) {
console.warn('Failed to adapt css for replay', error);
}

cache?.stylesWithHoverClass.set(cssText, result);
return result;
}
Expand Down
15 changes: 14 additions & 1 deletion packages/rrweb-snapshot/test/rebuild.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import * as fs from 'fs';
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 {
adaptCssForReplay,
buildNodeWithSN,
Expand Down Expand Up @@ -270,4 +270,17 @@ ul li.specified c.\\:hover img {
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),
);
});
});

0 comments on commit 47a7c3f

Please sign in to comment.