Options
All
  • Public
  • Public/Protected
  • All
Menu

Module twind/shim/server

Documentation Github Module Size Typescript

For static HTML processing (usually to provide SSR support for your javascript-powered web apps), twind/shim/server exports a dedicated shim function that accepts HTML string as input and will:

  1. parse 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 string with the final element classes

All Twind syntax features like grouping are supported within class attributes.

The shim function also accepts an optional 2nd argument that can be a custom tw instance or an options object (including tw instance).

import { create } from 'twind'
import { shim, virtualSheet, getStyleTag } from 'twind/shim/server'

const sheet = virtualSheet()

const { tw } = create({ ...sharedOptions, sheet })

sheet.reset()

const markup = shim(htmlString, {
  tw, // defaults to default `tw` instance
})

const styleTag = getStyleTag(sheet)
Asynchronous SSR

❗ This is an experimental feature. 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, getStyleTagProperties, shim } 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 to an html string and handle class attributes
  const body = shim(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

Interfaces

Type aliases

Variables

Functions

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

CSSRuleValue: CSSAtMedia | CSSAtSupports | CSSAtKeyframes | CSSRulesThunk | MaybeArray<CSSProperties | CSSRules | FontFace | string | Falsy | TypescriptCompat>

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

ThemeScreen: MaybeArray<ThemeScreenValue>

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

Token: string | TokenGrouping | InlineDirective | Token[] | Falsy | TypescriptCompat

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