From c98b1eba244e5ac62a671dba9ae00de5ebfc3f5d Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Tue, 13 Jul 2021 17:31:02 +0100
Subject: [PATCH 1/2] My best interpretation of what the typings should look
 like after merge of #464

---
 src/record/mutation.ts | 15 ++++++++++-----
 src/replay/index.ts    | 18 ++++++++++++------
 src/types.ts           |  4 +++-
 typings/types.d.ts     |  8 ++++++--
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 2344265c27..7b093ee9a3 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -28,6 +28,7 @@ import {
   isIgnored,
   isIframeINode,
   hasShadowRoot,
+  styleAttributeValue,
 } from '../utils';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
@@ -475,10 +476,14 @@ export default class MutationBuffer {
         }
         if (m.attributeName === 'style') {
           const old = this.doc.createElement('span');
-          old.setAttribute('style', m.oldValue);
-          if (item.attributes['style'] === undefined) {
+          if (m.oldValue) {
+            old.setAttribute('style', m.oldValue);
+          }
+          if (item.attributes['style'] === undefined ||
+              item.attributes['style'] === null) {
             item.attributes['style'] = {};
           }
+          const style_obj = (item.attributes['style'] as styleAttributeValue);
           for (let i=0; i<target.style.length; i++) {
             let pname = target.style[i];
             const newValue = target.style.getPropertyValue(pname);
@@ -486,9 +491,9 @@ export default class MutationBuffer {
             if (newValue != old.style.getPropertyValue(pname) ||
                 newPriority != old.style.getPropertyPriority(pname)) {
               if (newPriority == '') {
-                item.attributes['style'][pname] = newValue;
+                style_obj[pname] = newValue;
               } else {
-                item.attributes['style'][pname] = [newValue, newPriority];
+                style_obj[pname] = [newValue, newPriority];
               }
             }
           }
@@ -497,7 +502,7 @@ export default class MutationBuffer {
             if (target.style.getPropertyValue(pname) === '' ||
                 !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
                ) {
-              item.attributes['style'][pname] = false;  // delete
+              style_obj[pname] = false;  // delete
             }
           }
         } else {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index a9d2152c7b..fc7d4c1b50 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -28,6 +28,8 @@ import {
   canvasMutationData,
   Mirror,
   ElementState,
+  styleAttributeValue,
+  styleValueWithPriority,
 } from '../types';
 import {
   createMirror,
@@ -1324,13 +1326,17 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            for (var s in value) {
-              if (value[s] === false) {
-                ((target as Node) as Element).style.removeProperty(s);
-              } else if (Array.isArray(value[s])) {
-                ((target as Node) as Element).style.setProperty(s, value[s][0], value[s][1]);
+            let sv = (value as styleAttributeValue);
+            const htarget = ((target as Node) as HTMLElement);
+            for (var s in sv) {
+              if (sv[s] === false) {
+                htarget.style.removeProperty(s);
+              } else if (sv[s] instanceof Array) {
+                const svp = (sv[s] as styleValueWithPriority);
+                htarget.style.setProperty(s, svp[0], svp[1]);
               } else {
-                ((target as Node) as Element).style.setProperty(s, value[s]);
+                const svs = (sv[s] as string)
+                htarget.style.setProperty(s, svs);
               }
             }
           }
diff --git a/src/types.ts b/src/types.ts
index baa50b47a9..9e04448113 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -295,9 +295,11 @@ export type textMutation = {
 };
 
 export type styleAttributeValue = {
-  [key:string]: [string, string] | string | false;
+  [key:string]: styleValueWithPriority | string | false;
 };
 
+export type styleValueWithPriority = [string, string];
+
 export type attributeCursor = {
   node: Node;
   attributes: {
diff --git a/typings/types.d.ts b/typings/types.d.ts
index bcd9797eb9..1bec3d70dc 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -211,16 +211,20 @@ export declare type textMutation = {
     id: number;
     value: string | null;
 };
+export declare type styleAttributeValue = {
+    [key: string]: styleValueWithPriority | string | false;
+};
+export declare type styleValueWithPriority = [string, string];
 export declare type attributeCursor = {
     node: Node;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type attributeMutation = {
     id: number;
     attributes: {
-        [key: string]: string | null;
+        [key: string]: string | styleAttributeValue | null;
     };
 };
 export declare type removedNodeMutation = {

From aa813fff500e5a68486391ab9aead2832726e0ef Mon Sep 17 00:00:00 2001
From: Eoghan Murray <eoghan@getthere.ie>
Date: Wed, 14 Jul 2021 22:27:53 +0100
Subject: [PATCH 2/2] Apply variable name changes as per Juice10 review

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
---
 src/record/mutation.ts |  8 ++++----
 src/replay/index.ts    | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/record/mutation.ts b/src/record/mutation.ts
index 7b093ee9a3..b924fc9720 100644
--- a/src/record/mutation.ts
+++ b/src/record/mutation.ts
@@ -483,7 +483,7 @@ export default class MutationBuffer {
               item.attributes['style'] === null) {
             item.attributes['style'] = {};
           }
-          const style_obj = (item.attributes['style'] as styleAttributeValue);
+          const styleObj = (item.attributes['style'] as styleAttributeValue);
           for (let i=0; i<target.style.length; i++) {
             let pname = target.style[i];
             const newValue = target.style.getPropertyValue(pname);
@@ -491,9 +491,9 @@ export default class MutationBuffer {
             if (newValue != old.style.getPropertyValue(pname) ||
                 newPriority != old.style.getPropertyPriority(pname)) {
               if (newPriority == '') {
-                style_obj[pname] = newValue;
+                styleObj[pname] = newValue;
               } else {
-                style_obj[pname] = [newValue, newPriority];
+                styleObj[pname] = [newValue, newPriority];
               }
             }
           }
@@ -502,7 +502,7 @@ export default class MutationBuffer {
             if (target.style.getPropertyValue(pname) === '' ||
                 !target.style.getPropertyValue(pname)  // covering potential non-standard browsers
                ) {
-              style_obj[pname] = false;  // delete
+              styleObj[pname] = false;  // delete
             }
           }
         } else {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index fc7d4c1b50..18b897b981 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -1326,17 +1326,17 @@ export class Replayer {
               }
             }
           } else if (attributeName === 'style') {
-            let sv = (value as styleAttributeValue);
-            const htarget = ((target as Node) as HTMLElement);
-            for (var s in sv) {
-              if (sv[s] === false) {
-                htarget.style.removeProperty(s);
-              } else if (sv[s] instanceof Array) {
-                const svp = (sv[s] as styleValueWithPriority);
-                htarget.style.setProperty(s, svp[0], svp[1]);
+            let styleValues = (value as styleAttributeValue);
+            const targetEl = ((target as Node) as HTMLElement);
+            for (var s in styleValues) {
+              if (styleValues[s] === false) {
+                targetEl.style.removeProperty(s);
+              } else if (styleValues[s] instanceof Array) {
+                const svp = (styleValues[s] as styleValueWithPriority);
+                targetEl.style.setProperty(s, svp[0], svp[1]);
               } else {
-                const svs = (sv[s] as string)
-                htarget.style.setProperty(s, svs);
+                const svs = (styleValues[s] as string)
+                targetEl.style.setProperty(s, svs);
               }
             }
           }