Twind

Module: twind/server

This module provides asynchronous Node.JS only Static Extraction a.k.a. Server Side Rendering (SSR). In most cases the synchronous SSR should be preferred. Please refer to the {@page Extract Styles aka SSR | SSR guide} for more details.

❗ This is an experimental feature and only supported for Node.JS >=12. Use with care and please report any issue you find. Consider using the synchronous API when ever possible due to the relatively expensive nature of the promise introspection API provided by V8. Async server side rendering is implemented using async_hooks. Callback-based APIs and event emitters may not work or need special handling.

import { setup } from 'twind'
import { asyncVirtualSheet, getStyleTag } from 'twind/server'

const sheet = asyncVirtualSheet()

setup({ ...sharedOptions, sheet })

async function ssr() {
  // 1. Reset the sheet for a new rendering
  sheet.reset()

  // 2. Render the app
  const body = await renderTheApp()

  // 3. Create the style tag with all generated CSS rules
  const styleTag = getStyleTag(sheet)

  // 4. Generate the response html
  return `<!DOCTYPE html>
    <html lang="en">
      <head>${styleTag}</head>
      <body>${body}</body>
    </html>
  `
}

Table of contents

Interfaces

References

Apply

Re-exports: Apply

BlendMode

Re-exports: BlendMode

BorderStyle

Re-exports: BorderStyle

CSSAtKeyframes

Re-exports: CSSAtKeyframes

CSSAtMedia

Re-exports: CSSAtMedia

CSSAtSupports

Re-exports: CSSAtSupports

CSSCustomProperties

Re-exports: CSSCustomProperties

CSSProperties

Re-exports: CSSProperties

CSSPseudos

Re-exports: CSSPseudos

CSSRuleValue

Re-exports: CSSRuleValue

CSSRules

Re-exports: CSSRules

CSSRulesThunk

Re-exports: CSSRulesThunk

CSSSimplePseudos

Re-exports: CSSSimplePseudos

CompletionTokens

Re-exports: CompletionTokens

Configuration

Re-exports: Configuration

Context

Re-exports: Context

CoreCompletionTokens

Re-exports: CoreCompletionTokens

CorePlugins

Re-exports: CorePlugins

CoreVariants

Re-exports: CoreVariants

Corners

Re-exports: Corners

CounterStyle

Re-exports: CounterStyle

DarkMode

Re-exports: DarkMode

Directive

Re-exports: Directive

DirectiveHandler

Re-exports: DirectiveHandler

Edges

Re-exports: Edges

Empty

Re-exports: Empty

Falsy

Re-exports: Falsy

FontFace

Re-exports: FontFace

FromTheme

Re-exports: FromTheme

GlobalValue

Re-exports: GlobalValue

HasTarget

Re-exports: HasTarget

Hasher

Re-exports: Hasher

InlineDirective

Re-exports: InlineDirective

Instance

Re-exports: Instance

Interpolate

Re-exports: Interpolate

InterpolateKind

Re-exports: InterpolateKind

Join

Re-exports: Join

JoinFromObject

Re-exports: JoinFromObject

MaybeArray

Re-exports: MaybeArray

MaybeObjInterpolationGeneric

Re-exports: MaybeObjInterpolationGeneric

MaybeThunk

Re-exports: MaybeThunk

MaybeTokenInterpolation

Re-exports: MaybeTokenInterpolation

Mode

Re-exports: Mode

Negatable

Re-exports: Negatable

NonEmptyString

Re-exports: NonEmptyString

Plugin

Re-exports: Plugin

Plugins

Re-exports: Plugins

Prefixer

Re-exports: Prefixer

Preflight

Re-exports: Preflight

Range

Re-exports: Range

ReportInfo

Re-exports: ReportInfo

Rule

Re-exports: Rule

Sheet

Re-exports: Sheet

SheetConfig

Re-exports: SheetConfig

SheetInit

Re-exports: SheetInit

SheetInitCallback

Re-exports: SheetInitCallback

SimplePseudoClasses

Re-exports: SimplePseudoClasses

SimplePseudoElements

Re-exports: SimplePseudoElements

Storage

Re-exports: Storage

StyleTagProperties

Re-exports: StyleTagProperties

StyleTagSheet

Re-exports: StyleTagSheet

TW

Re-exports: TW

TWCallable

Re-exports: TWCallable

Theme

Re-exports: Theme

ThemeColor

Re-exports: ThemeColor

ThemeColorObject

Re-exports: ThemeColorObject

ThemeConfiguration

Re-exports: ThemeConfiguration

ThemeContainer

Re-exports: ThemeContainer

ThemeFontSize

Re-exports: ThemeFontSize

ThemeHelper

Re-exports: ThemeHelper

ThemeOutline

Re-exports: ThemeOutline

ThemeResolver

Re-exports: ThemeResolver

ThemeScreen

Re-exports: ThemeScreen

ThemeScreenValue

Re-exports: ThemeScreenValue

ThemeSection

Re-exports: ThemeSection

ThemeSectionRecord

Re-exports: ThemeSectionRecord

ThemeSectionResolver

Re-exports: ThemeSectionResolver

ThemeSectionResolverContext

Re-exports: ThemeSectionResolverContext

ThemeSectionType

Re-exports: ThemeSectionType

ToString

Re-exports: ToString

Token

Re-exports: Token

TokenGrouping

Re-exports: TokenGrouping

TypescriptCompat

Re-exports: TypescriptCompat

Unwrap

Re-exports: Unwrap

UserCompletionTokens

Re-exports: UserCompletionTokens

Variants

Re-exports: Variants

VirtualSheet

Re-exports: VirtualSheet

apply

Re-exports: apply

autoprefix

Re-exports: autoprefix

create

Re-exports: create

cssomSheet

Re-exports: cssomSheet

directive

Re-exports: directive

domSheet

Re-exports: domSheet

expandGroups

Re-exports: expandGroups

getStyleTag

Re-exports: getStyleTag

getStyleTagProperties

Re-exports: getStyleTagProperties

hash

Re-exports: hash

mode

Re-exports: mode

noprefix

Re-exports: noprefix

setup

Re-exports: setup

silent

Re-exports: silent

strict

Re-exports: strict

theme

Re-exports: theme

tw

Re-exports: tw

virtualSheet

Re-exports: virtualSheet

voidSheet

Re-exports: voidSheet

warn

Re-exports: warn

Functions

asyncVirtualSheet

▸ ConstasyncVirtualSheet(): AsyncVirtualSheet

Returns: AsyncVirtualSheet

Defined in: src/server/index.ts:31