Options
All
  • Public
  • Public/Protected
  • All
Menu

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 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>
  `
}

Index

References

hash

Re-exports hash

theme

Re-exports theme

Type aliases

CSSAtKeyframes

CSSAtKeyframes: Record<string, CSSProperties | ((context: Context) => CSSProperties)>

CSSAtMedia

CSSAtMedia: Record<string, MaybeArray<CSSRules>>

CSSAtSupports

CSSAtSupports: Record<string, MaybeArray<CSSRules>>

CSSRuleValue

CSSSimplePseudos

CSSSimplePseudos: {[ K in CSS.SimplePseudos as `&${string & K}`]: CSSRulesThunk | MaybeArray<CSSRules> }

Pseudo class watch out for ':root' - that could use '*' instead

DarkMode

DarkMode: "media" | "class" | false

Falsy

Falsy: "" | 0 | 0 | false | null | undefined | void

Hasher

Hasher: (value: string) => string

Type declaration

    • (value: string): string
    • Parameters

      • value: string

      Returns string

MaybeArray

MaybeArray<T>: T | readonly T[]

Type parameters

  • T

MaybeThunk

MaybeThunk<T>: T | ((context: Context) => T)

Type parameters

  • T

Plugin

Plugin: string | CSSRules | DirectiveHandler

Plugins

Plugins: Record<string, Plugin | undefined>

Prefixer

Prefixer: (property: string, value: string, important?: boolean) => string

Type declaration

    • (property: string, value: string, important?: boolean): string
    • Parameters

      • property: string
      • value: string
      • Optional important: boolean

      Returns string

ReportInfo

ReportInfo: { id: "LATE_SETUP_CALL" } | { id: "UNKNOWN_DIRECTIVE"; rule: string } | { id: "UNKNOWN_THEME_VALUE"; key: string | undefined } | { css: string; error: Error; id: "INJECT_CSS_ERROR" }

SheetInitCallback

SheetInitCallback<T>: (value?: T) => T

Type parameters

  • T = unknown

Type declaration

    • (value?: T): T
    • Parameters

      • Optional value: T

      Returns T

StyleTagSheet

StyleTagSheet: HasTarget | readonly string[]

ThemeColor

ThemeColor: string | ThemeColorObject

ThemeFontSize

ThemeFontSize: string | [size: string, lineHeight: string] | [size: string, options: { letterSpacing?: string; lineHeight?: string }]

ThemeOutline

ThemeOutline: [outline: string, offset: string]

ThemeScreen

ThemeScreenValue

ThemeScreenValue: string | { raw: string } | { max?: string; min: string } | { max: string; min?: string }

ThemeSection

ThemeSection<T>: ThemeSectionRecord<T> | ThemeSectionResolver<T>

Type parameters

  • T = string

ThemeSectionRecord

ThemeSectionRecord<T>: Record<string, T | undefined>

Type parameters

  • T = string

ThemeSectionResolver

ThemeSectionResolver<T>: (theme: ThemeResolver, context: ThemeSectionResolverContext) => ThemeSectionRecord<T>

Type parameters

  • T = string

Type declaration

ThemeSectionType

ThemeSectionType<T>: T extends ThemeSection<infer R> ? Unwrap<R> : Exclude<T, ThemeSectionResolver<T>>

Type parameters

  • T

Token

TypescriptCompat

TypescriptCompat: boolean | number

Unwrap

Unwrap<T>: T extends string[] ? string : T extends Record<string, infer R> ? R : T

Type parameters

  • T

Variables

Const silent

silent: Mode = ...

Const strict

strict: Mode = ...

tw

tw: TW

Const warn

warn: Mode = ...

Functions

Const apply

Const asyncVirtualSheet

Const autoprefix

  • autoprefix(property: string, value: string, important?: boolean): string
  • Parameters

    • property: string
    • value: string
    • Optional important: boolean

    Returns string

Const create

Const cssomSheet

  • Creates an sheet which inserts style rules through the CSS Object Model.

    Parameters

    Returns Sheet<CSSStyleSheet>

Const directive

  • Returns an optimized and cached function for use with tw.

    tw caches rules based on the function identity. This helper caches the function based on the data.

    Type parameters

    • Data

    • T

    Parameters

    Returns Directive<T>

Const domSheet

  • Creates an sheet which inserts style rules through the Document Object Model.

    Parameters

    Returns Sheet<HTMLStyleElement>

Const getStyleTag

  • getStyleTag(sheet: StyleTagSheet, attributes?: Record<string, string>): string

Const getStyleTagProperties

Const mode

  • mode(report: (message: string) => void): Mode
  • Parameters

    • report: (message: string) => void
        • (message: string): void
        • Parameters

          • message: string

          Returns void

    Returns Mode

Const noprefix

  • noprefix(property: string, value: string, important?: boolean): string
  • Parameters

    • property: string
    • value: string
    • Optional important: boolean

    Returns string

setup

Const shim

  • Shim the passed html.

    1. tokenize the markup and process element classes with either the default/global tw instance or a custom instance
    2. populate the provided sheet with the generated rules
    3. output the HTML markup with the final element classes

    Parameters

    • markup: string

      the html to shim

    • options: TW | ShimOptions = ...

      to use

    Returns string

    the HTML markup with the final element classes

Const virtualSheet

Const voidSheet

  • voidSheet(): Sheet<null>
  • An sheet placeholder which performs no operations. Useful for avoiding errors in a non-browser environment.

    Returns Sheet<null>

Generated using TypeDoc