More accurate style object diffs

render/render.js

@@ -552,6 +552,18 @@ module.exports = function($window) {
 
 	//style
 	function updateStyle(element, old, style) {
+		if (old != null && style != null && typeof old === "object" && typeof style === "object" && style !== old) {
+			// Both old & new are (different) objects.
+			// Update style properties that have changed
+			for (var key in style) {
+				if (style[key] !== old[key]) element.style[key] = style[key]
+			}
+			// Remove style properties that no longer exist
+			for (var key in old) {
+				if (!(key in style)) element.style[key] = ""
+			}
+			return
+		}
 		if (old === style) element.style.cssText = "", old = null
 		if (style == null) element.style.cssText = ""
 		else if (typeof style === "string") element.style.cssText = style

render/tests/test-updateElement.js

@@ -192,6 +192,19 @@ o.spec("updateElement", function() {
 		o(updated.dom.style.backgroundColor).equals("")
 		o(updated.dom.style.color).equals("gold")
 	})
+	o("does not re-render element styles for equivalent style objects", function() {
+		var style = {color: "gold"}
+		var vnode = {tag: "a", attrs: {style: style}}
+
+		render(root, [vnode])
+
+		root.firstChild.style.color = "red"
+		style = {color: "gold"}
+		var updated = {tag: "a", attrs: {style: style}}
+		render(root, [updated])
+
+		o(updated.dom.style.color).equals("red")
+	})
 	o("replaces el", function() {
 		var vnode = {tag: "a"}
 		var updated = {tag: "b"}