camel casing on style properties

[ghost]

camel-cased style properties are valid DOM properties, but not valid html.

var vdom = require('virtual-dom')
var tree = vdom.h('input', {
  style: { color: 'blue', fontSize: 24 }
})
console.log(vdom.create(tree).toString())

produces this output, which doesn't work when rendered as an html string:

<input style="color:blue;fontSize:24;" type="text" />

However, when rendered browser-side, these inline style properties work:

var vdom = require('virtual-dom')
var main = require('main-loop')
var loop = main({}, render, vdom)
document.querySelector('#content').appendChild(loop.target)

function render (state) {
  return vdom.h('input', { style: { color: 'blue', fontSize: 24 } })
}

[Javey]

I think this is a bug of min-document, so I made a pull request for it https://github.com/Raynos/min-document/pull/32.

[ghost]

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:

    test("can set camel case style properties", function(assert) {
        var elem = document.createElement("div")
        elem.style.fontSize = 24
        assert.equal(elemString(elem), "<div style=\"font-size:24;\"></div>")
        elem.style.backgroundColor = 'purple'
        assert.equal(elemString(elem),
            "<div style=\"font-size:24;background-color:purple;\"></div>")
        elem.style['font-size'] = 48
        assert.equal(elemString(elem),
            "<div style=\"background-color:purple;font-size:48\"></div>")
        assert.end()
    })

[Raynos]

I think this would be possible with some extra loops; one to get all the cased keys and another to remove duplicates.

The only issue is order, but at least in v8 you know that if you keep the last one then that's the "last" key added since v8 is ordered in terms of assignment.