fix: Handle exceptions thrown from postcss when calling adaptCssForReplay (#49)

Author: pauldambra

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn run lint-staged

.husky/pre-push

@@ -0,0 +1,13 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+protected_branch='main'
+current_branch=$(git branch --show-current)
+
+if [ $protected_branch = $current_branch ]
+then
+    echo "Pushing to $protected_branch is a sin! Instead, create a pull request and repent."
+    exit 1 # push will not execute
+else
+    exit 0 # push will execute
+fi

CHANGELOG.md

@@ -1,7 +1,5 @@
 ## 0.0.6 - 2025-02-01
 
-
-
 ## 0.0.5 - 2025-01-31
 
 ## -version - 2025-01-31

package.json

@@ -35,6 +35,8 @@
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "happy-dom": "^14.12.0",
+    "husky": "^7.0.4",
+    "lint-staged": "~15.4.3",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
@@ -56,7 +58,10 @@
     "live-stream": "cd packages/rrweb && yarn live-stream",
     "lint": "yarn run concurrently --success=all -r -m=1 'yarn run markdownlint docs' 'yarn eslint packages/*/src --ext .ts,.tsx,.js,.jsx,.svelte'",
     "lint:report": "yarn eslint --output-file eslint_report.json --format json packages/*/src --ext .ts,.tsx,.js,.jsx",
-    "release": "yarn build:all && changeset publish"
+    "release": "yarn build:all && changeset publish",
+    "postinstall": "husky",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable"
   },
   "resolutions": {
     "**/cssom": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
@@ -66,5 +71,8 @@
     "defaults",
     "not op_mini all"
   ],
+  "lint-staged": {
+    "*.{ts, md}": "yarn run format"
+  },
   "packageManager": "[email protected]"
 }

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) {
+    // on the replay side so should be ok to just log here
+    console.warn('Failed to adapt css for replay', error);
+  }
   cache?.stylesWithHoverClass.set(cssText, result);
   return result;
 }

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),
+    );
+  });
 });