My best interpretation of what the typings should look like after merge of #464

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,20 +476,24 @@ 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 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);
             const newPriority = target.style.getPropertyPriority(pname);
             if (newValue != old.style.getPropertyValue(pname) ||
                 newPriority != old.style.getPropertyPriority(pname)) {
               if (newPriority == '') {
-                item.attributes['style'][pname] = newValue;
+                styleObj[pname] = newValue;
               } else {
-                item.attributes['style'][pname] = [newValue, newPriority];
+                styleObj[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
+              styleObj[pname] = false;  // delete
             }
           }
         } else {

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 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 {
-                ((target as Node) as Element).style.setProperty(s, value[s]);
+                const svs = (styleValues[s] as string)
+                targetEl.style.setProperty(s, svs);
               }
             }
           }

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: {

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 = {