Server side issue with inline styles

Hi, I’m trying to use inline styles using bel and also trying the new server-side rendering capability.

When I compile this template

bel`<h1 style="color: red">Hey ${name.toUpperCase()}, <span style="color: blue">This</span> is a card!!!</h1>`

It returns the following string

<h1 style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:r;8:e;9:d;">Hey JOHN,
    <span style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:b;8:l;9:u;10:e;">This</span> is a card!!!</h1>

Also if you know how can I use react-like inline styles using objects instead of just strings it will be awesome.

Thanks for this tool!

[shama]

Whoa that is a weird issue. Is this with v4.2.0?

At one point we had inline style objects built-in: <div style=${cssprops}>hey</div> but removed them to give the user the choice on how to handle it.

Here is what I do for inline styles now:

var domcss = require('dom-css')
var bel = require('bel')

var element = bel`<div>hey</div>`
domcss(element, { color: 'red' })

This way the properties get set directly on element.style instead of compiled as a string into style="" making it less susceptible to XSS attacks. dom-css will even do vendor prefixing.

[shama]

Thanks @juliangruber!