This advanced API is pretty similar to renderToMarkup as it also helps to render the renderer on the server.
Instead of returning a single string of HTML containing style elements, it returns a list of so called style sheets. Each style sheet contains everything we need to be able to render actual style elements on the server.

Check the renderToMarkup output in order to correctly create custom style elements that can be rehydrated.


Argument Type Description
renderer Renderer The renderer providing the styles which are rendered to a list of sheet data.


(Object[]): List of style sheet objects


Every style sheet object has the following shape:

type Sheet = {
  type: string,
  css: string,
  media?: string,
  support?: boolean,
  rehydration: number


import { renderToSheetList } 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.renderRule(rule, { fontSize: '12px' })

const sheetList = renderToSheetList(renderer)

The following list would be returned:

  { type: 'STATIC', css: 'html,body{box-sizing:border-box;margin:0}', rehydration: 4 },
  { type: 'RULE', css: '.a{font-size:12px}.b{color:blue}', rehydration: 4 },
  { type: 'RULE', css: '.c{color:green}', support: true, rehydration: 4 },
  { type: 'RULE', css: '.d{color:red}', media: '(min-width: 300px)', rehydration: 4 },

results matching ""

    No results matching ""