rehydrate

This method is used for universal rendering where styles are prerender on the server.
For client-side only rendering, we recommend using render directly.

Rehydrates the renderer's cache from existing

<style>

elements.
It is primarily used to rehydrate the cache from server-rendered CSS.

It automatically connects the renderer with the DOM by calling render once finished rehydrating.

Arguments

Argument	Type	Description
renderer	Renderer	The renderer which's cache is rehydrated.
targetDocument	Document(new tab)?	Document in which's head the styles are injected..

Example

Assuming we have the following server-rendered elements:

<style data-fela-type="RULE">
  .a {
    color: red;
  }
  .b {
    color: blue;
  }
</style>

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

const renderer = createRenderer()

rehydrate(renderer)

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

renderer.renderRule(rule, { color: 'red' }) // => a
renderer.renderRule(rule, { color: 'green' }) // => c
renderer.renderRule(rule, { color: 'blue' }) // => b