{"action":"created","issue":{"url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/359","labels_url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/359/labels{/name}","comments_url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/359/comments","events_url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/359/events","html_url":"https://github.com/Matt-Esch/virtual-dom/issues/359","id":125005351,"number":359,"title":"camel casing on style properties","user":{"login":"substack","id":12631,"avatar_url":"https://avatars.githubusercontent.com/u/12631?v=3","gravatar_id":"","url":"https://api.github.com/users/substack","html_url":"https://github.com/substack","followers_url":"https://api.github.com/users/substack/followers","following_url":"https://api.github.com/users/substack/following{/other_user}","gists_url":"https://api.github.com/users/substack/gists{/gist_id}","starred_url":"https://api.github.com/users/substack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/substack/subscriptions","organizations_url":"https://api.github.com/users/substack/orgs","repos_url":"https://api.github.com/users/substack/repos","events_url":"https://api.github.com/users/substack/events{/privacy}","received_events_url":"https://api.github.com/users/substack/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-05T16:51:47Z","updated_at":"2016-01-07T16:39:57Z","closed_at":null,"body":"camel-cased style properties are valid DOM properties, but not valid html.\r\n\r\n```\r\nvar vdom = require('virtual-dom')\r\nvar tree = vdom.h('input', {\r\n  style: { color: 'blue', fontSize: 24 }\r\n})\r\nconsole.log(vdom.create(tree).toString())\r\n```\r\n\r\nproduces this output, which doesn't work when rendered as an html string:\r\n\r\n```\r\n<input style=\"color:blue;fontSize:24;\" type=\"text\" />\r\n```\r\n\r\nHowever, when rendered browser-side, these inline style properties work:\r\n\r\n``` js\r\nvar vdom = require('virtual-dom')\r\nvar main = require('main-loop')\r\nvar loop = main({}, render, vdom)\r\ndocument.querySelector('#content').appendChild(loop.target)\r\n\r\nfunction render (state) {\r\n  return vdom.h('input', { style: { color: 'blue', fontSize: 24 } })\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/comments/169721411","html_url":"https://github.com/Matt-Esch/virtual-dom/issues/359#issuecomment-169721411","issue_url":"https://api.github.com/repos/Matt-Esch/virtual-dom/issues/359","id":169721411,"user":{"login":"substack","id":12631,"avatar_url":"https://avatars.githubusercontent.com/u/12631?v=3","gravatar_id":"","url":"https://api.github.com/users/substack","html_url":"https://github.com/substack","followers_url":"https://api.github.com/users/substack/followers","following_url":"https://api.github.com/users/substack/following{/other_user}","gists_url":"https://api.github.com/users/substack/gists{/gist_id}","starred_url":"https://api.github.com/users/substack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/substack/subscriptions","organizations_url":"https://api.github.com/users/substack/orgs","repos_url":"https://api.github.com/users/substack/repos","events_url":"https://api.github.com/users/substack/events{/privacy}","received_events_url":"https://api.github.com/users/substack/received_events","type":"User","site_admin":false},"created_at":"2016-01-07T16:39:57Z","updated_at":"2016-01-07T16:39:57Z","body":"I also started out making a patch to min-document, but I don't think min-document can be made to fully support camel-cased styles without using proxies. The reason is that min-document uses an ordinary object to store `style` properties, so if you attempt to write two styles in different casings, the values do not merge into a single value like they do in the browser:\r\n\r\n```\r\n    test(\"can set camel case style properties\", function(assert) {\r\n        var elem = document.createElement(\"div\")\r\n        elem.style.fontSize = 24\r\n        assert.equal(elemString(elem), \"<div style=\\\"font-size:24;\\\"></div>\")\r\n        elem.style.backgroundColor = 'purple'\r\n        assert.equal(elemString(elem),\r\n            \"<div style=\\\"font-size:24;background-color:purple;\\\"></div>\")\r\n        elem.style['font-size'] = 48\r\n        assert.equal(elemString(elem),\r\n            \"<div style=\\\"background-color:purple;font-size:48\\\"></div>\")\r\n        assert.end()\r\n    })\r\n```"}}