Creates an sheet which inserts style rules through the Document Object Model.
Transforms css rules into a <style>
tag string.
Transforms css rules into <style>
tag properties.
Creates an sheet which collects style rules into an array.
Generated using TypeDoc
This module provides virtualSheet and domSheet which can be used with
setup({ sheet })
.Virtual Sheet
The virtual sheet collects style rules into an array. This is most useful during testing and server side rendering (SSR).
Additionally it provides an API to reset the current internal state of its
tw
function.Using for Static Extraction a.k.a. Server Side Rendering (SSR)
The following example assumes your app is using the
tw
named export fromtwind
but the same logic can be applied to custom instances.Using in tests
DOM Sheet
This sheet uses DOM Text nodes to insert the CSS rules into the stylesheet. Using DOM manipulation makes this way slower than the default sheet but allows to see the generated CSS in to DOM. Most modern browser display CSS rules from the speedy default sheet using their CSS inspector.
If the
domSheet
is passed notarget
it looks for an style element with the id__twind
. If no such element is found it will create one and append it to thedocument.head
.Custom Sheet Implementation
In case the builtin sheet implementations do not solve your use case, you can create your own: