377 lines
12 KiB
Plaintext
377 lines
12 KiB
Plaintext
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'
|
||
type FutureConfig = Expand<'all' | Partial<Record<FutureConfigValues, boolean>>> | []
|
||
|
||
// Experimental related config
|
||
type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'matchVariant'
|
||
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]
|
||
// Use the `selector` strategy — same as `class` but uses `:where()` for more predicable behavior
|
||
| 'selector'
|
||
// Use the `selector` strategy with a custom selector instead of `.dark`.
|
||
| ['selector', string]
|
||
// Use the `variant` strategy, which allows you to completely customize the selector
|
||
// It takes a string or an array of strings, which are passed directly to `addVariant()`
|
||
| ['variant', string | 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
|
||
}
|
||
)[]
|
||
|
||
// 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>
|