Renderer Configuration

We already learned that the renderer is configurable with e.g. plugins, but there are some more options.

In general, our renderer accepts a config object. The following table shows each configuration option, its expected value, its default value and what it is used for.

We might introduce more configuration options with future releases, so be sure to frequently check for updates.

Option Value Default Description
plugins function[] A list of plugins to process styles before rendering
keyframePrefixes string[] ['-webkit-',
'-moz-']
A list of which additional @keyframes prefixes are rendered
enhancers function[] A list of enhancers to enhance the renderer
mediaQueryOrder string[] [] An explicit order in which media query rules are rendered
selectorPrefix string '' Prepend a static prefix to every every generated class and keyframe

Example

import { createRenderer } from 'fela'

import prefixer from 'fela-plugin-prefixer'
import unit from 'fela-plugin-unit'
import fallbackValue from 'fela-plugin-fallback-value'

import beautifier from 'fela-beautifier'

import { renderToString } from 'fela-dom/server'

const config = {
  plugins: [ unit('em'), prefixer(), fallbackValue() ],
  keyframePrefixes: ['-webkit-'],
  enhancers: [ beautifer() ],
  mediaQueryOrder: [
    '(min-height: 300px)',
    '(min-height: 500px)'
  ],
  selectorPrefix: 'fela_'
}

const renderer = createRenderer(config)

const keyframe = props => ({
  from: {
    width: 'calc(100% - 50px)',
    height: props.height *  2
  },
  to: {
    width: 'calc(50% - 50px)',
    height: props.height
  }
})

const rule = props => ({
  color: props.color,
  fontSize: 12
})

renderer.renderRule(rule, { color: 'red '})
renderer.renderKeyframe(keyframe, { height: 100 })

console.log(renderToString(renderer))
@-webkit-keyframes fela_k1 {
  from {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
    height: 200em
  }

  to {
    width: -webkit-calc(50% - 50px);
    width: -moz-calc(50% - 50px);
    width: calc(50% - 50px);
    height: 100em
  }
}

@keyframes fela_k1 {
  from {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
    height: 200em
  }

  to {
    width: -webkit-calc(50% - 50px);
    width: -moz-calc(50% - 50px);
    width: calc(50% - 50px);
    height: 100em
  }
}

.fela_a {
  color: red
}

.fela_b {
  font-size: 12px
}



results matching ""

    No results matching ""