123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373 |
- import type { CorePluginList } from './generated/corePluginList'
- import type { DefaultColors } from './generated/colors'
- // Helpers
- type Expand<T> = T extends object
- ? T extends infer O
- ? { [K in keyof O]: Expand<O[K]> }
- : never
- : T
- type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>
- interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
- [key: string]: V | RecursiveKeyValuePair<K, V>
- }
- export type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
- type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>
- interface PluginUtils {
- colors: DefaultColors
- theme(path: string, defaultValue?: unknown): any
- breakpoints<I = Record<string, unknown>, O = I>(arg: I): O
- rgb(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
- hsl(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
- }
- // Content related config
- type FilePath = string
- type RawFile = { raw: string; extension?: string }
- type ExtractorFn = (content: string) => string[]
- type TransformerFn = (content: string) => string
- type ContentConfig =
- | (FilePath | RawFile)[]
- | {
- files: (FilePath | RawFile)[]
- relative?: boolean
- extract?: ExtractorFn | { [extension: string]: ExtractorFn }
- transform?: TransformerFn | { [extension: string]: TransformerFn }
- }
- // Important related config
- type ImportantConfig = boolean | string
- // Prefix related config
- type PrefixConfig = string
- // Separator related config
- type SeparatorConfig = string
- // Safelist related config
- type SafelistConfig = string | { pattern: RegExp; variants?: string[] }
- // Blocklist related config
- type BlocklistConfig = string
- // Presets related config
- type PresetsConfig = Partial<Config>
- // Future related config
- type FutureConfigValues =
- | 'hoverOnlyWhenSupported'
- | 'respectDefaultRingColorOpacity'
- | 'disableColorOpacityUtilitiesByDefault'
- | 'relativeContentPathsByDefault'
- | 'logicalSiblingUtilities'
- type FutureConfig = Expand<'all' | Partial<Record<FutureConfigValues, boolean>>> | []
- // Experimental related config
- type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'oxideParser'
- type ExperimentalConfig = Expand<'all' | Partial<Record<ExperimentalConfigValues, boolean>>> | []
- // DarkMode related config
- type DarkModeConfig =
- // Use the `media` query strategy.
- | 'media'
- // Use the `class` strategy, which requires a `.dark` class on the `html`.
- | 'class'
- // Use the `class` strategy with a custom class instead of `.dark`.
- | ['class', string]
- type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
- type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
- // Theme related config
- export interface ThemeConfig {
- // Responsiveness
- screens: ResolvableTo<ScreensConfig>
- supports: ResolvableTo<Record<string, string>>
- data: ResolvableTo<Record<string, string>>
- // Reusable base configs
- colors: ResolvableTo<RecursiveKeyValuePair>
- spacing: ResolvableTo<KeyValuePair>
- // Components
- container: ResolvableTo<
- Partial<{
- screens: ScreensConfig
- center: boolean
- padding: string | Record<string, string>
- }>
- >
- // Utilities
- inset: ThemeConfig['spacing']
- zIndex: ResolvableTo<KeyValuePair>
- order: ResolvableTo<KeyValuePair>
- gridColumn: ResolvableTo<KeyValuePair>
- gridColumnStart: ResolvableTo<KeyValuePair>
- gridColumnEnd: ResolvableTo<KeyValuePair>
- gridRow: ResolvableTo<KeyValuePair>
- gridRowStart: ResolvableTo<KeyValuePair>
- gridRowEnd: ResolvableTo<KeyValuePair>
- margin: ThemeConfig['spacing']
- aspectRatio: ResolvableTo<KeyValuePair>
- height: ThemeConfig['spacing']
- maxHeight: ThemeConfig['spacing']
- minHeight: ResolvableTo<KeyValuePair>
- width: ThemeConfig['spacing']
- maxWidth: ResolvableTo<KeyValuePair>
- minWidth: ResolvableTo<KeyValuePair>
- flex: ResolvableTo<KeyValuePair>
- flexShrink: ResolvableTo<KeyValuePair>
- flexGrow: ResolvableTo<KeyValuePair>
- flexBasis: ThemeConfig['spacing']
- borderSpacing: ThemeConfig['spacing']
- transformOrigin: ResolvableTo<KeyValuePair>
- translate: ThemeConfig['spacing']
- rotate: ResolvableTo<KeyValuePair>
- skew: ResolvableTo<KeyValuePair>
- scale: ResolvableTo<KeyValuePair>
- animation: ResolvableTo<KeyValuePair>
- keyframes: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair>>>
- cursor: ResolvableTo<KeyValuePair>
- scrollMargin: ThemeConfig['spacing']
- scrollPadding: ThemeConfig['spacing']
- listStyleType: ResolvableTo<KeyValuePair>
- columns: ResolvableTo<KeyValuePair>
- gridAutoColumns: ResolvableTo<KeyValuePair>
- gridAutoRows: ResolvableTo<KeyValuePair>
- gridTemplateColumns: ResolvableTo<KeyValuePair>
- gridTemplateRows: ResolvableTo<KeyValuePair>
- gap: ThemeConfig['spacing']
- space: ThemeConfig['spacing']
- divideWidth: ThemeConfig['borderWidth']
- divideColor: ThemeConfig['borderColor']
- divideOpacity: ThemeConfig['borderOpacity']
- borderRadius: ResolvableTo<KeyValuePair>
- borderWidth: ResolvableTo<KeyValuePair>
- borderColor: ThemeConfig['colors']
- borderOpacity: ThemeConfig['opacity']
- backgroundColor: ThemeConfig['colors']
- backgroundOpacity: ThemeConfig['opacity']
- backgroundImage: ResolvableTo<KeyValuePair>
- gradientColorStops: ThemeConfig['colors']
- backgroundSize: ResolvableTo<KeyValuePair>
- backgroundPosition: ResolvableTo<KeyValuePair>
- fill: ThemeConfig['colors']
- stroke: ThemeConfig['colors']
- strokeWidth: ResolvableTo<KeyValuePair>
- objectPosition: ResolvableTo<KeyValuePair>
- padding: ThemeConfig['spacing']
- textIndent: ThemeConfig['spacing']
- fontFamily: ResolvableTo<
- KeyValuePair<
- string,
- | string
- | string[]
- | [
- fontFamily: string | string[],
- configuration: Partial<{
- fontFeatureSettings: string
- fontVariationSettings: string
- }>
- ]
- >
- >
- fontSize: ResolvableTo<
- KeyValuePair<
- string,
- | string
- | [fontSize: string, lineHeight: string]
- | [
- fontSize: string,
- configuration: Partial<{
- lineHeight: string
- letterSpacing: string
- fontWeight: string | number
- }>
- ]
- >
- >
- fontWeight: ResolvableTo<KeyValuePair>
- lineHeight: ResolvableTo<KeyValuePair>
- letterSpacing: ResolvableTo<KeyValuePair>
- textColor: ThemeConfig['colors']
- textOpacity: ThemeConfig['opacity']
- textDecorationColor: ThemeConfig['colors']
- textDecorationThickness: ResolvableTo<KeyValuePair>
- textUnderlineOffset: ResolvableTo<KeyValuePair>
- placeholderColor: ThemeConfig['colors']
- placeholderOpacity: ThemeConfig['opacity']
- caretColor: ThemeConfig['colors']
- accentColor: ThemeConfig['colors']
- opacity: ResolvableTo<KeyValuePair>
- boxShadow: ResolvableTo<KeyValuePair>
- boxShadowColor: ThemeConfig['colors']
- outlineWidth: ResolvableTo<KeyValuePair>
- outlineOffset: ResolvableTo<KeyValuePair>
- outlineColor: ThemeConfig['colors']
- ringWidth: ResolvableTo<KeyValuePair>
- ringColor: ThemeConfig['colors']
- ringOpacity: ThemeConfig['opacity']
- ringOffsetWidth: ResolvableTo<KeyValuePair>
- ringOffsetColor: ThemeConfig['colors']
- blur: ResolvableTo<KeyValuePair>
- brightness: ResolvableTo<KeyValuePair>
- contrast: ResolvableTo<KeyValuePair>
- dropShadow: ResolvableTo<KeyValuePair<string, string | string[]>>
- grayscale: ResolvableTo<KeyValuePair>
- hueRotate: ResolvableTo<KeyValuePair>
- invert: ResolvableTo<KeyValuePair>
- saturate: ResolvableTo<KeyValuePair>
- sepia: ResolvableTo<KeyValuePair>
- backdropBlur: ThemeConfig['blur']
- backdropBrightness: ThemeConfig['brightness']
- backdropContrast: ThemeConfig['contrast']
- backdropGrayscale: ThemeConfig['grayscale']
- backdropHueRotate: ThemeConfig['hueRotate']
- backdropInvert: ThemeConfig['invert']
- backdropOpacity: ThemeConfig['opacity']
- backdropSaturate: ThemeConfig['saturate']
- backdropSepia: ThemeConfig['sepia']
- transitionProperty: ResolvableTo<KeyValuePair>
- transitionTimingFunction: ResolvableTo<KeyValuePair>
- transitionDelay: ResolvableTo<KeyValuePair>
- transitionDuration: ResolvableTo<KeyValuePair>
- willChange: ResolvableTo<KeyValuePair>
- content: ResolvableTo<KeyValuePair>
- }
- interface CustomThemeConfig extends ThemeConfig {
- [key: string]: any
- }
- // Core plugins related config
- type CorePluginsConfig = CorePluginList[] | Expand<Partial<Record<CorePluginList, boolean>>>
- // Plugins related config
- type ValueType =
- | 'any'
- | 'color'
- | 'url'
- | 'image'
- | 'length'
- | 'percentage'
- | 'position'
- | 'lookup'
- | 'generic-name'
- | 'family-name'
- | 'number'
- | 'line-width'
- | 'absolute-size'
- | 'relative-size'
- | 'shadow'
- export interface PluginAPI {
- // for registering new static utility styles
- addUtilities(
- utilities: CSSRuleObject | CSSRuleObject[],
- options?: Partial<{
- respectPrefix: boolean
- respectImportant: boolean
- }>
- ): void
- // for registering new dynamic utility styles
- matchUtilities<T = string, U = string>(
- utilities: KeyValuePair<
- string,
- (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
- >,
- options?: Partial<{
- respectPrefix: boolean
- respectImportant: boolean
- type: ValueType | ValueType[]
- values: KeyValuePair<string, T>
- modifiers: 'any' | KeyValuePair<string, U>
- supportsNegativeValues: boolean
- }>
- ): void
- // for registering new static component styles
- addComponents(
- components: CSSRuleObject | CSSRuleObject[],
- options?: Partial<{
- respectPrefix: boolean
- respectImportant: boolean
- }>
- ): void
- // for registering new dynamic component styles
- matchComponents<T = string, U = string>(
- components: KeyValuePair<
- string,
- (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
- >,
- options?: Partial<{
- respectPrefix: boolean
- respectImportant: boolean
- type: ValueType | ValueType[]
- values: KeyValuePair<string, T>
- modifiers: 'any' | KeyValuePair<string, U>
- supportsNegativeValues: boolean
- }>
- ): void
- // for registering new base styles
- addBase(base: CSSRuleObject | CSSRuleObject[]): void
- // for registering custom variants
- addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
- matchVariant<T = string>(
- name: string,
- cb: (value: T | string, extra: { modifier: string | null }) => string | string[],
- options?: {
- values?: KeyValuePair<string, T>
- sort?(
- a: { value: T | string; modifier: string | null },
- b: { value: T | string; modifier: string | null }
- ): number
- }
- ): void
- // for looking up values in the user’s theme configuration
- theme: <TDefaultValue = Config['theme']>(
- path?: string,
- defaultValue?: TDefaultValue
- ) => TDefaultValue
- // for looking up values in the user’s Tailwind configuration
- config: <TDefaultValue = Config>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue
- // for checking if a core plugin is enabled
- corePlugins(path: string): boolean
- // for manually escaping strings meant to be used in class names
- e: (className: string) => string
- }
- export type PluginCreator = (api: PluginAPI) => void
- export type PluginsConfig = (
- | PluginCreator
- | { handler: PluginCreator; config?: Partial<Config> }
- | {
- (options: any): { handler: PluginCreator; config?: Partial<Config> }
- __isOptionsFunction: true
- }
- | string
- | [string, Record<string, any>]
- )[]
- // Top level config related
- interface RequiredConfig {
- content: ContentConfig
- }
- interface OptionalConfig {
- important: Partial<ImportantConfig>
- prefix: Partial<PrefixConfig>
- separator: Partial<SeparatorConfig>
- safelist: Array<SafelistConfig>
- blocklist: Array<BlocklistConfig>
- presets: Array<PresetsConfig>
- future: Partial<FutureConfig>
- experimental: Partial<ExperimentalConfig>
- darkMode: Partial<DarkModeConfig>
- theme: Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig> }>
- corePlugins: Partial<CorePluginsConfig>
- plugins: Partial<PluginsConfig>
- // Custom
- [key: string]: any
- }
- export type Config = RequiredConfig & Partial<OptionalConfig>
|