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

. 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()

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()
* {
margin: 0;
padding: 0
body, html {
width: 100%;
height: 100%
div {
display: -webkit-flex;
display: -moz-flex;
display: flex