Skip to content

renderToMarkup.md

Latest commit

 

History

History
56 lines (43 loc) · 1.73 KB

renderToMarkup.md

File metadata and controls

56 lines (43 loc) · 1.73 KB

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:

  1. Fonts
  2. Static Styles
  3. Keyframes
  4. Rules
  5. Support Rules
  6. Media Query Rules
  7. 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>
⚡