import * as CSS$1 from 'https://esm.sh/v135/csstype@3.1.2/index.d.ts'; declare type Falsey = false | null | undefined | void | ''; declare type MaybeArray = T | T[]; declare type MaybeThunk = T | ((context: Context) => T); declare type TypedAtRulesKeys = `@layer ${'defaults' | 'base' | 'components' | 'shortcuts' | 'utilities' | 'overrides'}` | `@media screen(${string})` | `@media ${string}` | `@keyframes ${string}`; declare type TypedAtRules = { [key in TypedAtRulesKeys]?: key extends `@layer ${string}` ? MaybeArray : CSSBase; }; interface BaseProperties extends TypedAtRules { '@import'?: MaybeArray; '@font-face'?: MaybeArray; } interface CustomProperties { label?: string; '@apply'?: MaybeArray | Falsey; } declare type CSSProperties = CSS$1.PropertiesFallback & CSS$1.PropertiesHyphenFallback & Partial; declare type CSSFontFace = CSS$1.AtRule.FontFaceFallback & CSS$1.AtRule.FontFaceHyphenFallback; interface CSSNested extends Record | Falsey> { } declare type CSSBase = BaseProperties & CSSNested; declare type CSSObject = CSSProperties & CSSBase; declare type CSSValue = string | number | bigint | Falsey | StringLike; declare type StringLike = { toString(): string; } & string; declare type Preflight = CSSBase | string; interface TwindRule { /** The calculated precedence taking all variants into account. */ p: number; o: number; /** Additional classNames to propagate, does not include name */ c?: string; /** The rulesets (selectors and at-rules). expanded variants `@media ...`, `@supports ...`, `&:focus`, `.dark &` */ r: string[]; /** The name to use for `&` expansion in selectors. Maybe empty for at-rules like `@import`, `@font-face`, `@media`, ... */ n?: string; /** The stringified declarations. */ d?: string; } declare type RestoreSnapshot = () => void; interface Twind { (tokens: StringLike): string; readonly target: Target; readonly theme: ThemeFunction>; readonly config: TwindConfig; snapshot(): RestoreSnapshot; /** Clears all CSS rules from the sheet. */ clear(): void; destroy(): void; } interface Context { /** Allows to resolve theme values. */ theme: ThemeFunction; /** escapes given string for use in a CSS selector or variable */ e: (value: string) => string; /** create hash of given string — may be no-op eg returning the same input */ h: (value: string) => string; /** * returns the dark color * * @private */ d: (section: string, key: string, color: ColorValue) => ColorValue | Falsey; /** * resolves a variant * * @private */ v: (value: string) => MaybeArray; /** * resolves a rule * * @private */ r: (value: string, isDark?: boolean) => RuleResult; /** * stringifies a CSS property and value to a declaration * * @private */ s: (property: string, value: string) => string; /** * called right before the rule is stringified and inserted into the sheet * * @private */ f: (rule: TwindRule) => TwindRule; } declare type ThemeValue = T extends Record ? Exclude> : T; declare type KebabCase = S extends `${infer C}${infer T}` ? KebabCase extends infer U ? U extends string ? T extends Uncapitalize ? `${Uncapitalize}${U}` : `${Uncapitalize}-${U}` : never : never : S; interface ThemeFunction { (): Theme;
(section: Section | KebabCase
): Theme[Section];
(section: Section | KebabCase
, key: Key): ThemeValue | undefined;
(section: Section | KebabCase
, key: string): ThemeValue | undefined;
(section: Section | KebabCase
, key: Key, defaultValue: ThemeValue): ThemeValue;
(section: Section | KebabCase
, key: string, defaultValue: ThemeValue): ThemeValue;
(key: `${Section}.${string}`): ThemeValue;
(key: `${Section}.${string}`, defaultValue: ThemeValue): ThemeValue; (section: string): unknown | undefined; (section: string, key: string): unknown | string | undefined; (section: string, key: string, defaultValue: T): T | string; (key: string, defaultValue: T): T | string; } declare type RuleResult = string | CSSObject | Falsey | Partial[]; declare type RuleResolver = (match: Match, context: Context) => RuleResult; declare type Rule = string | RegExp | [pattern: MaybeArray, alias: string & {}] | [pattern: MaybeArray, css: CSSObject] | [pattern: MaybeArray, resolve: RuleResolver] | [pattern: MaybeArray, property: keyof CSSProperties] | [ pattern: MaybeArray, property: keyof CSSProperties, convert: MatchConverter ]; declare type VariantResult = MaybeArray | Falsey; declare type VariantResolver = (match: MatchResult, context: Context) => VariantResult; declare type Variant = [ condition: MaybeArray, resolve: string | VariantResolver ]; declare type MatchResult = RegExpExecArray & { /** The substring following the most recent match */ $$: string; /** Can be used to propagate a value like a theme value */ dark?: boolean; }; interface SheetRule { /** The calculated precedence taking all variants into account. */ p: number; o: number; /** The name to use for `&` expansion in selectors. Maybe empty for at-rules like `@import`, `@font-face`, `@media`, ... */ n?: string | null; } interface Sheet { readonly target: Target; insert(cssText: string, index: number, rule: SheetRule): void; snapshot(): RestoreSnapshot; /** Clears all CSS rules from the sheet. */ clear(): void; destroy(): void; resume(addClassName: (className: string) => void, insert: (cssText: string, rule: SheetRule) => void): void; } declare type StringifyDeclaration = (property: string, value: string, context: Context) => string; declare type PreflightThunk = (context: Context) => Preflight | Falsey; declare type HashFunction = (value: string, defaultHash: (value: string) => string) => string; declare type DarkModeConfig = 'media' | 'class' | (string & {}) | boolean | undefined | [mode: 'class', selector: string]; /** * Allows to return a dark color for the given light color. * * ```js * { * // 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50 * darkColor: autoDarkColor * // custom resolvers * darkColor: (section, key, { theme }) => theme(`${section}.${key}-dark`) as ColorValue * darkColor: (section, key, { theme }) => theme(`dark.${section}.${key}`) as ColorValue * darkColor: (section, key, { theme }) => theme(`${section}.dark.${key}`) as ColorValue * darkColor: (section, key, context, lightColor) => generateDarkColor(lightColor), * } * ``` * * Or use the light color to generate a dark color * * ```js * { * darkColor: (section, key, context, color) => generateDark(color) * } * ``` * @param section the theme section * @param key the theme key within section — maybe an arbitrary value `[...]` * @param context the context * @param color the current color * @returns the dark color to use */ declare type DarkColor = (section: string, key: string, context: Context, color: ColorValue) => ColorValue | Falsey; declare type Finalize = (rule: TwindRule, context: Context) => TwindRule; interface TwindConfig { /** Allows to change how the `dark` variant is used (default: `"media"`) */ darkMode?: DarkModeConfig; darkColor?: DarkColor; theme: ThemeConfig; preflight: false | MaybeThunk[]; variants: Variant[]; rules: Rule[]; hash?: boolean | undefined | HashFunction; stringify: StringifyDeclaration; ignorelist: (string | RegExp)[]; finalize: Finalize[]; } declare type ArrayType = T extends (infer Item)[] ? Item : T; declare type ExtractTheme = T extends Preset ? Theme : T; declare type ExtractUserTheme = { [key in keyof T]: key extends 'extend' ? never : T[key] extends ThemeSectionResolver ? Value : T[key]; } & BaseTheme; /** @experimental */ declare type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never; declare type ExtractThemes[]> = UnionToIntersection | BaseTheme | ArrayType>>; interface TwindPresetConfig { /** Allows to change how the `dark` variant is used (default: `"media"`) */ darkMode?: DarkModeConfig; darkColor?: DarkColor; theme?: ThemeConfig; preflight?: false | MaybeArray>; variants?: Variant[]; rules?: Rule[]; hash?: boolean | undefined | HashFunction; stringify?: StringifyDeclaration; ignorelist?: MaybeArray; finalize?: MaybeArray>; } interface TwindUserConfig[] = Preset[]> { presets?: Presets; /** Allows to change how the `dark` variant is used (default: `"media"`) */ darkMode?: DarkModeConfig; darkColor?: DarkColor>; theme?: Theme | ThemeConfig>; preflight?: false | MaybeArray>>; variants?: Variant>[]; rules?: Rule>[]; /** * Enables hashing of all classes (default: `false`). * * If a function is given it can be used to hash only certain classes: * * ```js * { * hash(className, defaultHash) { * if (/^[~@]\(/.test(className)) { * // a shortcut like `~(...)` or apply like `@(...)` * return defaultHash(className) * } * return className * } * } *``` */ hash?: boolean | undefined | HashFunction; stringify?: StringifyDeclaration>; ignorelist?: MaybeArray; finalize?: MaybeArray>; } interface BaseTheme { screens: Record>; colors: Record; } declare type ScreenValue = string | { raw: string; } | { min: string; max?: string; } | { min?: string; max: string; }; interface ColorFunctionOptions { opacityVariable?: string | undefined; opacityValue?: string | undefined; } declare type ColorFunction = (options: ColorFunctionOptions) => string; interface ColorRecord extends Record { } declare type ColorValue = string | ColorFunction; declare type MaybeColorValue = ColorValue | ColorRecord; interface ThemeSectionResolverContext { readonly colors: Theme['colors']; readonly theme: ThemeFunction; /** * No-op function as negated values are automatically infered and do _not_ need to be in the theme. */ readonly negative: (scale: Record) => Record; readonly breakpoints: (screens: Record>) => Record; } interface ThemeSectionResolver { (context: ThemeSectionResolverContext): Value; } declare type ThemeSection = Value | ThemeSectionResolver; declare type PartialTheme = { [Section in keyof Theme]?: ThemeSection; }; declare type ThemeConfig = PartialTheme & { extend?: PartialTheme; }; declare type MatchConverter = (match: Match, context: Context) => string; interface PresetThunk { (config: TwindConfig): TwindPresetConfig; } declare type Preset = TwindPresetConfig | PresetThunk; interface ClassObject { [key: string]: boolean | number | unknown; } declare type Class = string | number | boolean | Falsey | ClassObject | Class[]; declare type NestedFunction = (strings: TemplateStringsArray | Class, ...interpolations: Class[]) => string; declare type Nested = NestedFunction & { [label: string]: NestedFunction; }; /** * @group Class Name Generators */ declare const apply: Nested; /** * @group Class Name Generators */ declare const shortcut: Nested; interface AnimationFunction { (animation: string | CSSProperties, waypoints: StringLike): StringLike; } declare type Animation = AnimationFunction & { [label: string]: AnimationFunction; }; /** * @group Class Name Generators */ declare const animation: Animation; declare type AutocompleteItem = { prefix?: string; suffix: string; theme?: { section: string; key: string; }; modifiers?: AutocompleteModifier[] | false | null | undefined; color?: string | false | null | undefined; label?: string; }; declare type AutocompleteModifier = { modifier: string; theme?: { section: string; key: string; }; color?: string | false | null | undefined; label?: string; }; interface AutocompleteContext { /** Allows to resolve theme values. */ readonly theme: ThemeFunction; readonly variants: Record; } declare type AutocompleteProvider = (match: MatchResult, context: AutocompleteContext) => (string | AutocompleteItem)[]; /** * @experimental * @group Configuration * @param resolver * @param autocomplete */ declare function withAutocomplete(resolver: RuleResolver, autocomplete: AutocompleteProvider | false | null | undefined): RuleResolver; declare function withAutocomplete(resolver: VariantResolver, autocomplete: AutocompleteProvider | false | null | undefined): VariantResolver; declare function withAutocomplete(rule: Rule, autocomplete: AutocompleteProvider | false | null | undefined): Rule; /** * @internal * @param resolver * @returns */ declare function getAutocompleteProvider(resolver: RuleResolver | VariantResolver): AutocompleteProvider | undefined; /** * @internal * @param color * @param options * @returns */ declare function toColorValue(color: ColorValue, options?: ColorFunctionOptions): string; /** * Looks for a matching dark color within a [tailwind color palette](https://tailwindcss.com/docs/customizing-colors) (`50`, `100`, `200`, ..., `800`, `900`). * * ```js * defineConfig({ * darkColor: autoDarkColor, * }) * ``` * * **Note**: Does not work for arbitrary values like `[theme(colors.gray.500)]` or `[theme(colors.gray.500, #ccc)]`. * * @group Configuration * @param section within theme to use * @param key of the light color or an arbitrary value * @param context to use * @returns the dark color if found */ declare function autoDarkColor(section: string, key: string, { theme }: Context): ColorValue | Falsey; /** * @group Class Name Generators * @param strings * @param interpolations */ declare function css(strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): string; declare function css(style: CSSObject | string): string; /** * Constructs `class` strings conditionally. * * Twinds version of popular libraries like [classnames](https://github.com/JedWatson/classnames) or [clsx](https://github.com/lukeed/clsx). * The key advantage of `cx` is that it supports twinds enhanced class name syntax like grouping and aliases. * * @group Class Name Generators * @param strings * @param interpolations * @returns */ declare function cx(strings: TemplateStringsArray, ...interpolations: Class[]): string; /** * Constructs `class` strings conditionally. * * Twinds version of popular libraries like [classnames](https://github.com/JedWatson/classnames) or [clsx](https://github.com/lukeed/clsx). * The key advantage of `cx` is that it supports twinds enhanced class name syntax like grouping and aliases. * * @group Class Name Generators * @param input */ declare function cx(...input: Class[]): string; /** * @group Configuration * @param param0 * @returns */ declare function defineConfig[] = Preset[]>({ presets, ...userConfig }: TwindUserConfig): TwindConfig>; interface InjectGlobalFunction { (style: CSSBase | string): void; (strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): void; bind(thisArg?: ((tokens: string) => string) | undefined | void): InjectGlobalFunction; call(thisArg: ((tokens: string) => string) | undefined | void, style: CSSBase | string): void; apply(thisArg: ((tokens: string) => string) | undefined | void, args: [CSSBase | string]): void; } /** * Injects styles into the global scope and is useful for applications such as gloabl styles, CSS resets or font faces. * * It **does not** return a class name, but adds the styles within the base layer to the stylesheet directly. * * @group Style Injectors */ declare const injectGlobal: InjectGlobalFunction; /** * @group Runtime * @param config * @param isProduction */ declare function install(config: TwindConfig, isProduction?: boolean): Twind; declare function install[] = Preset[]>(config: TwindUserConfig, isProduction?: boolean): Twind>; interface KeyframesFunction { (style: CSSObject | string): StringLike; (strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): StringLike; bind(thisArg?: ((tokens: string) => string) | undefined | void): Keyframes & { [label: string]: KeyframesFunction; }; call(thisArg: ((tokens: string) => string) | undefined | void, style: CSSObject | string): StringLike; call(thisArg: ((tokens: string) => string) | undefined | void, strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]): StringLike; apply(thisArg: ((tokens: string) => string) | undefined | void, args: [CSSObject | string]): StringLike; apply(thisArg: ((tokens: string) => string) | undefined | void, args: [CSSObject | string] | [strings: TemplateStringsArray, ...interpolations: readonly CSSValue[]]): StringLike; } declare type Keyframes = KeyframesFunction & { [label: string]: KeyframesFunction; }; /** * **Note**: The styles will be injected on first use. * * @group Style Injectors */ declare const keyframes: Keyframes; interface TwindMutationObserver { observe: (target: Node) => void; disconnect: () => void; } /** * @group Runtime * @param tw * @param target * @returns * @internal */ declare function mo(tw: Twind): TwindMutationObserver; /** * @group Runtime * @param tw * @param target * @returns */ declare function observe(tw?: Twind, target?: false | Node): Twind; interface ParsedRule { /** * The utility name including `-` if set, but without `!` and variants */ readonly n: string; /** * All variants without trailing colon: `hover`, `after:`, `[...]` */ readonly v: string[]; /** * Something like `!underline` or `!bg-red-500` or `!red-500` */ readonly i?: boolean; } interface ParsedDevRule extends ParsedRule { readonly a: string[]; readonly l: [start: number, end: number]; } /** * @internal * @param token * @returns */ declare function parse(token: string): ParsedRule[]; declare type ThemeMatchResult = MatchResult & { /** The found theme value */ _: Value; }; declare type ThemeRuleResolver = RuleResolver>; declare type ThemeMatchConverter = MatchConverter>; /** * @group Configuration * @param pattern */ declare function match(pattern: MaybeArray): Rule; /** * @group Configuration * @param pattern * @param resolver */ declare function match(pattern: MaybeArray, resolver: RuleResolver): Rule; /** * @group Configuration * @param pattern * @param resolve */ declare function match(pattern: MaybeArray, resolve: (string & {}) | CSSObject): Rule; /** * @group Configuration * @param pattern * @param resolve * @param convert */ declare function match(pattern: MaybeArray, resolve: keyof CSSProperties, convert?: MatchConverter): Rule; /** * @group Configuration * @internal * @deprecated Use {@link match} instead. */ declare function fromMatch(): RuleResolver; /** * @group Configuration * @internal * @deprecated Use {@link match} instead. */ declare function fromMatch(resolver: RuleResolver): RuleResolver; /** * @group Configuration * @internal * @deprecated Use {@link match} instead. */ declare function fromMatch(resolve: keyof CSSProperties, convert?: MatchConverter): RuleResolver; /** * @group Configuration * @internal * @deprecated Use {@link match} instead. */ declare function fromMatch(resolve: string | CSSObject): RuleResolver; /** * @group Configuration * @param pattern * @param section * @param resolve * @param convert * @returns */ declare function matchTheme(pattern: MaybeArray, /** Theme section to use (default: `$1` — The first matched group) */ section?: '' | Section | KebabCase
, /** The css property (default: value of {@link section}) */ resolve?: keyof CSSProperties | ThemeRuleResolver, Theme>, convert?: ThemeMatchConverter, Theme>): Rule; /** * @group Configuration * @internal * @deprecated Use {@link matchTheme} instead. * @param section * @param resolve * @param convert * @returns */ declare function fromTheme( /** Theme section to use (default: `$1` — The first matched group) */ section?: '' | Section | KebabCase
, /** The css property (default: value of {@link section}) */ resolve?: keyof CSSProperties | ThemeRuleResolver, Theme>, convert?: ThemeMatchConverter, Theme>): RuleResolver; declare type FilterByThemeValue = { [key in keyof Theme & string]: ThemeValue extends Value ? Theme[key] : never; }; interface ColorFromThemeValue { value: string; color: ColorFunction; opacityVariable: string | undefined; opacityValue: string | undefined; } interface ColorFromThemeOptions = keyof FilterByThemeValue, OpacitySection extends keyof FilterByThemeValue = keyof FilterByThemeValue> { /** Theme section to use (default: `$0.replace('-', 'Color')` — The matched string with `Color` appended) */ section?: Section | KebabCase
; /** The css property (default: value of {@link section}) */ property?: keyof CSSProperties; /** `--tw-${$0}opacity` -> '--tw-text-opacity' */ opacityVariable?: string | false; /** `section.replace('Color', 'Opacity')` -> 'textOpacity' */ opacitySection?: OpacitySection; selector?: string; } /** * @group Configuration * @param pattern * @param options * @param resolve * @returns */ declare function matchColor = keyof FilterByThemeValue, OpacitySection extends keyof FilterByThemeValue = keyof FilterByThemeValue>(pattern: MaybeArray, options?: ColorFromThemeOptions, resolve?: ThemeRuleResolver): Rule; /** * @group Configuration * @internal * @deprecated Use {@link matchColor} instead. * @param options * @param resolve * @returns */ declare function colorFromTheme = keyof FilterByThemeValue, OpacitySection extends keyof FilterByThemeValue = keyof FilterByThemeValue>(options?: ColorFromThemeOptions, resolve?: ThemeRuleResolver): RuleResolver; /** * @internal * @param input */ declare function parseValue(input: string): [value: string, modifier: string | undefined] | [value: undefined, modifier: string | undefined]; /** * @internal * @param property * @param value * @returns */ declare function toCSS(property: string, value: string | ColorFromThemeValue): CSSObject; /** * @internal * @param value * @param section * @param context * @returns */ declare function arbitrary(value: string, section: string | undefined, context: Context): string | undefined; /** * @internal * @param value * @returns */ declare function normalize(value: string): string; /** * @group Runtime * @param install * @returns */ declare function auto(install: () => void): () => void; /** * A proxy to the currently active Twind instance. * @group Style Injectors */ declare const tw: Twind; declare type SheetFactory = () => Sheet; /** * Manages a single Twind instance — works in browser, Node.js, Deno, workers... * * @group Runtime * @param config * @param sheet * @param target * @returns */ declare function setup(config?: TwindConfig, sheet?: Sheet | SheetFactory, target?: HTMLElement): Twind; declare function setup[] = Preset[], SheetTarget = unknown>(config?: TwindUserConfig, sheet?: Sheet | SheetFactory, target?: HTMLElement): Twind, SheetTarget>; /** * @group Sheets * @param element * @returns */ declare function cssom(element?: CSSStyleSheet | HTMLStyleElement | string | null | false): Sheet; /** * @group Sheets * @param element * @returns */ declare function dom(element?: HTMLStyleElement | string | null | false): Sheet; /** * @group Sheets * @param includeResumeData * @returns */ declare function virtual(includeResumeData?: boolean): Sheet; /** * Returns a sheet useable in the current environment. * * @group Sheets * @param useDOMSheet usually something like `process.env.NODE_ENV != 'production'` or `import.meta.env.DEV` (default: browser={@link cssom}, server={@link virtual}) * @param disableResume to not include or use resume data * @returns a sheet to use */ declare function getSheet(useDOMSheet?: boolean, disableResume?: boolean): Sheet; /** * @group Sheets * @param target * @returns */ declare function stringify(target: unknown): string; /** * Options for {@link inline} */ interface InlineOptions { /** * {@link Twind} instance to use (default: {@link @twind/core.tw}) */ tw?: Twind; /** * Allows to minify the resulting CSS. */ minify?: InlineMinify; } interface InlineMinify { /** * Called to minify the CSS. * * @param css the CSS to minify * @param html the HTML that will be used — allows to only include above-the-fold CSS * @return the resulting CSS */ (css: string, html: string): string; } /** * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) * * 1. parse the markup and process element classes with the provided Twind instance * 2. update the class attributes _if_ necessary * 3. inject a style element with the CSS as last element into the head * 4. return the HTML string with the final element classes * * ```js * import { inline } from '@twind/core' * * function render() { * return inline(renderApp()) * } * ``` * * Minify CSS with [@parcel/css](https://www.npmjs.com/package/@parcel/css): * * ```js * import { inline } from '@twind/core' * import { transform } from '@parcel/css' * * function render() { * return inline(renderApp(), { minify: (css) => transform({ filename: 'twind.css', code: Buffer.from(css), minify: true }) }) * } * ``` * * You can provide your own Twind instance: * * ```js * import { inline } from '@twind/core' * import { tw } from './custom/twind/instance' * * function render() { * return inline(renderApp(), { tw }) * } * ``` * * @group Static Extraction * @param markup HTML to process * @param options to customize the processing * @returns the resulting HTML */ declare function inline(markup: string, options?: InlineOptions['tw'] | InlineOptions): string; /** * Result of {@link extract} */ interface ExtractResult { /** The possibly modified HTML */ html: string; /** The generated CSS */ css: string; } /** * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) * * **Note**: Consider using {@link inline} instead. * * 1. parse the markup and process element classes with the provided Twind instance * 2. update the class attributes _if_ necessary * 3. return the HTML string with the final element classes * * ```js * import { extract } from '@twind/core' * * function render() { * const { html, css } = extract(renderApp()) * * // inject as last element into the head * return html.replace('', ``) * } * ``` * * You can provide your own Twind instance: * * ```js * import { extract } from '@twind/core' * import { tw } from './custom/twind/instance' * * function render() { * const { html, css } = extract(renderApp(), tw) * * // inject as last element into the head * return html.replace('', ``) * } * ``` * * @group Static Extraction * @param markup HTML to process * @param tw a {@link Twind} instance (default: twind managed tw) * @returns the possibly modified html and css */ declare function extract(html: string, tw?: Twind): ExtractResult; /** * Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps) * * **Note**: Consider using {@link inline} or {@link extract} instead. * * 1. parse the markup and process element classes with the provided Twind instance * 2. update the class attributes _if_ necessary * 3. return the HTML string with the final element classes * * ```js * import { consume, stringify, tw } from '@twind/core' * * function render() { * const html = renderApp() * * // remember global classes * const restore = tw.snapshot() * * // generated markup * const markup = consume(html) * * // create CSS * const css = stringify(tw.target) * * // restore global classes * restore() * * // inject as last element into the head * return markup.replace('', ``) * } * ``` * * You can provide your own Twind instance: * * ```js * import { consume, stringify } from '@twind/core' * import { tw } from './custom/twind/instance' * * function render() { * const html = renderApp() * * // remember global classes * const restore = snapshot(tw.target) * * // generated markup * const markup = consume(html) * * // restore global classes * restore() * * // create CSS * const css = stringify(tw.target) * * // inject as last element into the head * return markup.replace('', ``) * } * ``` * * @group Static Extraction * @param markup HTML to process * @param tw a {@link Twind} instance * @returns possibly modified HTML */ declare function consume(markup: string, tw?: (className: string) => string): string; declare type StrictMorphVariant = T extends number ? `${T}` | T : T extends 'true' ? true | T : T extends 'false' ? false | T : T; declare type MorphVariant = T extends number ? `${T}` | T : T extends 'true' ? boolean | T : T extends 'false' ? boolean | T : T extends `${number}` ? number | T : T; declare type StyleTokenValue = string | Falsey; declare type StyleToken = StyleTokenValue; /** * Allows to extract the supported properties of a style function. * * Here is an example for `react` * ```js * import { HTMLAttributes } from "react"; * import { style, PropsOf } from "@twind/core"; * const button = style({ ... }) * type ButtonProps = PropsOf * export const Button = (props: ButtonProps & HTMLAttributes) => { * return