From 9bc6ae00bc5050093217fa442dc89b8336d9993a Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Tue, 14 May 2024 15:34:18 -0400 Subject: [PATCH] finish twind "bundle" --- bundled/core.d.ts | 1114 +++++++++++++++++++++++++++ bundled/{twind-core.mjs => core.js} | 1 + bundled/presets.d.ts | 209 +++++ bundled/presets.js | 11 + bundled/test.tsx | 16 +- bundled/twind-preset-autoprefix.mjs | 6 - bundled/twind-preset-tailwind.mjs | 2 - deno.jsonc | 2 +- run-browser.tsx | 7 +- 9 files changed, 1348 insertions(+), 20 deletions(-) create mode 100644 bundled/core.d.ts rename bundled/{twind-core.mjs => core.js} (99%) create mode 100644 bundled/presets.d.ts create mode 100644 bundled/presets.js delete mode 100644 bundled/twind-preset-autoprefix.mjs delete mode 100644 bundled/twind-preset-tailwind.mjs diff --git a/bundled/core.d.ts b/bundled/core.d.ts new file mode 100644 index 0000000..ea8e99a --- /dev/null +++ b/bundled/core.d.ts @@ -0,0 +1,1114 @@ +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