Usage example of fela in vue

fela.js

import { createRenderer } from 'fela'
import { render } from 'fela-dom'
import felaConfig from './felaConfig'
import TempStyleProvider from './StyleProvider.vue'

export const isServer = typeof window === 'undefined'
export const isClient = !isServer

var resetRendering = true
var renderer = createRenderer(felaConfig)
var renderedString = null
var alreadyRenderedInClient = false

export function renderToString() {
  if (isServer) {
    if (resetRendering !== true) {
      renderedString = renderer.renderToString()
    }
    resetRendering = true
    return renderedString
  } else {
    if (alreadyRenderedInClient !== true) {
      alreadyRenderedInClient = true
      const mountNode = document.createElement('style')
      document.head.appendChild(mountNode)
      render(renderer, mountNode)
    }
    return ""
  }

}

export function renderStyles(rules) {
  return function render() {
    if (resetRendering === true && isServer) {
      renderer = createRenderer(felaConfig)
      resetRendering = false
    }

    var styles = {}
    for (var i in rules) {
      var fn = rules[i]
      if (typeof rules[i] !== 'function') {
        fn = () => {
          return rules[i]
        }
      }
      styles[i] = renderer.renderRule(fn.bind(this), this)
    }
    return styles
  }
}

export var StyleProvider = TempStyleProvider

felaConfig.js

import felaPluginUnit from 'fela-plugin-unit'
import felaPluginFriendlyPseudoClass from 'fela-plugin-friendly-pseudo-class'
import felaPluginPrefixer from 'fela-plugin-prefixer'
import felaPluginFallbackValue from 'fela-plugin-fallback-value'
import placeholderPrefixer from 'fela-plugin-placeholder-prefixer'
import monolithic from 'fela-monolithic'

var felaConfig = {
  plugins: [felaPluginUnit('px'), felaPluginFriendlyPseudoClass(), felaPluginPrefixer(), felaPluginFallbackValue(), placeholderPrefixer()]
}

if (process.env.NODE_ENV !== 'production') {
  felaConfig.enhancers = [monolithic()]
}


export default felaConfig

StyleProvider.vue

<template>
  <style id="felaServerStyles">{{styleString}}</style>
</template>

<script>
import { renderToString, isServer } from './fela.js'

export default {
  data() {
    return {isServer: isServer}
  },
  computed: {
    styleString: renderToString
  }
}
</script>

UsageExample.vue

<template>
  <div>
    <div :class={styles.box}>
      <span :class={styles.blue}>Hello World!</span>
    </div>
    <style-provider/>
  </div>
</template>

<script>
import { StyleProvider, renderStyles } from './fela.js'

const styles = {
  box: {
    backgroundColor: '#aaa',
    width: 300,
    height: 100,
    top: 30,
    left: 30
  },
  blue: {
    fontFamily: 'OpenSans',
    color: 'blue'
  }
}

export default {
  computed: {
    styles: renderStyles(styles)
  },
  components: {
    StyleProvider
  }
}
</script>