sheet

sheet(css) creates a CSSStyleSheet from a CSS string. It is cached by source string — the same input always returns the same CSSStyleSheet instance, so adopting it on many documents or custom elements is cheap and they all share one object.

The underlying replace is asynchronous — the sheet object is returned immediately and its rules land when the parse settles. Note that browsers disallow @import in constructed stylesheets: such rules are dropped with a console warning. The tagged-template css is a thin wrapper that calls sheet() for you.

Arguments

Argument	Type	Description
css	string	The CSS source to parse.

Returns: a CSSStyleSheet (cached per source string).

Examples

Cached by string

Identical inputs share one CSSStyleSheet, so repeated calls are free.

import { sheet } from 'pota/use/css'

const a = sheet(':host { display: block }')
const b = sheet(':host { display: block }')
// a === b

Adopt a sheet on the document

Build a sheet from a string and adopt it via addAdoptedStyleSheet.

import { sheet, addAdoptedStyleSheet } from 'pota/use/css'

addAdoptedStyleSheet(
	document,
	sheet('body { background: black; color: white }'),
)