From 63a7461657fec875fef75b97e1b1594b05dd378c Mon Sep 17 00:00:00 2001
From: Leo Horie <lhorie@klick.com>
Date: Fri, 9 May 2014 22:21:43 -0400
Subject: [PATCH] fix diff of css rule removal

---
 Gruntfile.js           |  2 +-
 docs/change-log.md     |  9 ++++++++-
 docs/mithril.md        | 15 +++++++++++++--
 mithril.js             |  7 +++++--
 tests/mithril-tests.js | 13 +++++++++++++
 tests/mock.js          |  1 +
 6 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 62a4d5d9..779f2b96 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,6 +1,6 @@
 module.exports = function(grunt) {
 
-	var version = "0.1.12"
+	var version = "0.1.13"
 	
 	var inputFolder = "./docs"
 	var tempFolder = "./temp"
diff --git a/docs/change-log.md b/docs/change-log.md
index 58348eeb..a4cd2793 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -1,5 +1,13 @@
 ## Change Log
 
+[v0.1.13](/mithril/archive/v0.1.13) - maintenance
+
+### Bug Fixes:
+
+-	Removing CSS rules now diffs correctly [#79](https://github.com/lhorie/mithril.js/issues/79)
+
+---
+
 [v0.1.12](/mithril/archive/v0.1.12) - maintenance
 
 ### News:
@@ -14,7 +22,6 @@
 
 ---
 
-
 [v0.1.11](/mithril/archive/v0.1.11) - maintenance
 
 ### News:
diff --git a/docs/mithril.md b/docs/mithril.md
index 27242dba..27382d29 100644
--- a/docs/mithril.md
+++ b/docs/mithril.md
@@ -138,12 +138,23 @@ m("div", {style: {border: "1px solid red"}}); //yields <div style="border:1px so
 
 Note that in order to keep the framework lean, Mithril does not auto-append units like `px` or `%` to any values. Typically, you should not even be using inline styles to begin with (unless you are dynamically changing them).
 
-Mithril also does not auto-camel-case CSS properties on inline style attributes, so you should use the Javascript syntax when setting them:
+Mithril also does not auto-camel-case CSS properties on inline style attributes, so you should use the Javascript syntax when setting them via Javascript objects:
 
 ```javascript
-m("div", {style: {textAlign: "center"}}); //yields <div style="text-align:1px solid red;"></div>
+m("div", {style: {textAlign: "center"}}); //yields <div style="text-align:center;"></div>
+
+//this does not work
+m("div", {style: {"text-align": "center"}});
 ```
 
+You can, however, use CSS syntax when defining style rules as inline strings:
+
+```javascript
+m("div[style='text-align:center']"); //yields <div style="text-align:center;"></div>
+```
+
+One caveat of using the CSS syntax is that it clobbers the `style` attribute in the DOM element on redraws, so this syntax is not appropriate if you need to use it in conjunction with 3rd party tools that modify the element's style outside of Mithril's templates (e.g. via `config`, which is explained below)
+
 ---
 
 You can define a non-HTML-standard attribute called `config`. This special parameter allows you to call methods on the DOM element after it gets created.
diff --git a/mithril.js b/mithril.js
index 47a0d7a1..1495d1c0 100644
--- a/mithril.js
+++ b/mithril.js
@@ -137,10 +137,13 @@ Mithril = m = new function app(window) {
 				else if (typeof dataAttr == "function" && attrName.indexOf("on") == 0) {
 					node[attrName] = autoredraw(dataAttr, node)
 				}
-				else if (attrName === "style") {
+				else if (attrName === "style" && typeof dataAttr == "object") {
 					for (var rule in dataAttr) {
 						if (cachedAttr === undefined || cachedAttr[rule] !== dataAttr[rule]) node.style[rule] = dataAttr[rule]
 					}
+					for (var rule in cachedAttr) {
+						if (!(rule in dataAttr)) node.style[rule] = ""
+					}
 				}
 				else if (namespace !== undefined) {
 					if (attrName === "href") node.setAttributeNS("http://www.w3.org/1999/xlink", "href", dataAttr)
@@ -150,7 +153,7 @@ Mithril = m = new function app(window) {
 				else if (attrName === "value" && tag === "input") {
 					if (node.value !== dataAttr) node.value = dataAttr
 				}
-				else if (attrName in node && attrName != "list") node[attrName] = dataAttr
+				else if (attrName in node && !(attrName == "list" || attrName == "style")) node[attrName] = dataAttr
 				else node.setAttribute(attrName, dataAttr)
 			}
 		}
diff --git a/tests/mithril-tests.js b/tests/mithril-tests.js
index 9f323085..5542e43d 100644
--- a/tests/mithril-tests.js
+++ b/tests/mithril-tests.js
@@ -344,6 +344,19 @@ function testMithril(mock) {
 		var valueAfter2 = root.childNodes[0].childNodes[1].nodeName
 		return valueBefore1 === "UL" && valueAfter1 === "" && valueBefore2 === "" && valueAfter2 === "UL"
 	})
+	test(function() {
+		var root = mock.document.createElement("div")
+		m.render(root, m("div", {style: {background: "red"}}))
+		var valueBefore = root.childNodes[0].style.background
+		m.render(root, m("div", {style: {}}))
+		var valueAfter = root.childNodes[0].style.background
+		return valueBefore === "red" && valueAfter === ""
+	})
+	test(function() {
+		var root = mock.document.createElement("div")
+		m.render(root, m("div[style='background:red']"))
+		return root.childNodes[0].style === "background:red"
+	})
 	//end m.render
 	
 	//m.redraw
diff --git a/tests/mock.js b/tests/mock.js
index 73220873..c48be899 100644
--- a/tests/mock.js
+++ b/tests/mock.js
@@ -5,6 +5,7 @@ mock.window = new function() {
 	window.document.childNodes = []
 	window.document.createElement = function(tag) {
 		return {
+			style: {},
 			childNodes: [],
 			nodeName: tag.toUpperCase(),
 			appendChild: window.document.appendChild,