From 50b1309dada324b269929af5a03fb6bd2496683a Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Wed, 7 Aug 2024 11:01:53 +0200
Subject: [PATCH 1/3] fix: set style properties directly

---
 packages/rrweb/src/record/mutation.ts | 12 +++++++++++-
 packages/rrweb/src/utils.ts           | 25 +++++++++++++++++++++++++
 packages/rrweb/test/util.test.ts      | 14 ++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index a369b17345..4bb04ca199 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -34,6 +34,7 @@ import {
   inDom,
   getShadowHost,
   closestElementOfNode,
+  splitStyleAttributes,
 } from '../utils';
 
 type DoubleLinkedListNode = {
@@ -659,7 +660,16 @@ export default class MutationBuffer {
             }
             const old = this.unattachedDoc.createElement('span');
             if (m.oldValue) {
-              old.setAttribute('style', m.oldValue);
+              console.log('yalc version 3');
+              // Split the style string into individual style rules
+              const styleAttributes = splitStyleAttributes(m.oldValue);
+
+              // set each style property individually to avoid csp error
+              styleAttributes.forEach(({ property, value }) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                old.style[property] = value;
+              });
             }
             for (const pname of Array.from(target.style)) {
               const newValue = target.style.getPropertyValue(pname);
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index 046ca50e17..c74b5d2800 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -670,3 +670,28 @@ export function clearTimeout(
 ): ReturnType<typeof window.clearTimeout> {
   return getImplementation('clearTimeout')(...rest);
 }
+
+/**
+ * Takes a styles attribute string and converts it to key value pairs
+ * @param styles - The full stype attributes string
+ *
+ */
+export function splitStyleAttributes(styles: string) {
+  const splitStyles = styles.split(';');
+  return splitStyles
+    .filter((value) => value.split(':').length == 2)
+    .map((style) => {
+      let [property, value] = style.trim().split(':');
+
+      property = property.trim();
+      value = value.trim();
+
+      // Convert kebab-case to camelCase
+      const camelCasedProperty = property.replace(
+        /-([a-z])/g,
+        (match, letter: string) => letter.toUpperCase(),
+      );
+
+      return { property: camelCasedProperty, value };
+    });
+}
diff --git a/packages/rrweb/test/util.test.ts b/packages/rrweb/test/util.test.ts
index 46ae81db2a..18a546cc01 100644
--- a/packages/rrweb/test/util.test.ts
+++ b/packages/rrweb/test/util.test.ts
@@ -7,6 +7,7 @@ import {
   inDom,
   shadowHostInDom,
   getShadowHost,
+  splitStyleAttributes,
 } from '../src/utils';
 
 describe('Utilities for other modules', () => {
@@ -142,5 +143,18 @@ describe('Utilities for other modules', () => {
       expect(shadowHostInDom(a.childNodes[0])).toBeTruthy();
       expect(inDom(a.childNodes[0])).toBeTruthy();
     });
+
+    it('should split styles attributes', () => {
+      const styleAttribute =
+        'background-color: peachpuff; padding: 20px; margin-top: 0;';
+
+      const splitStyles = splitStyleAttributes(styleAttribute);
+
+      expect(splitStyles).toEqual([
+        { property: 'backgroundColor', value: 'peachpuff' },
+        { property: 'padding', value: '20px' },
+        { property: 'marginTop', value: '0' },
+      ]);
+    });
   });
 });

From 1cdd9448774fe75a0a4aa797a25d411a7192257d Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Wed, 7 Aug 2024 12:00:16 +0200
Subject: [PATCH 2/3] Update packages/rrweb/src/record/mutation.ts

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>
---
 packages/rrweb/src/record/mutation.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 4bb04ca199..93e0faede2 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -660,7 +660,6 @@ export default class MutationBuffer {
             }
             const old = this.unattachedDoc.createElement('span');
             if (m.oldValue) {
-              console.log('yalc version 3');
               // Split the style string into individual style rules
               const styleAttributes = splitStyleAttributes(m.oldValue);
 

From 47c0bc21b9407613da1eed7d971bac61f8bed153 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Wed, 7 Aug 2024 12:02:37 +0200
Subject: [PATCH 3/3] Update packages/rrweb/src/utils.ts

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>
---
 packages/rrweb/src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index c74b5d2800..d98039d9eb 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -673,7 +673,7 @@ export function clearTimeout(
 
 /**
  * Takes a styles attribute string and converts it to key value pairs
- * @param styles - The full stype attributes string
+ * @param styles - The full styles attributes string
  *
  */
 export function splitStyleAttributes(styles: string) {