generic wrapper for assigning styles

stylex.md

goal

Generic wrapper for hyperx output that appends styles and supports state styles (:hover, :active, etc), should solve for both virtual-dom/h and bel (at least). Should be achievable with a tiny module. Basic styles are pretty easy, state styles are a bit trickier.

Prior art

• radium "does the right thing" but is big and react-specific

Some discussion:

• choojs/nanohtml#3
• Matt-Esch/virtual-dom#179

idea 1

var sx = require('stylex')

var el = hx`<div style={color: 'red', ':hover': {color: 'blue'}}></div>`
return sx(el)

If hx returns a virtual-dom element, sx can descend into el.properties.style, and for anything starting with : add the appropriate handlers on el.properties, and remove from the styles. The remaining "real" styles will be set atuomatically.

If hx is bel this won't work because the styles have already been parsed via dom-css and things like :hover will be dropped.

idea 2

var sx = stylex()

var el = hx`<div data-style={color: 'red', ':hover': {color: 'blue'}}></div>`
return sx(el)

For both virtual-dom/h and bel we could access the data-style property and set the styles and action events on the object accordingly, thought we'd still need to do the updates differently in the two cases. Awkward.

idea 3

Solve the two cases separately. Write a little module just like dom-css but to add state styles to real DOM elements -- this would work with bel. Then write stylex to act on virtual-dom nodes via idea 1.