Skip to main content

Interface: ToCssOptions

Defined in: css.ts:207

Serialises a resolved theme as a complete CSS rule. Normative: docs/12 §4.1, docs/17 §11, docs/11 §11.3.

themeToCssVars gives the declarations; this gives a stylesheet, and the difference is the whole reason it exists. The React renderer installs tokens as an inline style on .rasd-root, which is fine when the host owns the document — but an inline declaration on a descendant beats any inherited value, so inside a shadow root it silently kills the documented piercing story (rasd-form { --rasd-color-primary: #A21C1C }). A stylesheet whose selector is :host loses to the host's own rule against the shadow host, which is exactly the precedence the embed needs.

layer wraps the rule in @layer <name>, so unlayered host CSS still wins — the same promise the renderer's own styles.css makes in its header.

Properties​

fonts?​

optional fonts?: boolean;

Defined in: css.ts:221

Emit @font-face for assets.fonts ahead of the token rule (docs/12 §13). On by default: a theme that names a family and ships its subset is asking for the family to be available, and a host that already declares its own faces passes false.

layer?​

optional layer?: string;

Defined in: css.ts:214

Cascade layer to wrap the rule in. Omit for an unlayered rule.

selector?​

optional selector?: string;

Defined in: css.ts:212

Where the tokens land. Defaults to the selector the React renderer uses; <rasd-form> passes ':host'.