Styles as functions of state

fela.js

import { createRenderer, render } from 'fela'

// creates a new renderer to render styles
const renderer = createRenderer()

// rules are just plain functions
// returning a valid style object
const rule = state => ({
  color: state.follower >= 20 ? 'green' : (state.follower >= 10 ? 'yellow' : 'red')
})


const View = state => {
  // rendering rules returns a className reference
  // which can be attached to any element
  const className = renderer.renderRule(rule, state))

  return (
    <div className={className} /> 
      You got {state.follower} followers!
    <div>
  )
}

// renders all styles into the DOM
render(renderer, document.getElementById('stylesheet'))

ReactDOM.render(<View follower={15} />, document.body)

const className = renderer.renderRule(rule, state)) // <- too much parenthesis?