Global & Third-Party Styles

It is a common technique to start the whole styling process by adding some global styles such as CSS resets.
In addition you might also include some third-party styles. To do so, the renderer provides a method called 

renderStatic
. It accepts either a valid CSS string or a basic style object with a custom selector to be rendered into.

Style Object

If you prefer using style objects, do not forget to provide a selector as well.

Note: Style objects will also be processed with all applied plugins.

import { createRenderer } from 'fela'


const renderer = createRenderer()


const styleObject = {
  fontSize: '12px',
  width: '100%',
  display: 'flex',
}


renderer.renderStatic(styleObject, 'html,body,#app')

CSS String

Rendering CSS strings is especially helpful if you want to use third-party or legacy styles written in CSS.
This method is not recommended as no further processing with plugins is done. It should only be used to insert large third-party CSS files.

import { createRenderer } from 'fela'


const renderer = createRenderer()


renderer.renderStatic('*{margin:0;padding:0}')

Template Strings

Using ECMAScript 2015 template strings(new tab) we can even write multi-line CSS styles.
This is helpful if we want to copy large CSS files directly into our JavaScript file.

import { createRenderer } from 'fela'


const renderer = createRenderer()


renderer.renderStatic(`
  * {
    margin: 0;
    padding: 0
  }


  body, html {
    width: 100%;
    height: 100%
  }


  div {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex
  }
`)