css in js

1_1.js

import {
  em
} from './utils'

import zyle from 'zyle'

function initStyles(dispatch) {
  const gen = zyle(dispatch)
  
  function contain (width = 56) {
    return gen({
      max-width: em(containerWidth),
      overflow: 'hidden'
    })
  }
  
  function displayFlex () {
    // 1) Hash StyleObject -> '646efd54'
    // 2) Check if classname is already in cache
    // 3) Dispatch action to store { payload: { classname: '646efd54', styles: ... }}
    // 4) Store renders style to client OR ANYTHING BRO
    // 5) Return hash
    
    return gen({
      display: 'flex'
    })
  }
  
  return {
    contain,
    displayFlex    
  }
}

export default initStyles


// importing

import initStyles from './styles'

const store = createStore()

const styles = initStyles(store.dispatch)

styles.contain(52) // -> 646efd54

1_2.js

import createStore from 'redux'

function contain (width) {
  return {
    max-width: em(width),
    overflow: 'hidden'
  }
}

function App () {
  return h('div', {
    style: mergeAll([
      contain(32),
      colors(colors.BLUE)
    ], [
      h1('Some Text!'),
      h2('An undertitle.')
    ])
  ])
}
}

2_1.js

// styles.js

import { em } from 'redux-style'
import { dispatch } from './store'

function contain (width = 56) {
  return {
    max-width: em(containerWidth),
    overflow: 'hidden'
  }
}

function displayFlex () {
  return {
    display: 'flex'
  }
}

2_2.js

// configureStyle.js

import styles from './styles'

const configureStyle = dispatch => zyle(dispatch, styles)

export default configureStyle

2_3.js

import styles from './2_1'

const style = mergeAll([
  contain(40),
  background('primary')
])

const Container = () => h('div', { style })

2_4.js

// main.js

import configureStyle from './configureStyle'
import { stylesMiddleware as styles } from './zyle'

const store = applyMiddleWare(
  ...others,
  stylesMiddleware() 
)

const styles = configureStyle(store.dispatch)

render()