From 5899a783220bbdcb063c45d86bbf5bc0eda8ddc0 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 8 Sep 2022 12:19:08 +0200
Subject: [PATCH] feat(tracker): extend dynamic css support

---
 tracker/tracker/src/main/modules/cssrules.ts | 56 +++++++++++++-------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/tracker/tracker/src/main/modules/cssrules.ts b/tracker/tracker/src/main/modules/cssrules.ts
index b6b898788..60ae5a859 100644
--- a/tracker/tracker/src/main/modules/cssrules.ts
+++ b/tracker/tracker/src/main/modules/cssrules.ts
@@ -11,35 +11,55 @@ export default function (app: App | null) {
     return
   }
 
-  const processOperation = app.safe((stylesheet: CSSStyleSheet, index: number, rule?: string) => {
-    const sendMessage =
-      typeof rule === 'string'
-        ? (nodeID: number) =>
-            app.send(CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
-        : (nodeID: number) => app.send(CSSDeleteRule(nodeID, index))
-    // TODO: Extend messages to maintain nested rules (CSSGroupingRule prototype, as well as CSSKeyframesRule)
-    if (stylesheet.ownerNode == null) {
-      throw new Error('Owner Node not found')
-    }
-    const nodeID = app.nodes.getID(stylesheet.ownerNode)
-    if (nodeID !== undefined) {
-      sendMessage(nodeID)
-    } // else error?
-  })
+  const processOperation = app.safe(
+    (stylesheet: CSSStyleSheet | CSSGroupingRule, index: number, rule?: string) => {
+      const sendMessage =
+        typeof rule === 'string'
+          ? (nodeID: number) =>
+              app.send(CSSInsertRuleURLBased(nodeID, rule, index, app.getBaseHref()))
+          : (nodeID: number) => app.send(CSSDeleteRule(nodeID, index))
+      // TODO: Extend messages to maintain nested rules (CSSGroupingRule prototype, as well as CSSKeyframesRule)
+      if (!stylesheet.ownerNode) {
+        throw new Error('Owner Node not found')
+      }
+      const nodeID = app.nodes.getID(stylesheet.ownerNode)
+      if (nodeID !== undefined) {
+        sendMessage(nodeID)
+      } // else error?
+    },
+  )
 
   const patchContext = (context: typeof globalThis) => {
     const { insertRule, deleteRule } = context.CSSStyleSheet.prototype
+    const { insertRule: groupInsertRule, deleteRule: groupDeleteRule } =
+      context.CSSGroupingRule.prototype
+
     context.CSSStyleSheet.prototype.insertRule = function (rule: string, index = 0) {
       processOperation(this, index, rule)
-      return insertRule.call(this, rule, index)
+      return insertRule.call(this, rule, index) as number
     }
     context.CSSStyleSheet.prototype.deleteRule = function (index: number) {
       processOperation(this, index)
-      return deleteRule.call(this, index)
+      return deleteRule.call(this, index) as number
+    }
+
+    context.CSSGroupingRule.prototype.insertRule = function (rule: string, index = 0) {
+      const result = groupInsertRule.call(this, rule, index) as number
+
+      const entireStyle = this.parentStyleSheet?.cssRules
+      // const nodeID = getID(this.parentStyleSheet?.ownerNode)
+      // app.send(updateGroup(nodeID, entireStyle.csstext))
+
+      return result
+    }
+    context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
+      const result = groupDeleteRule.call(this, index) as number
+
+      return result
     }
   }
 
-  patchContext(window)
+  sheet.patchContext(window)
   app.observer.attachContextCallback(patchContext)
 
   app.nodes.attachNodeCallback((node: Node): void => {