UNPKG

29.9 kBTypeScriptView Raw
1import { PropertiesFallback, PropertiesHyphenFallback, AtRule, SimplePseudos } from 'csstype';
2
3interface CSSCustomProperties {
4 '--tw-bg-opacity'?: string;
5 '--tw-text-opacity'?: string;
6 '--tw-border-opacity'?: string;
7 '--tw-divide-opacity'?: string;
8 '--tw-placeholder-opacity'?: string;
9 '--tw-shadow'?: string;
10 '--tw-ring-inset'?: string;
11 '--tw-ring-color'?: string;
12 '--tw-ring-opacity'?: string;
13 '--tw-ring-shadow'?: string;
14 '--tw-ring-offset-color'?: string;
15 '--tw-ring-offset-shadow'?: string;
16 '--tw-ring-offset-width'?: string;
17 '--tw-gradient-from'?: string;
18 '--tw-gradient-to'?: string;
19 '--tw-gradient-stops'?: string;
20 '--tw-divide-y-reverse'?: string;
21 '--tw-divide-x-reverse'?: string;
22 '--tw-space-y-reverse'?: string;
23 '--tw-space-x-reverse'?: string;
24 '--tw-translate-x'?: string;
25 '--tw-translate-y'?: string;
26 '--tw-rotate'?: string;
27 '--tw-skew-x'?: string;
28 '--tw-skew-y'?: string;
29 '--tw-scale-x'?: string;
30 '--tw-scale-y'?: string;
31 '--tw-ordinal'?: string;
32 '--tw-slashed-zero'?: string;
33 '--tw-numeric-figure'?: string;
34 '--tw-numeric-spacing'?: string;
35 '--tw-numeric-fraction'?: string;
36}
37interface CSSProperties extends PropertiesFallback<string, string>, PropertiesHyphenFallback<string, string>, CSSCustomProperties {
38}
39interface FontFace extends AtRule.FontFaceFallback<string, string>, AtRule.FontFaceHyphenFallback<string, string> {
40}
41interface CounterStyle extends AtRule.CounterStyleFallback<string, string>, AtRule.CounterStyleHyphenFallback<string, string> {
42}
43
44declare type Falsy = '' | 0 | -0 | false | null | undefined | void;
45declare type MaybeArray<T> = T | readonly T[];
46
47declare type MaybeObjInterpolationGeneric<T> = T[] | [TemplateStringsArray, ...T[]];
48declare type MaybeTokenInterpolation = MaybeObjInterpolationGeneric<Token>;
49interface TWCallable {
50 (strings: TemplateStringsArray, ...interpolations: Token[]): string;
51 (...tokens: Token[]): string;
52}
53interface TW extends TWCallable {
54 theme: ThemeResolver;
55}
56interface Context {
57 /** Allow composition */
58 readonly tw: TWCallable;
59 /** Access to theme values */
60 readonly theme: ThemeResolver;
61 /** Create unique identifier (group, custom properties) */
62 readonly tag: (key: string) => string;
63 readonly css: (rule: Rule[] | string) => CSSRules;
64}
65interface Instance {
66 readonly tw: TW;
67 readonly setup: (options?: Configuration) => void;
68}
69declare type MaybeThunk<T> = T | ((context: Context) => T);
70interface Preflight {
71 (preflight: CSSRules, context: Context): MaybeThunk<CSSRules | undefined | void>;
72}
73interface ThemeConfiguration extends Partial<Theme> {
74 extend?: Partial<Theme>;
75}
76interface SheetConfig<T = unknown> {
77 /**
78 * Sets a cryptographic nonce (number used once) on the enclosing `<style>` tag when generating a page on demand.
79 *
80 * Useful for enforcing a [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP).
81 */
82 nonce?: string;
83 /** Target to insert rules into. */
84 target?: T;
85}
86interface Sheet<T = unknown> {
87 readonly target: T;
88 insert: (rule: string, index: number) => void;
89 init?: SheetInit;
90}
91declare type SheetInitCallback<T = unknown> = (value?: T | undefined) => T;
92interface SheetInit {
93 /**
94 * Register a function that should be called to use a snapshot state or create a new state.
95 */
96 <T>(callback: SheetInitCallback<T>): T;
97}
98declare type Prefixer = (property: string, value: string, important?: boolean) => string;
99declare type Hasher = (value: string) => string;
100declare type DarkMode = 'media' | 'class' | false;
101interface Configuration {
102 /**
103 * Determines the dark mode strategy (default: `"media"`).
104 */
105 darkMode?: DarkMode;
106 theme?: ThemeConfiguration;
107 plugins?: Record<string, Plugin | undefined>;
108 /**
109 * ```js
110 * {
111 * ':new-variant': '& .selector',
112 * }
113 * ```
114 */
115 variants?: Record<string, string>;
116 /**
117 * Sets a cryptographic nonce (number used once) on the enclosing `<style>` tag when generating a page on demand.
118 *
119 * Useful for enforcing a [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP).
120 */
121 nonce?: string;
122 /** Style insertion methodology to be used. */
123 sheet?: Sheet;
124 /** Called right before the first rule is injected. */
125 preflight?: Preflight | boolean | CSSRules;
126 /** Auto-prefixer method for CSS property–value pairs. */
127 prefix?: Prefixer | boolean;
128 hash?: Hasher | boolean;
129 mode?: Mode | 'strict' | 'warn' | 'silent';
130 /**
131 * Control whether or not utilities should be marked with `!important`
132 */
133 important?: boolean;
134}
135declare type ReportInfo = {
136 id: 'LATE_SETUP_CALL';
137} | {
138 id: 'UNKNOWN_DIRECTIVE';
139 rule: string;
140} | {
141 id: 'UNKNOWN_THEME_VALUE';
142 key: string | undefined;
143} | {
144 id: 'INJECT_CSS_ERROR';
145 error: Error;
146 css: string;
147};
148interface Mode {
149 /** Called for unknown theme values */
150 unknown: <Section extends keyof Theme>(section: Section, key: string[] | undefined, optional: boolean, context: Context) => ThemeSectionType<Theme[Section]> | undefined | void;
151 /**
152 * Notify error (missing plugin, duplicate directives? )
153 *
154 * Why id?
155 * - can generate an url with more info
156 * - reduce bundle size by omitting large error messages
157 */
158 report(info: ReportInfo, context: Context): void;
159}
160declare type Plugin = string | CSSRules | DirectiveHandler;
161interface DirectiveHandler {
162 /**
163 * Creates CSSRules based on `parameters`
164 */
165 (parameters: string[], context: Context, id: string): InlineDirective | CSSRules | string | Falsy;
166}
167interface Rule {
168 /**
169 * The variants: `[":sm", ":dark", ":hover"]`
170 */
171 v: string[];
172 /**
173 * The directive: `"text-sm"`, `"rotate-45"`
174 */
175 d: string | InlineDirective;
176 /** Is this rule negated: `"-rotate-45"` =\> `true` */
177 n: boolean | undefined;
178 /** Is this rule marked as important: `"!stroke-4"` =\> `true` */
179 i: boolean | undefined;
180 /**
181 * The id is the tailwind rule including variants, negate and directive
182 *
183 * Initialy this is set to an empty string.
184 *
185 * This is used to cache the id of static rules (from template literals).
186 */
187 $: string;
188}
189interface Directive<T> {
190 /** Can be used as a inline directive */
191 (context: Context): T;
192 /** Can be used as a plugin */
193 (params: string[], context: Context): T;
194}
195interface InlineDirective {
196 (context: Context): CSSRules | string | Falsy | TypescriptCompat;
197}
198interface TokenGrouping extends Record<string, Token> {
199}
200declare type TypescriptCompat = boolean | number;
201declare type Token = Token[] | TokenGrouping | InlineDirective | string | Falsy | TypescriptCompat;
202/**
203 * Pseudo class
204 * watch out for ':root' - that could use '*' instead
205 */
206declare type CSSSimplePseudos = {
207 [K in SimplePseudos as `&${string & K}`]?: CSSRulesThunk | MaybeArray<CSSRules>;
208};
209interface CSSPseudos extends CSSSimplePseudos {
210 '&:nth-child(2n)'?: CSSRules;
211 '&:nth-child(odd)'?: CSSRules;
212}
213declare type CSSAtMedia = Record<string, MaybeArray<CSSRules>>;
214declare type CSSAtSupports = Record<string, MaybeArray<CSSRules>>;
215declare type CSSAtKeyframes = Record<string, CSSProperties | ((context: Context) => CSSProperties)>;
216/**
217 * See: https://drafts.csswg.org/css-nesting/#nest-selector
218 *
219 * ```
220 * "& > * + *": {
221 * marginLeft: 16
222 * },
223 *
224 * // In a comma-separated list, each individual selector shall start with "&"
225 * "&:focus, &:active": {
226 * outline: "solid"
227 * },
228 *
229 * // Self-references are also supported
230 * "& + &": {
231 * color: "green"
232 * }
233 * ```
234 */
235interface CSSRules {
236 '@import'?: CSSRulesThunk<MaybeArray<string>> | MaybeArray<string>;
237 '@font-face'?: CSSRulesThunk<MaybeArray<FontFace>> | MaybeArray<FontFace>;
238 '@keyframes'?: CSSRulesThunk<CSSAtKeyframes> | CSSAtKeyframes;
239 '@apply'?: MaybeArray<string | Falsy | TypescriptCompat>;
240 '@global'?: CSSRulesThunk<MaybeArray<CSSRules>> | MaybeArray<CSSRules>;
241 ':global'?: CSSRulesThunk<MaybeArray<CSSRules>> | MaybeArray<CSSRules>;
242 /** Global defaults */
243 [key: string]: CSSRuleValue;
244}
245declare type CSSRuleValue = CSSAtMedia | CSSAtSupports | CSSAtKeyframes | CSSRulesThunk | MaybeArray<CSSProperties | CSSRules | FontFace | string | Falsy | TypescriptCompat>;
246interface CSSRulesThunk<Value = CSSRuleValue> {
247 (context: Context): Value;
248}
249
250interface ThemeResolver {
251 <Section extends keyof Theme>(section: Section): Record<string, ThemeSectionType<Theme[Section]>>;
252 <Section extends keyof Theme>(keypath: `${Section}.${string}`): ThemeSectionType<Theme[Section]> | undefined;
253 <Section extends keyof Theme>(keypath: `${Section}.${string}`, defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): NonNullable<ThemeSectionType<Theme[Section]>>;
254 <Section extends keyof Theme>(section: Section, key: string | string[]): ThemeSectionType<Theme[Section]> | undefined;
255 <Section extends keyof Theme>(section: Section, key: string | string[], defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): NonNullable<ThemeSectionType<Theme[Section]>>;
256}
257interface ThemeHelper {
258 <Section extends keyof Theme>(section: Section): (context: Context) => Record<string, ThemeSectionType<Theme[Section]>>;
259 <Section extends keyof Theme>(keypath: `${Section}.${string}`): (context: Context) => ThemeSectionType<Theme[Section]> | undefined;
260 <Section extends keyof Theme>(keypath: `${Section}.${string}`, defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): (context: Context) => NonNullable<ThemeSectionType<Theme[Section]>>;
261 <Section extends keyof Theme>(section: Section, key: string | string[]): (context: Context) => ThemeSectionType<Theme[Section]> | undefined;
262 <Section extends keyof Theme>(section: Section, key: string | string[], defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): (context: Context) => NonNullable<ThemeSectionType<Theme[Section]>>;
263}
264declare type Unwrap<T> = T extends string[] ? string : T extends Record<string, infer R> ? R : T;
265declare type ThemeSectionType<T> = T extends ThemeSection<infer R> ? Unwrap<R> : Exclude<T, ThemeSectionResolver<T>>;
266interface ThemeSectionResolverContext {
267 /**
268 * No-op function as negated values are automatically infered and do _not_ not to be in the theme.
269 */
270 readonly negative: (records: Record<string, string | undefined>) => Record<string, string | undefined>;
271 readonly breakpoints: (records: Record<string, ThemeScreen | undefined>) => Record<string, string | undefined>;
272}
273declare type ThemeSectionRecord<T = string> = Record<string, T | undefined>;
274declare type ThemeSectionResolver<T = string> = (theme: ThemeResolver, context: ThemeSectionResolverContext) => ThemeSectionRecord<T>;
275declare type ThemeSection<T = string> = ThemeSectionRecord<T> | ThemeSectionResolver<T>;
276interface ThemeContainer {
277 screens?: Record<string, string | undefined>;
278 center?: boolean;
279 padding?: string | Record<string, string | undefined>;
280}
281declare type ThemeScreenValue = string | {
282 raw: string;
283} | {
284 min: string;
285 max?: string;
286} | {
287 min?: string;
288 max: string;
289};
290declare type ThemeScreen = MaybeArray<ThemeScreenValue>;
291interface ThemeColorObject extends Record<string, ThemeColor> {
292}
293declare type ThemeColor = string | ThemeColorObject;
294declare type ThemeFontSize = string | [size: string, lineHeight: string] | [size: string, options: {
295 lineHeight?: string;
296 letterSpacing?: string;
297}];
298declare type ThemeOutline = [outline: string, offset: string] | string[];
299interface Theme {
300 colors: ThemeSection<ThemeColor>;
301 spacing: ThemeSection;
302 durations: ThemeSection<string | string[]>;
303 screens: ThemeSection<ThemeScreen>;
304 animation: ThemeSection<string | string[]>;
305 backdropBlur: ThemeSection;
306 backdropBrightness: ThemeSection;
307 backdropContrast: ThemeSection;
308 backdropGrayscale: ThemeSection;
309 backdropHueRotate: ThemeSection;
310 backdropInvert: ThemeSection;
311 backdropOpacity: ThemeSection;
312 backdropSaturate: ThemeSection;
313 backdropSepia: ThemeSection;
314 backgroundColor: ThemeSection<ThemeColor>;
315 backgroundImage: ThemeSection<string | string[]>;
316 backgroundOpacity: ThemeSection;
317 backgroundPosition: ThemeSection;
318 backgroundSize: ThemeSection;
319 blur: ThemeSection;
320 borderColor: ThemeSection<ThemeColor>;
321 borderOpacity: ThemeSection;
322 borderRadius: ThemeSection;
323 borderWidth: ThemeSection;
324 boxShadow: ThemeSection<string | string[]>;
325 brightness: ThemeSection;
326 container: ThemeContainer | ThemeSectionResolver<ThemeContainer>;
327 contrast: ThemeSection;
328 cursor: ThemeSection;
329 divideColor: ThemeSection<ThemeColor>;
330 divideOpacity: ThemeSection;
331 divideWidth: ThemeSection;
332 dropShadow: ThemeSection<string | string[]>;
333 fill: ThemeSection<ThemeColor>;
334 flex: ThemeSection;
335 flexGrow: ThemeSection<number>;
336 flexShrink: ThemeSection<number>;
337 fontFamily: ThemeSection<string | string[]>;
338 fontSize: ThemeSection<ThemeFontSize>;
339 fontWeight: ThemeSection;
340 gap: ThemeSection;
341 gradientColorStops: ThemeSection<ThemeColor>;
342 grayscale: ThemeSection;
343 gridAutoColumns: ThemeSection;
344 gridAutoRows: ThemeSection;
345 gridColumn: ThemeSection;
346 gridColumnEnd: ThemeSection;
347 gridColumnStart: ThemeSection;
348 gridRow: ThemeSection;
349 gridRowEnd: ThemeSection;
350 gridRowStart: ThemeSection;
351 gridTemplateColumns: ThemeSection;
352 gridTemplateRows: ThemeSection;
353 height: ThemeSection;
354 hueRotate: ThemeSection;
355 inset: ThemeSection;
356 invert: ThemeSection;
357 keyframes: ThemeSection<Record<string, CSSProperties>>;
358 letterSpacing: ThemeSection;
359 lineHeight: ThemeSection;
360 listStyleType: ThemeSection;
361 margin: ThemeSection;
362 maxHeight: ThemeSection;
363 maxWidth: ThemeSection;
364 minHeight: ThemeSection;
365 minWidth: ThemeSection;
366 objectPosition: ThemeSection;
367 opacity: ThemeSection;
368 order: ThemeSection;
369 outline: ThemeSection<ThemeOutline>;
370 padding: ThemeSection;
371 placeholderColor: ThemeSection<ThemeColor>;
372 placeholderOpacity: ThemeSection;
373 ringColor: ThemeSection<ThemeColor>;
374 ringOffsetColor: ThemeSection<ThemeColor>;
375 ringOffsetWidth: ThemeSection;
376 ringOpacity: ThemeSection;
377 ringWidth: ThemeSection;
378 rotate: ThemeSection;
379 saturate: ThemeSection;
380 scale: ThemeSection;
381 sepia: ThemeSection;
382 skew: ThemeSection;
383 space: ThemeSection;
384 stroke: ThemeSection<ThemeColor>;
385 strokeWidth: ThemeSection;
386 textColor: ThemeSection<ThemeColor>;
387 textOpacity: ThemeSection;
388 transformOrigin: ThemeSection;
389 transitionDelay: ThemeSection<string | string[]>;
390 transitionDuration: ThemeSection<string | string[]>;
391 transitionProperty: ThemeSection<string | string[]>;
392 transitionTimingFunction: ThemeSection<string | string[]>;
393 translate: ThemeSection;
394 width: ThemeSection;
395 zIndex: ThemeSection;
396}
397
398declare type InterpolateKind = `theme(${keyof Theme})` | `range(${number},${number},${number})` | `string` | `number` | `nonzero`;
399declare type Interpolate<Kind extends InterpolateKind> = `{{${Kind}}}`;
400declare type FromTheme<Section extends keyof Theme> = Interpolate<`theme(${Section})`>;
401declare type NonEmptyString = Interpolate<'string'>;
402declare type Range<From extends number, To extends number, Step extends number = 1> = Interpolate<`range(${From},${To},${Step})`>;
403declare type Negatable<Value extends string> = Value | `-${Value}`;
404declare type SimplePseudoClasses = 'active' | 'any-link' | 'autofill' | 'checked' | 'default' | 'disabled' | 'empty' | 'enabled' | 'first-child' | 'first-of-type' | 'focus' | 'focus-visible' | 'focus-within' | 'future' | 'hover' | 'in-range' | 'indeterminate' | 'invalid' | 'last-child' | 'last-of-type' | 'link' | 'local-link' | 'only-child' | 'only-of-type' | 'optional' | 'out-of-range' | 'past' | 'paused' | 'placeholder-shown' | 'playing' | 'read-only' | 'read-write' | 'required' | 'target' | 'target-within' | 'user-invalid' | 'valid' | 'visited';
405declare type SimplePseudoElements = 'after' | 'before' | 'cue' | 'cue-region' | 'file-selector-button' | 'first-letter' | 'first-line' | 'marker' | 'placeholder' | 'selection' | 'target-text';
406declare type CoreVariants = 'dark' | 'sticky' | 'motion-reduce' | 'motion-safe' | 'first' | 'last' | 'even' | 'odd' | 'children' | 'siblings' | 'sibling' | 'override';
407declare type Empty = never | '' | 'DEFAULT';
408declare type Join<Prefix extends string | never, Suffix extends string | never, Separator extends string = '-'> = Suffix extends Empty ? Prefix extends Empty ? never : Prefix : Prefix extends Empty ? Suffix : Prefix extends Suffix ? never : Suffix extends `-${infer S}` ? `-${Prefix}${Separator}${S}` : `${Prefix}${Separator}${Suffix}`;
409declare type Corners = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'bl' | 'br';
410declare type Edges = 'x' | 'y' | 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'tb' | 'bl' | 'br' | 'lr';
411declare type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
412declare type GlobalValue = 'inherit' | 'initial' | 'unset';
413declare type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
414interface CorePlugins {
415 group: '' | NonEmptyString;
416 container: '';
417 decoration: 'slice' | 'clone' | GlobalValue;
418 box: 'border' | 'content';
419 block: '';
420 inline: '' | 'block' | 'flex' | 'grid' | 'table';
421 flow: 'root';
422 contents: '';
423 hidden: '';
424 float: 'right' | 'left' | 'none';
425 clear: 'right' | 'left' | 'both' | 'none';
426 isolate: '';
427 isolation: 'auto' | 'isolate' | GlobalValue;
428 object: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | Join<'' | 'left' | 'right' | 'center', '' | 'bottom' | 'top' | 'center'> | FromTheme<'objectPosition'>;
429 overflow: Join<'' | 'x' | 'y', 'auto' | 'hidden' | 'visible' | 'scroll'> | 'ellipsis' | 'clip';
430 overscroll: Join<'' | 'x' | 'y', 'auto' | 'contain' | 'none'>;
431 static: '';
432 fixed: '';
433 absolute: '';
434 relative: '';
435 sticky: '';
436 inset: Negatable<Join<'' | 'x' | 'y', FromTheme<'inset'>>>;
437 top: Negatable<FromTheme<'inset'>>;
438 right: Negatable<FromTheme<'inset'>>;
439 bottom: Negatable<FromTheme<'inset'>>;
440 left: Negatable<FromTheme<'inset'>>;
441 visible: '';
442 invisible: '';
443 z: Negatable<FromTheme<'zIndex'>>;
444 flex: '' | 'nowrap' | Join<'row' | 'col' | 'wrap', '' | 'reverse'> | Join<'grow', '' | '0' | FromTheme<'flexGrow'> | Interpolate<'number'>> | Join<'shrink', '' | '0' | FromTheme<'flexShrink'> | Interpolate<'number'>> | FromTheme<'flex'>;
445 order: FromTheme<'order'>;
446 grid: '' | Join<'cols', 'none' | Range<1, 12> | Interpolate<'nonzero'> | FromTheme<'gridTemplateColumns'>> | Join<'rows', 'none' | Range<1, 6> | Interpolate<'nonzero'> | FromTheme<'gridTemplateRows'>> | Join<'flow', Join<'row' | 'col', '' | 'dense'> | 'dense'>;
447 col: Join<'span', Range<1, 12> | Interpolate<'nonzero'>> | Join<'start', 'auto' | Range<1, 13> | Interpolate<'nonzero'> | FromTheme<'gridColumnStart'>> | Join<'end', 'auto' | Range<1, 13> | Interpolate<'nonzero'> | FromTheme<'gridColumnEnd'>> | FromTheme<'gridColumn'>;
448 row: Join<'span', Range<1, 12> | Interpolate<'nonzero'>> | Join<'start', 'auto' | Range<1, 13> | Interpolate<'nonzero'> | FromTheme<'gridRowStart'>> | Join<'end', 'auto' | Range<1, 13> | Interpolate<'nonzero'> | FromTheme<'gridRowEnd'>> | FromTheme<'gridRow'>;
449 auto: Join<'cols', 'auto' | FromTheme<'gridAutoColumns'>> | Join<'rows', 'auto' | FromTheme<'gridAutoRows'>>;
450 gap: Join<'' | 'x' | 'y', FromTheme<'gap'>>;
451 justify: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | Join<'items' | 'self', 'auto' | 'start' | 'end' | 'center' | 'stretch'>;
452 content: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
453 items: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
454 self: 'auto' | 'start' | 'end' | 'center' | 'stretch';
455 place: Join<'content', 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'> | Join<'items' | 'self', 'auto' | 'start' | 'end' | 'center' | 'stretch'>;
456 p: FromTheme<'padding'>;
457 py: FromTheme<'padding'>;
458 px: FromTheme<'padding'>;
459 pt: FromTheme<'padding'>;
460 pr: FromTheme<'padding'>;
461 pb: FromTheme<'padding'>;
462 pl: FromTheme<'padding'>;
463 m: Negatable<FromTheme<'margin'>>;
464 my: Negatable<FromTheme<'margin'>>;
465 mx: Negatable<FromTheme<'margin'>>;
466 mt: Negatable<FromTheme<'margin'>>;
467 mr: Negatable<FromTheme<'margin'>>;
468 mb: Negatable<FromTheme<'margin'>>;
469 ml: Negatable<FromTheme<'margin'>>;
470 space: Negatable<Join<'x' | 'y', FromTheme<'space'>>> | Join<'x' | 'y', 'reverse'>;
471 w: FromTheme<'width'>;
472 min: Join<'w', FromTheme<'minWidth'>> | Join<'h', FromTheme<'minHeight'>>;
473 max: Join<'w', FromTheme<'maxWidth'>> | Join<'h', FromTheme<'maxHeight'>>;
474 h: FromTheme<'height'>;
475 font: FromTheme<'fontFamily'> | FromTheme<'fontWeight'> | 'italic' | 'not-italic';
476 text: FromTheme<'fontSize'> | 'left' | 'right' | 'center' | 'justify' | FromTheme<'textColor'> | Join<'opacity', FromTheme<'textOpacity'>> | 'underline' | 'no-underline' | 'line-through' | 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
477 antialiased: '';
478 'subpixel-antialiased': '';
479 italic: '';
480 'not-italic': '';
481 'normal-nums': '';
482 ordinal: '';
483 'slashed-zero': '';
484 'lining-nums': '';
485 'oldstyle-nums': '';
486 'proportional-nums': '';
487 'tabular-nums': '';
488 'diagonal-fractions': '';
489 'stacked-fractions': '';
490 tracking: FromTheme<'letterSpacing'>;
491 leading: FromTheme<'lineHeight'>;
492 list: 'item' | 'inside' | 'outside' | 'none' | 'disc' | 'circle' | 'sqaure' | 'decimal' | 'decimal-leading-zero' | Join<'lower' | 'upper', 'roman' | 'greek' | 'alpha' | 'latin'> | FromTheme<'listStyleType'>;
493 placeholder: FromTheme<'placeholderColor'> | Join<'opacity', FromTheme<'placeholderOpacity'>>;
494 underline: '';
495 'no-underline': '';
496 'line-through': '';
497 uppercase: '';
498 lowercase: '';
499 capitalize: '';
500 'normal-case': '';
501 truncate: '';
502 align: 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super';
503 whitespace: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
504 break: 'normal' | 'words' | 'all';
505 bg: 'fixed' | 'local' | 'scroll' | Join<'clip', 'border' | 'padding' | 'content' | 'text'> | FromTheme<'backgroundColor'> | Join<'opacity', FromTheme<'backgroundOpacity'>> | Join<'' | 'left' | 'right' | 'center', '' | 'bottom' | 'top' | 'center'> | FromTheme<'backgroundPosition'> | 'no-repeat' | Join<'repeat', '' | 'x' | 'y' | 'round' | 'space'> | Join<'gradient-to', Corners> | FromTheme<'backgroundImage'> | FromTheme<'backgroundSize'>;
506 from: FromTheme<'gradientColorStops'>;
507 via: FromTheme<'gradientColorStops'>;
508 to: FromTheme<'gradientColorStops'>;
509 rounded: Join<'' | Corners, FromTheme<'borderRadius'>>;
510 border: Join<'' | Edges, FromTheme<'borderWidth'>> | FromTheme<'borderColor'> | Join<'opacity', FromTheme<'borderOpacity'>> | BorderStyle | 'collapse' | 'separate';
511 divide: Join<'x' | 'y', 'reverse' | FromTheme<'divideWidth'>> | FromTheme<'divideColor'> | Join<'opacity', FromTheme<'divideOpacity'>> | BorderStyle;
512 ring: 'inset' | FromTheme<'ringWidth'> | FromTheme<'ringColor'> | Join<'opacity', FromTheme<'ringOpacity'>> | Join<'offset', FromTheme<'ringOffsetWidth'> | FromTheme<'ringOffsetColor'>>;
513 shadow: FromTheme<'boxShadow'>;
514 opacity: FromTheme<'opacity'>;
515 table: '' | 'caption' | 'cell' | 'column' | Join<'column' | 'footer' | 'header' | 'row', 'group'> | 'row' | 'auto' | 'fixed';
516 transition: FromTheme<'transitionProperty'>;
517 duration: FromTheme<'durations'>;
518 ease: FromTheme<'transitionTimingFunction'>;
519 delay: FromTheme<'transitionDelay'>;
520 animate: FromTheme<'animation'>;
521 transform: '' | 'gpu' | 'none';
522 origin: 'center' | Join<'' | 'top' | 'bottom', '' | 'right' | 'left'>;
523 rotate: Negatable<FromTheme<'rotate'>>;
524 scale: Join<'' | 'x' | 'y', FromTheme<'scale'>>;
525 skew: Negatable<Join<'' | 'x' | 'y', FromTheme<'skew'>>>;
526 translate: Negatable<Join<'' | 'x' | 'y', FromTheme<'translate'>>>;
527 appearance: 'none' | 'auto' | 'menulist-button' | 'textfield';
528 cursor: FromTheme<'cursor'> | 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed' | 'none' | 'context-menu' | 'progress' | 'cell' | 'crosshair' | 'vertical-text' | 'alias' | 'copy' | 'no-drop' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';
529 outline: FromTheme<'outline'>;
530 'pointer-events': 'auto' | 'none';
531 resize: 'none' | 'x' | 'y' | '';
532 select: 'none' | 'auto' | 'text' | 'contain' | 'all';
533 fill: FromTheme<'fill'>;
534 stroke: FromTheme<'stroke'> | FromTheme<'strokeWidth'>;
535 'sr-only': '';
536 'not-sr-only': '';
537 filter: '' | 'none';
538 blur: FromTheme<'blur'>;
539 brightness: FromTheme<'brightness'>;
540 contrast: FromTheme<'contrast'>;
541 grayscale: FromTheme<'grayscale'>;
542 'hue-rotate': Negatable<FromTheme<'hueRotate'>>;
543 invert: FromTheme<'invert'>;
544 saturate: FromTheme<'saturate'>;
545 sepia: FromTheme<'sepia'>;
546 'drop-shadow': FromTheme<'dropShadow'>;
547 backdrop: Join<'filter', '' | 'none'> | Join<'blur', FromTheme<'backdropBlur'>> | Join<'brightness', FromTheme<'backdropBrightness'>> | Join<'contrast', FromTheme<'backdropContrast'>> | Join<'grayscale', FromTheme<'backdropGrayscale'>> | Join<'hue-rotate', Negatable<FromTheme<'backdropHueRotate'>>> | Join<'invert', FromTheme<'backdropInvert'>> | Join<'opacity', FromTheme<'backdropOpacity'>> | Join<'saturate', FromTheme<'backdropSaturate'>> | Join<'sepia', FromTheme<'backdropSepia'>>;
548 'mix-blend': BlendMode;
549 'bg-blend': BlendMode;
550}
551declare type ToString<T> = T extends string ? T : T extends number ? `${T}` : never;
552declare type JoinFromObject<T, Separator extends string = '-'> = {
553 [P in keyof T]: Join<ToString<P>, ToString<T[P]>, Separator>;
554}[keyof T];
555/** For adding additional variants */
556interface Variants {
557}
558/** For adding additional plugins */
559interface Plugins {
560}
561declare type CoreCompletionTokens = `${FromTheme<'screens'>}:` | `${'' | 'not-'}${SimplePseudoClasses}:` | `${Join<'group', '' | Interpolate<'string'>>}-${SimplePseudoClasses}:` | `${SimplePseudoElements}::` | `${CoreVariants}:` | JoinFromObject<CorePlugins>;
562declare type UserCompletionTokens = {
563 [K in keyof Variants]: `${ToString<K>}:`;
564}[keyof Variants] | JoinFromObject<Plugins>;
565declare type CompletionTokens = CoreCompletionTokens | UserCompletionTokens;
566
567interface Apply {
568 (strings: TemplateStringsArray, ...interpolations: Token[]): Directive<CSSRules>;
569 (...tokens: Token[]): Directive<CSSRules>;
570}
571declare const apply: Apply;
572
573declare const tw: TW;
574declare const setup: (options?: Configuration | undefined) => void;
575
576/**
577 * Returns an optimized and cached function for use with `tw`.
578 *
579 * `tw` caches rules based on the function identity. This helper caches
580 * the function based on the data.
581 *
582 * @param factory to use when the directive is invoked
583 * @param data to use
584 */
585declare const directive: <Data, T>(factory: (data: Data, context: Context) => MaybeThunk<T>, data: Data) => Directive<T>;
586
587declare const expandGroups: (classNames: string) => string;
588
589declare const create: (config?: Configuration | undefined) => Instance;
590
591declare const mode: (report: (message: string) => void) => Mode;
592declare const warn: Mode;
593declare const strict: Mode;
594declare const silent: Mode;
595
596declare const noprefix: Prefixer;
597declare const autoprefix: Prefixer;
598
599/**
600 * Creates an sheet which inserts style rules through the CSS Object Model.
601 */
602declare const cssomSheet: ({ nonce, target, }?: SheetConfig<CSSStyleSheet>) => Sheet<CSSStyleSheet>;
603/**
604 * An sheet placeholder which performs no operations. Useful for avoiding errors in a non-browser environment.
605 */
606declare const voidSheet: () => Sheet<null>;
607
608declare const theme: ThemeHelper;
609
610declare const cyrb32: Hasher;
611
612export { Apply, BlendMode, BorderStyle, CSSAtKeyframes, CSSAtMedia, CSSAtSupports, CSSCustomProperties, CSSProperties, CSSPseudos, CSSRuleValue, CSSRules, CSSRulesThunk, CSSSimplePseudos, CompletionTokens, Configuration, Context, CoreCompletionTokens, CorePlugins, CoreVariants, Corners, CounterStyle, DarkMode, Directive, DirectiveHandler, Edges, Empty, Falsy, FontFace, FromTheme, GlobalValue, Hasher, InlineDirective, Instance, Interpolate, InterpolateKind, Join, JoinFromObject, MaybeArray, MaybeObjInterpolationGeneric, MaybeThunk, MaybeTokenInterpolation, Mode, Negatable, NonEmptyString, Plugin, Plugins, Prefixer, Preflight, Range, ReportInfo, Rule, Sheet, SheetConfig, SheetInit, SheetInitCallback, SimplePseudoClasses, SimplePseudoElements, TW, TWCallable, Theme, ThemeColor, ThemeColorObject, ThemeConfiguration, ThemeContainer, ThemeFontSize, ThemeHelper, ThemeOutline, ThemeResolver, ThemeScreen, ThemeScreenValue, ThemeSection, ThemeSectionRecord, ThemeSectionResolver, ThemeSectionResolverContext, ThemeSectionType, ToString, Token, TokenGrouping, TypescriptCompat, Unwrap, UserCompletionTokens, Variants, apply, autoprefix, create, cssomSheet, directive, expandGroups, cyrb32 as hash, mode, noprefix, setup, silent, strict, theme, tw, voidSheet, warn };
613//# sourceMappingURL=twind.d.ts.map
614
\No newline at end of file