renderToMarkup
This method should only be used on the server.
Renders all cached styles grouped CSS strings and returns a valid HTML markup with
<style>
elements. The elements are grouped and sorted in the following order:- Fonts
- Static Styles
- Keyframes
- Rules
- Support Rules
- Media Query Rules
- Support & Media Query Rules
The DOM renderer is able to rehydrate its cache from the markup in order to skip initial rendering.
Arguments
Argument | Type | Description |
---|---|---|
renderer | Renderer | The renderer providing the styles which are rendered to stringified HTML markup. |
Returns
(string): Single concatenated HTML markup string containing required
<style>
elements.Example
import { renderToMarkup } from 'fela-dom'import { createRenderer } from 'fela'const renderer = createRenderer()const rule = ({ fontSize }) => ({ fontSize: fontSize, color: 'blue', '@supports (display: flex)': { color: 'green', }, '@media (min-width: 300px)': { color: 'red', },})renderer.renderStatic('html,body{box-sizing:border-box;margin:0}')renderer.renderRule(rule, { fontSize: '12px' })const markup = renderToMarkup(renderer)
The following markup would be returned:
<style type="text/css" data-fela-type="STATIC" data-fela-rehydration="4"> html, body { box-sizing: border-box; margin: 0; }</style><style type="text/css" data-fela-type="RULE" data-fela-rehydration="4"> .a { font-size: 12px; } .b { color: blue; }</style><style type="text/css" data-fela-type="RULE" data-fela-rehydration="4" data-fela-support> .c { color: green; }</style><style type="text/css" data-fela-type="RULE" data-fela-rehydration="4" media="(min-width: 300px)"> .d { color: red; }</style>