pota/use/css

pota/use/css ships the building blocks for constructable stylesheets: a tagged-template css and a cached sheet(string) factory that both return a CSSStyleSheet, plus document / shadow-root adoptedStyleSheets helpers. This is the low-level surface the css / use:css prop is built on.

Exports

• css — tagged-template wrapper over String.raw (documented below)
• sheet(string) — cached CSSStyleSheet factory
• CSSStyleSheet — the global constructor, re-exported
• getAdoptedStyleSheets(doc) — a document / shadow root's adoptedStyleSheets
• adoptedStyleSheets — the main document's adoptedStyleSheets, pre-bound
• addAdoptedStyleSheet(doc, sheet) — idempotent add
• removeAdoptedStyleSheet(doc, sheet) — remove
• addStyleSheets(doc, sheets) — add a mixed array of sheets, CSS strings, and URLs
• addStyleSheetExternal(doc, urlOrText) — single fetch-or-parse add

Examples

Tagged-template css

Builds a CSSStyleSheet from a tagged template. css is a thin wrapper over String.raw that calls sheet(); the tag exists so editors that recognise css`...` highlight your styles. Adopt the result with addAdoptedStyleSheet.

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

const styles = css`
	:host {
		display: block;
	}
	button {
		color: tomato;
	}
`

addAdoptedStyleSheet(document, styles)