From 264c9288d89521297db982b9b0d80bed9dc886ed Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Wed, 8 Nov 2023 17:13:59 -0500
Subject: [PATCH] feat(replay): Skip `addHoverClass` when stylesheet is >= 1MB

Large stylesheets will cause `addHoverClass` to block the main UI thread when viewing a replay. Turn this off when stylesheet is >= 1MB.
---
 packages/rrweb-snapshot/src/rebuild.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index f150ba41a8..bda5715adc 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -69,6 +69,12 @@ export function addHoverClass(cssText: string, cache: BuildCache): string {
   const cachedStyle = cache?.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
 
+  if (cssText.length >= 1_000_000) {
+    // Skip adding hover class for large stylesheets, otherwise we will run
+    // into perf issues that will block main thread
+    return cssText;
+  }
+
   const ast = parse(cssText, {
     silent: true,
   });