use-style-tag

Inject a reactive <style> element.


Package	`@vizejs/composable/use-style-tag`
Own the source	`vize lib pull composable:use-style-tag`
Runtime exports	`useStyleTag`
Gzip budget	2048 B

Usage

import { useStyleTag } from "@vizejs/composable/use-style-tag";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useStyleTag`	dom	experimental	deterministic-fallback	caller-managed	caller, reactive-scope	web, desktop	`window`	`tryOnScopeDispose`

API

`useStyleTag`

Inject a reactive <style> element. The element's text follows css. An existing <style> with the same id — for example one emitted in server-rendered HTML — is adopted instead of duplicated, which keeps hydration free of flashes. The element is removed when the owning reactive scope stops or unload is called. Server rendering: nothing is injected and loaded is false. Emit the server-side <style id> through the application's head manager using the same id to make the client adopt it.

function useStyleTag( css: MaybeRefOrGetter<string>, options: UseStyleTagOptions = {}, ): StyleTagControls

const { css } = useStyleTag(() => `:root { --accent: ${accent.value} }`, { id: "theme" });

Types

`StyleTagElement`

<style> subset used by useStyleTag.

Member	Type	Description
`textContent`	`string \| null`	Style sheet text.
`setAttribute`	`(name: string, value: string) => void`	Write an attribute.

`StyleTagHost`

Document capability used by useStyleTag.

Member	Type	Description
`findStyle`	`(id: string) => StyleTagElement \| undefined`	Find an existing `<style>` with the given `id`.
`createStyle`	`() => StyleTagElement`	Create a detached `<style>`.
`append`	`(element: StyleTagElement) => void`	Attach a style element to `<head>`.
`remove`	`(element: StyleTagElement) => void`	Detach a style element.

`UseStyleTagOptions`

Options for useStyleTag.

Member	Type	Description
`id`?	`string`	Element `id`. Instances sharing an id share one element (last write wins, first unload removes it), so give every independent style sheet its own stable id. The default is a constant rather than a generated counter because generated ids differ between server and client.
`media`?	`string`	`media` attribute.
`nonce`?	`string`	CSP nonce.
`immediate`?	`boolean`	Attach the style element when created.
`host`?	`MaybeRefOrGetter<StyleTagHost \| null \| undefined>`	Document capability for alternate runtimes and tests.

`StyleTagControls`

Reactive state and actions returned by useStyleTag.

Member	Type	Description
`id`	`string`	Element id in use.
`css`	`Ref<string>`	Style sheet text. Writable; when a getter was passed, the next getter change overwrites manual assignments.
`loaded`	`Readonly<Ref<boolean>>`	Whether the style element is attached.
`load`	`() => boolean`	Attach (or adopt an existing element with the same id) and apply `css`.
`unload`	`() => void`	Remove the style element.