How to use styletron - 4 common examples

// import StyletronClient from 'styletron/lib/client'
import addPx from 'add-px-to-style'

// Remove
import { createRenderer } from 'fela'
export const renderer = createRenderer()

const styletronOptions = {
  prefix: '_axs-'
}
const isClient = typeof document !== 'undefined'
const styleTags = isClient ? document.getElementsByTagName('style') : null

// export const styletron = isClient ? new StyletronClient(styleTags, styletronOptions) : new Styletron(styletronOptions)

export const styletron = new Styletron(styletronOptions)

export const cx = (styles) => {
  const sx = formatStyles(styles)

  return injectStyle(styletron, sx)

  // return renderer.renderRule(() => sx)
}

const formatStyles = (styles) => {
  const formatted = toArr(styles)
    .map(style => {
      if (typeof style.value !== 'number') {
        return style
      }
      return ({

background: 'red'
  }
})

const StyledAnchor = styled('a', {
  color: 'pink'
})

const App = {
  name: 'app',
  data() {
    return {
      fontSize: 12
    }
  },
  styletron: new Styletron(),
  provide: {
    theme: 'green'
  },
  methods: {
    handleFontSize(e) {
      this.fontSize = e.target.value
    }
  },
  render() {
    return (
      <div>
        
        <label>
          Font Size:{' '}
          </label></div>

function generateHydrationScriptSrc(keys) {
  var sanitizedKeys = safeString(JSON.stringify(keys));
  return [
    ';try{',
      '(function(){',
        'window["', StyletronLegacy.constants.HYDRATE_KEY, '"]=', sanitizedKeys, ';',
      '})();',
    '}catch(e){};',
  ].join('');
}

function LegacyComponent(props) {
  styletron.injectOnce('.legacyStyle { color: magenta }', '__legacy_style__');
  return React.createElement('div',
    {className: 'legacyStyle'}, 'I am a legacy component');
}