[WIP] hack together stylesheet observer

src/record/index.ts

@@ -1,5 +1,5 @@
 import { snapshot } from 'rrweb-snapshot';
-import initObservers from './observer';
+import initObservers, { observeStylesheet } from './observer';
 import {
   mirror,
   on,
@@ -80,9 +80,11 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
       inlineStylesheet,
       maskAllInputs,
     );
+
     if (!node) {
       return console.warn('Failed to snapshot the document');
     }
+
     mirror.map = idNodeMap;
     wrappedEmit(
       wrapEvent({
@@ -181,6 +183,13 @@ function record(options: recordOptions = {}): listenerHandler | undefined {
           inlineStylesheet,
         }),
       );
+
+      for (var i in mirror.map) {
+        const node = mirror.map[i];
+        if ((node as any).tagName == 'STYLE') {
+          observeStylesheet(node as any);
+        }
+      }
     };
     if (
       document.readyState === 'interactive' ||

src/record/observer.ts

@@ -506,6 +506,26 @@ function initInputObserver(
   };
 }
 
+export function observeStylesheet(styleRoot: HTMLLinkElement) {
+  const handler: ProxyHandler<any> = {
+    apply: function apply(target, thisArg, argumentsList) {
+      const result = target.apply(thisArg, argumentsList);
+      styleRoot.innerHTML = Array.from(thisArg.rules, x => x.cssText).join(
+        '\n',
+      );
+
+      const sheet = styleRoot.sheet as CSSStyleSheet;
+      sheet.insertRule = new Proxy(sheet.insertRule, handler);
+      return result;
+    },
+  };
+
+  const sheet = styleRoot.sheet as CSSStyleSheet;
+  const proxy = new Proxy(sheet.insertRule, handler);
+  sheet.insertRule = proxy;
+  sheet.insertRule('.rr_track_on {}');
+}
+
 export default function initObservers(o: observerParam): listenerHandler {
   const mutationObserver = initMutationObserver(
     o.mutationCb,