// FILE: base-style.js
// option (opt): per rule based
// state:        per stylesheet (result) based
// state can be mobile, or pc
export const float = opt => ({
  .img { width: opt.width + 'px', float:'left', padding: v => v.result.state.platform == 'mobile' ? '0px' : '30px' }
})
export const flex = opt => ({
  .img { width: opt.width + 'px', flex: 1}
})

// FILE: style-factory.js
import cssobj from 'cssobj'
import { getState } from './state-manager'
import * as css from './base-style'
// create empty <style> container
export const pageStyle = cssobj({}, {local:true}, getState() )
// can change from float layout into flex layout
// return cssobj result
export function changeLayout (type, opt, state) {
  return pageStyle.update( css[type](opt), state )
}

import {changeLayout} from './style-factory'
element.onclick = e => {
  changeLayout('flex', {width: 100}, {platform: 'pc'})
}