DOM Rendering

Knowing all the basics, we are already able to build up our whole styling environment. But we still do not know how to actually render our styles into the DOM. Luckily this is really simple as all we have to do is call a single function.
The 

fela-dom
package is used for any DOM specific methods. It provides a 
render
 function which takes the renderer as a parameter.

Automatic Updates

Once rendered to the DOM, a change listener will subscribe to changes. The DOM nodes will automatically be updated on changes. It uses an optimized rendering mechanism based on 

CSSStyleSheet.insertRule
(new tab) to update as performant as possible.
Depending on the browser, it automatically removes unsupported rules.

Example

import { createRenderer } from 'fela'
import { render } from 'fela-dom'


const rule = ({ size }) => ({
  backgroundColor: 'red',
  fontSize: size,
  color: 'blue',
})


const renderer = createRenderer()


renderer.renderRule(rule, { size: '12px' }) // => a b c


render(renderer)


// automatically adds the rule to the respective style node
renderer.renderRule(rule, { size: '16px' }) // => a d c

Advanced Usage

Unless working in a plain JavaScript environment, you are usually not calling 

render
by yourself.
Most bindings such as react-fela(new tab) and vue-fela(new tab) will automatically do that for you.