renderToSheetList

This method should only be used on the server.

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.

Arguments

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

Returns

(Object[]): List of style sheet objects

Shape

Every style sheet object has the following shape:

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

Example

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.renderStatic('html,body{box-sizing:border-box;margin:0}')
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
  }
]