From 47a7c3faa6fdbd3a515f473dc3a979acd2c8276e Mon Sep 17 00:00:00 2001
From: John Henry Gunther <jguntherenator@gmail.com>
Date: Thu, 6 Feb 2025 08:33:12 -0500
Subject: [PATCH] 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
---
 .changeset/angry-turtles-provide.md          |  5 +++++
 packages/rrweb-snapshot/src/rebuild.ts       | 16 +++++++++++-----
 packages/rrweb-snapshot/test/rebuild.test.ts | 15 ++++++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/angry-turtles-provide.md

diff --git a/.changeset/angry-turtles-provide.md b/.changeset/angry-turtles-provide.md
new file mode 100644
index 00000000..94750199
--- /dev/null
+++ b/.changeset/angry-turtles-provide.md
@@ -0,0 +1,5 @@
+---
+"rrweb-snapshot": patch
+---
+
+Handle exceptions thrown from postcss when calling adaptCssForReplay
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 899eb438..c755637b 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -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;
 }
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index a1740da0..c8be11c0 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -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,
@@ -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),
+    );
+  });
 });