Skip to content

Instantly share code, notes, and snippets.

@freeman-lab
Last active March 5, 2016 20:28
Show Gist options
  • Save freeman-lab/ec722d36a1d4ea97a7c7 to your computer and use it in GitHub Desktop.
Save freeman-lab/ec722d36a1d4ea97a7c7 to your computer and use it in GitHub Desktop.
generic wrapper for assigning styles

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:

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment