fix diff of css rule removal

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"

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:

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.

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)
 			}
 		}

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

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,