From 78d52ab17b9a0c6550175d2b296968f902c2729f Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 09:13:57 +0800
Subject: [PATCH 01/35] feat(preset-attributify): expose `Preset` config type
 var

---
 packages/preset-attributify/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-attributify/src/index.ts b/packages/preset-attributify/src/index.ts
index 2956df1bdd..bd7c1bbe53 100644
--- a/packages/preset-attributify/src/index.ts
+++ b/packages/preset-attributify/src/index.ts
@@ -11,7 +11,7 @@ export * from './variant'
 export * from './types'
 export * from './jsx'
 
-const preset = (options: AttributifyOptions = {}): Preset => {
+const preset = <T>(options: AttributifyOptions = {}): Preset<T> => {
   options.strict = options.strict ?? false
   options.prefix = options.prefix ?? 'un-'
   options.prefixedOnly = options.prefixedOnly ?? false

From 486d162ca8aff27194edff80d181cf339aac23b9 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 09:24:18 +0800
Subject: [PATCH 02/35] feat(preset-icons): expose `Preset` config type var

---
 packages/preset-icons/src/core.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-icons/src/core.ts b/packages/preset-icons/src/core.ts
index d1041e402d..485d841aa5 100644
--- a/packages/preset-icons/src/core.ts
+++ b/packages/preset-icons/src/core.ts
@@ -12,7 +12,7 @@ const COLLECTION_NAME_PARTS_MAX = 3
 export { IconsOptions }
 
 export function createPresetIcons(lookupIconLoader: (options: IconsOptions) => Promise<UniversalIconLoader>) {
-  return function presetIcons(options: IconsOptions = {}): Preset {
+  return function presetIcons<T>(options: IconsOptions = {}): Preset<T> {
     const {
       scale = 1,
       mode = 'auto',

From 24270a9ed300742cd84e0ee426ee715a7330b775 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 09:26:10 +0800
Subject: [PATCH 03/35] feat(preset-rem-to-px): expose `Preset` config type var

---
 packages/preset-rem-to-px/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-rem-to-px/src/index.ts b/packages/preset-rem-to-px/src/index.ts
index c21a5cf571..bc5665c19a 100644
--- a/packages/preset-rem-to-px/src/index.ts
+++ b/packages/preset-rem-to-px/src/index.ts
@@ -10,7 +10,7 @@ export interface RemToPxOptions {
   baseFontSize?: number
 }
 
-export default function remToPxPreset(options: RemToPxOptions = {}): Preset {
+export default function remToPxPreset<T>(options: RemToPxOptions = {}): Preset<T> {
   const {
     baseFontSize = 16,
   } = options

From 2820663517cb725e9d7b181a9f5f731efe5fe0a3 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 09:27:38 +0800
Subject: [PATCH 04/35] feat(preset-tagify): expose `Preset` config type var

---
 packages/preset-tagify/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-tagify/src/index.ts b/packages/preset-tagify/src/index.ts
index 6ce6cd9cd3..a44eac061a 100644
--- a/packages/preset-tagify/src/index.ts
+++ b/packages/preset-tagify/src/index.ts
@@ -8,7 +8,7 @@ export * from './extractor'
 export * from './types'
 export * from './variant'
 
-function tagifyPreset(options: TagifyOptions = {}): Preset {
+function tagifyPreset<T>(options: TagifyOptions = {}): Preset<T> {
   const {
     defaultExtractor = true,
   } = options

From f168cc501373f34b9bd71207299c25b0994f49ff Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:02:59 +0800
Subject: [PATCH 05/35] feat(core): expose `Preset` config type var

---
 packages/core/src/config.ts          | 41 ++++++++-------
 packages/core/src/generator/index.ts | 56 ++++++++++----------
 packages/core/src/types.ts           | 78 ++++++++++++++--------------
 packages/core/src/utils/helpers.ts   |  4 +-
 packages/core/src/utils/object.ts    |  4 +-
 5 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
index cec533db74..a582c76ce0 100644
--- a/packages/core/src/config.ts
+++ b/packages/core/src/config.ts
@@ -3,7 +3,7 @@ import { clone, isStaticRule, mergeDeep, normalizeVariant, toArray, uniq } from
 import { extractorSplit } from './extractors'
 import { DEAFULT_LAYERS } from './constants'
 
-export function resolveShortcuts(shortcuts: UserShortcuts): Shortcut[] {
+export function resolveShortcuts<T>(shortcuts: UserShortcuts<T>): Shortcut<T>[] {
   return toArray(shortcuts).flatMap((s) => {
     if (Array.isArray(s))
       return [s]
@@ -11,14 +11,14 @@ export function resolveShortcuts(shortcuts: UserShortcuts): Shortcut[] {
   })
 }
 
-export function resolvePreset(preset: Preset): Preset {
+export function resolvePreset<T extends { shortcuts?: UserShortcuts<T> }>(preset: Preset<T>): Preset<T> {
   const shortcuts = preset.shortcuts
     ? resolveShortcuts(preset.shortcuts)
     : undefined
-  preset.shortcuts = shortcuts as any
+  preset.shortcuts = shortcuts
 
   if (preset.prefix || preset.layer) {
-    const apply = (i: Rule | Shortcut) => {
+    const apply = (i: Rule<T> | Shortcut<T>) => {
       if (!i[2])
         i[2] = {}
       const meta = i[2]
@@ -34,11 +34,11 @@ export function resolvePreset(preset: Preset): Preset {
   return preset
 }
 
-export function resolveConfig(
-  userConfig: UserConfig = {},
-  defaults: UserConfigDefaults = {},
-): ResolvedConfig {
-  const config = Object.assign({}, defaults, userConfig) as UserConfigDefaults
+export function resolveConfig<T>(
+  userConfig: UserConfig<T> = {},
+  defaults: UserConfigDefaults<T> = {},
+): ResolvedConfig<T> {
+  const config: UserConfigDefaults<T> = Object.assign({}, defaults, userConfig)
   const rawPresets = (config.presets || []).flatMap(toArray).map(resolvePreset)
 
   const sortedPresets = [
@@ -49,7 +49,7 @@ export function resolveConfig(
 
   const layers = Object.assign(DEAFULT_LAYERS, ...rawPresets.map(i => i.layers), userConfig.layers)
 
-  function mergePresets<T extends 'rules' | 'variants' | 'extractors' | 'shortcuts' | 'preflights' | 'preprocess' | 'postprocess' | 'extendTheme' | 'safelist'>(key: T): Required<UserConfig>[T] {
+  function mergePresets<Theme, T extends 'rules' | 'variants' | 'extractors' | 'shortcuts' | 'preflights' | 'preprocess' | 'postprocess' | 'extendTheme' | 'safelist'>(key: T): Required<UserConfig<Theme>>[T] {
     return uniq([
       ...sortedPresets.flatMap(p => toArray(p[key] || []) as any[]),
       ...toArray(config[key] || []) as any[],
@@ -61,8 +61,8 @@ export function resolveConfig(
     extractors.push(extractorSplit)
   extractors.sort((a, b) => (a.order || 0) - (b.order || 0))
 
-  const rules = mergePresets('rules')
-  const rulesStaticMap: ResolvedConfig['rulesStaticMap'] = {}
+  const rules = mergePresets<T, 'rules'>('rules')
+  const rulesStaticMap: ResolvedConfig<T>['rulesStaticMap'] = {}
 
   const rulesSize = rules.length
 
@@ -76,10 +76,11 @@ export function resolveConfig(
     }
   })
 
-  const theme = clone([
-    ...sortedPresets.map(p => p.theme || {}),
-    config.theme || {},
-  ].reduce((a, p) => mergeDeep(a, p), {}))
+  // HACK What if theme is not an object?
+  const theme = clone<T>([
+    ...sortedPresets.map(p => p.theme || {} as T),
+    config.theme || {} as T,
+  ].reduce<T>((a, p) => mergeDeep<T>(a, p), {} as T))
 
   ;(mergePresets('extendTheme') as ThemeExtender<any>[]).forEach(extendTheme => extendTheme(theme))
 
@@ -101,14 +102,14 @@ export function resolveConfig(
     layers,
     theme,
     rulesSize,
-    rulesDynamic: rules as ResolvedConfig['rulesDynamic'],
+    rulesDynamic: rules as ResolvedConfig<T>['rulesDynamic'],
     rulesStaticMap,
     preprocess: mergePresets('preprocess') as Preprocessor[],
     postprocess: mergePresets('postprocess') as Postprocessor[],
-    preflights: mergePresets('preflights'),
+    preflights: mergePresets<T, 'preflights'>('preflights'),
     autocomplete,
-    variants: mergePresets('variants').map(normalizeVariant),
-    shortcuts: resolveShortcuts(mergePresets('shortcuts')),
+    variants: mergePresets<T, 'variants'>('variants').map(normalizeVariant),
+    shortcuts: resolveShortcuts(mergePresets<T, 'shortcuts'>('shortcuts')),
     extractors,
     safelist: mergePresets('safelist'),
   }
diff --git a/packages/core/src/generator/index.ts b/packages/core/src/generator/index.ts
index 74643e7a6c..ec94fa228c 100644
--- a/packages/core/src/generator/index.ts
+++ b/packages/core/src/generator/index.ts
@@ -5,25 +5,25 @@ import { CONTROL_SHORTCUT_NO_MERGE, TwoKeyMap, e, entriesToCss, expandVariantGro
 import { version } from '../../package.json'
 import { LAYER_DEFAULT, LAYER_PREFLIGHTS } from '../constants'
 
-export class UnoGenerator {
+export class UnoGenerator<T> {
   public version = version
-  private _cache = new Map<string, StringifiedUtil[] | null>()
-  public config: ResolvedConfig
+  private _cache = new Map<string, StringifiedUtil<T>[] | null>()
+  public config: ResolvedConfig<T>
   public blocked = new Set<string>()
   public parentOrders = new Map<string, number>()
   public events = createNanoEvents<{
-    config: (config: ResolvedConfig) => void
+    config: (config: ResolvedConfig<T>) => void
   }>()
 
   constructor(
-    public userConfig: UserConfig = {},
-    public defaults: UserConfigDefaults = {},
+    public userConfig: UserConfig<T> = {},
+    public defaults: UserConfigDefaults<T> = {},
   ) {
     this.config = resolveConfig(userConfig, defaults)
     this.events.emit('config', this.config)
   }
 
-  setConfig(userConfig?: UserConfig, defaults?: UserConfigDefaults) {
+  setConfig(userConfig?: UserConfig<T>, defaults?: UserConfigDefaults<T>) {
     if (!userConfig)
       return
     if (defaults)
@@ -51,8 +51,8 @@ export class UnoGenerator {
     return set
   }
 
-  makeContext(raw: string, applied: VariantMatchedResult) {
-    const context: RuleContext = {
+  makeContext(raw: string, applied: VariantMatchedResult<T>) {
+    const context: RuleContext<T> = {
       rawSelector: raw,
       currentSelector: applied[1],
       theme: this.config.theme,
@@ -147,7 +147,7 @@ export class UnoGenerator {
 
     const layerSet = new Set<string>([LAYER_DEFAULT])
     const matched = new Set<string>()
-    const sheet = new Map<string, StringifiedUtil[]>()
+    const sheet = new Map<string, StringifiedUtil<T>[]>()
     let preflightsMap: Record<string, string> = {}
 
     const tokenPromises = Array.from(tokens).map(async (raw) => {
@@ -175,7 +175,7 @@ export class UnoGenerator {
       if (!preflights)
         return
 
-      const preflightContext: PreflightContext = {
+      const preflightContext: PreflightContext<T> = {
         generator: this,
         theme: this.config.theme,
       }
@@ -302,14 +302,14 @@ export class UnoGenerator {
     }
   }
 
-  matchVariants(raw: string, current?: string): VariantMatchedResult {
+  matchVariants(raw: string, current?: string): VariantMatchedResult<T> {
     // process variants
-    const variants = new Set<Variant>()
+    const variants = new Set<Variant<T>>()
     const handlers: VariantHandler[] = []
     let processed = current || raw
     let applied = false
 
-    const context: VariantContext = {
+    const context: VariantContext<T> = {
       rawSelector: raw,
       theme: this.config.theme,
       generator: this,
@@ -392,7 +392,7 @@ export class UnoGenerator {
     return obj
   }
 
-  constructCustomCSS(context: Readonly<RuleContext>, body: CSSObject | CSSEntries, overrideSelector?: string) {
+  constructCustomCSS(context: Readonly<RuleContext<T>>, body: CSSObject | CSSEntries, overrideSelector?: string) {
     const normalizedBody = normalizeCSSEntries(body)
     if (isString(normalizedBody))
       return normalizedBody
@@ -404,13 +404,13 @@ export class UnoGenerator {
     return cssBody
   }
 
-  async parseUtil(input: string | VariantMatchedResult, context: RuleContext, internal = false): Promise<(ParsedUtil | RawUtil)[] | undefined> {
+  async parseUtil(input: string | VariantMatchedResult<T>, context: RuleContext<T>, internal = false): Promise<(ParsedUtil | RawUtil)[] | undefined> {
     const [raw, processed, variantHandlers] = isString(input)
       ? this.matchVariants(input)
       : input
 
     const recordRule = this.config.details
-      ? (r: Rule) => {
+      ? (r: Rule<T>) => {
           context.rules = context.rules ?? []
           context.rules.push(r)
         }
@@ -474,7 +474,7 @@ export class UnoGenerator {
     }
   }
 
-  stringifyUtil(parsed?: ParsedUtil | RawUtil, context?: RuleContext): StringifiedUtil | undefined {
+  stringifyUtil<T>(parsed?: ParsedUtil | RawUtil, context?: RuleContext<T>): StringifiedUtil<T> | undefined {
     if (!parsed)
       return
     if (isRawUtil(parsed))
@@ -495,12 +495,12 @@ export class UnoGenerator {
     return [parsed[0], selector, body, parent, ruleMeta, this.config.details ? context : undefined]
   }
 
-  expandShortcut(input: string, context: RuleContext, depth = 5): [ShortcutValue[], RuleMeta | undefined] | undefined {
+  expandShortcut(input: string, context: RuleContext<T>, depth = 5): [ShortcutValue[], RuleMeta | undefined] | undefined {
     if (depth === 0)
       return
 
     const recordShortcut = this.config.details
-      ? (s: Shortcut) => {
+      ? (s: Shortcut<T>) => {
           context.shortcuts = context.shortcuts ?? []
           context.shortcuts.push(s)
         }
@@ -558,11 +558,11 @@ export class UnoGenerator {
   }
 
   async stringifyShortcuts(
-    parent: VariantMatchedResult,
-    context: RuleContext,
+    parent: VariantMatchedResult<T>,
+    context: RuleContext<T>,
     expanded: ShortcutValue[],
     meta: RuleMeta = { layer: this.config.shortcutsLayer },
-  ): Promise<StringifiedUtil[] | undefined> {
+  ): Promise<StringifiedUtil<T>[] | undefined> {
     const selectorMap = new TwoKeyMap<string, string | undefined, [[CSSEntries, boolean, number][], number]>()
     const parsed = (
       await Promise.all(uniq(expanded)
@@ -582,7 +582,7 @@ export class UnoGenerator {
       .sort((a, b) => a[0] - b[0])
 
     const [raw, , parentVariants] = parent
-    const rawStringfieldUtil: StringifiedUtil[] = []
+    const rawStringfieldUtil: StringifiedUtil<T>[] = []
     for (const item of parsed) {
       if (isRawUtil(item)) {
         rawStringfieldUtil.push([item[0], undefined, item[1], undefined, item[2], context])
@@ -597,10 +597,10 @@ export class UnoGenerator {
     }
     return rawStringfieldUtil.concat(selectorMap
       .map(([e, index], selector, joinedParents) => {
-        const stringify = (flatten: boolean, noMerge: boolean, entrySortPair: [CSSEntries, number][]): (StringifiedUtil | undefined)[] => {
+        const stringify = (flatten: boolean, noMerge: boolean, entrySortPair: [CSSEntries, number][]): (StringifiedUtil<T> | undefined)[] => {
           const maxSort = Math.max(...entrySortPair.map(e => e[1]))
           const entriesList = entrySortPair.map(e => e[0])
-          return (flatten ? [entriesList.flat(1)] : entriesList).map((entries: CSSEntries): StringifiedUtil | undefined => {
+          return (flatten ? [entriesList.flat(1)] : entriesList).map((entries: CSSEntries): StringifiedUtil<T> | undefined => {
             const body = entriesToCss(entries)
             if (body)
               return [index, selector, body, joinedParents, { ...meta, noMerge, sort: maxSort }, context]
@@ -619,7 +619,7 @@ export class UnoGenerator {
         ])
       })
       .flat(2)
-      .filter(Boolean) as StringifiedUtil[])
+      .filter(Boolean) as StringifiedUtil<T>[])
   }
 
   isBlocked(raw: string) {
@@ -627,7 +627,7 @@ export class UnoGenerator {
   }
 }
 
-export function createGenerator(config?: UserConfig, defaults?: UserConfigDefaults) {
+export function createGenerator<T>(config?: UserConfig<T>, defaults?: UserConfigDefaults<T>) {
   return new UnoGenerator(config, defaults)
 }
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index db282577c0..37a1c7bb07 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -51,7 +51,7 @@ export interface ParsedColorValue {
 
 export type PresetOptions = Record<string, any>
 
-export interface RuleContext<Theme extends {} = {}> {
+export interface RuleContext<T extends {} = {}> {
   /**
    * Unprocessed selector from user input.
    * Useful for generating CSS rule.
@@ -64,11 +64,11 @@ export interface RuleContext<Theme extends {} = {}> {
   /**
    * UnoCSS generator instance
    */
-  generator: UnoGenerator
+  generator: UnoGenerator<T>
   /**
    * The theme object
    */
-  theme: Theme
+  theme: T
   /**
    * Matched variants handlers for this rule.
    */
@@ -76,7 +76,7 @@ export interface RuleContext<Theme extends {} = {}> {
   /**
    * The result of variant matching.
    */
-  variantMatch: VariantMatchedResult
+  variantMatch: VariantMatchedResult<T>
   /**
    * Constrcut a custom CSS rule.
    * Variants and selector escaping will be handled automatically.
@@ -85,18 +85,18 @@ export interface RuleContext<Theme extends {} = {}> {
   /**
    * Available only when `details` option is enabled.
    */
-  rules?: Rule[]
+  rules?: Rule<T>[]
   /**
    * Available only when `details` option is enabled.
    */
-  shortcuts?: Shortcut[]
+  shortcuts?: Shortcut<T>[]
   /**
    * Available only when `details` option is enabled.
    */
-  variants?: Variant[]
+  variants?: Variant<T>[]
 }
 
-export interface VariantContext<Theme extends {} = {}> {
+export interface VariantContext<T extends {} = {}> {
   /**
    * Unprocessed selector from user input.
    */
@@ -104,11 +104,11 @@ export interface VariantContext<Theme extends {} = {}> {
   /**
    * UnoCSS generator instance
    */
-  generator: UnoGenerator
+  generator: UnoGenerator<T>
   /**
    * The theme object
    */
-  theme: Theme
+  theme: T
 }
 
 export interface ExtractorContext {
@@ -117,15 +117,15 @@ export interface ExtractorContext {
   id?: string
 }
 
-export interface PreflightContext<Theme extends {} = {}> {
+export interface PreflightContext<T> {
   /**
    * UnoCSS generator instance
    */
-  generator: UnoGenerator
+  generator: UnoGenerator<T>
   /**
    * The theme object
    */
-  theme: Theme
+  theme: T
 }
 
 export interface Extractor {
@@ -290,29 +290,29 @@ export interface VariantObject<Theme extends {} = {}> {
   autocomplete?: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>
 }
 
-export type Variant<Theme extends {} = {}> = VariantFunction<Theme> | VariantObject<Theme>
+export type Variant<T extends {} = {}> = VariantFunction<T> | VariantObject<T>
 
 export type Preprocessor = (matcher: string) => string | undefined
 export type Postprocessor = (util: UtilObject) => void
 export type ThemeExtender<T> = (theme: T) => void
 
-export interface ConfigBase<Theme extends {} = {}> {
+export interface ConfigBase<T extends {} = {}> {
   /**
    * Rules to generate CSS utilities
    */
-  rules?: Rule<Theme>[]
+  rules?: Rule<T>[]
 
   /**
    * Variants that preprocess the selectors,
    * having the ability to rewrite the CSS object.
    */
-  variants?: Variant<Theme>[]
+  variants?: Variant<T>[]
 
   /**
    * Similar to Windi CSS's shortcuts,
    * allows you have create new utilities by combining existing ones.
    */
-  shortcuts?: UserShortcuts<Theme>
+  shortcuts?: UserShortcuts<T>
 
   /**
    * Rules to exclude the selectors for your design system (to narrow down the possibilities).
@@ -334,12 +334,12 @@ export interface ConfigBase<Theme extends {} = {}> {
   /**
    * Raw CSS injections.
    */
-  preflights?: Preflight<Theme>[]
+  preflights?: Preflight<T>[]
 
   /**
    * Theme object for shared configuration between rules
    */
-  theme?: Theme
+  theme?: T
 
   /**
    * Layer orders. Default to 0.
@@ -364,7 +364,7 @@ export interface ConfigBase<Theme extends {} = {}> {
   /**
    * Custom functions to extend the theme object
    */
-  extendTheme?: Arrayable<ThemeExtender<Theme>>
+  extendTheme?: Arrayable<ThemeExtender<T>>
 
   /**
    * Additional options for auto complete
@@ -507,9 +507,9 @@ export interface UserOnlyOptions<Theme extends {} = {}> {
   envMode?: 'dev' | 'build'
 }
 
-export interface UnocssPluginContext<Config extends UserConfig = UserConfig> {
+export interface UnocssPluginContext<T, Config extends UserConfig<T> = UserConfig<T>> {
   ready: Promise<LoadConfigResult<Config>>
-  uno: UnoGenerator
+  uno: UnoGenerator<T>
   /** All tokens scanned */
   tokens: Set<string>
   /** Map for all module's raw content */
@@ -550,7 +550,7 @@ export interface TransformResult {
 
 export type SourceCodeTransformerEnforce = 'pre' | 'post' | 'default'
 
-export interface SourceCodeTransformer {
+export interface SourceCodeTransformer<T> {
   name: string
   /**
    * The order of transformer
@@ -563,13 +563,13 @@ export interface SourceCodeTransformer {
   /**
    * The transform function
    */
-  transform: (code: MagicString, id: string, ctx: UnocssPluginContext) => Awaitable<void>
+  transform: (code: MagicString, id: string, ctx: UnocssPluginContext<T>) => Awaitable<void>
 }
 
 /**
  * For other modules to aggregate the options
  */
-export interface PluginOptions {
+export interface PluginOptions<T> {
   /**
    * Load from configs files
    *
@@ -595,24 +595,24 @@ export interface PluginOptions {
   /**
    * Custom transformers to the source code
    */
-  transformers?: SourceCodeTransformer[]
+  transformers?: SourceCodeTransformer<T>[]
 }
 
-export interface UserConfig<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme>, GeneratorOptions, PluginOptions {}
+export interface UserConfig<T> extends ConfigBase<T>, UserOnlyOptions<T>, GeneratorOptions, PluginOptions<T> {}
 export interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme> {}
 
-export interface ResolvedConfig extends Omit<
-RequiredByKey<UserConfig, 'mergeSelectors' | 'theme' | 'rules' | 'variants' | 'layers' | 'extractors' | 'blocklist' | 'safelist' | 'preflights' | 'sortLayers'>,
+export interface ResolvedConfig<T> extends Omit<
+RequiredByKey<UserConfig<T>, 'mergeSelectors' | 'theme' | 'rules' | 'variants' | 'layers' | 'extractors' | 'blocklist' | 'safelist' | 'preflights' | 'sortLayers'>,
 'rules' | 'shortcuts' | 'autocomplete'
 > {
-  presets: Preset[]
-  shortcuts: Shortcut[]
-  variants: VariantObject[]
+  presets: Preset<T>[]
+  shortcuts: Shortcut<T>[]
+  variants: VariantObject<T>[]
   preprocess: Preprocessor[]
   postprocess: Postprocessor[]
   rulesSize: number
-  rulesDynamic: (DynamicRule | undefined)[]
-  rulesStaticMap: Record<string, [number, CSSObject | CSSEntries, RuleMeta | undefined, Rule] | undefined>
+  rulesDynamic: (DynamicRule<T> | undefined)[]
+  rulesStaticMap: Record<string, [number, CSSObject | CSSEntries, RuleMeta | undefined, Rule<T>] | undefined>
   autocomplete: {
     templates: (AutoCompleteFunction | AutoCompleteTemplate)[]
     extractors: AutoCompleteExtractor[]
@@ -627,11 +627,11 @@ export interface GenerateResult {
   matched: Set<string>
 }
 
-export type VariantMatchedResult = readonly [
+export type VariantMatchedResult<T> = readonly [
   raw: string,
   current: string,
   variantHandlers: VariantHandler[],
-  variants: Set<Variant>,
+  variants: Set<Variant<T>>,
 ]
 
 export type ParsedUtil = readonly [
@@ -648,13 +648,13 @@ export type RawUtil = readonly [
   meta: RuleMeta | undefined,
 ]
 
-export type StringifiedUtil = readonly [
+export type StringifiedUtil<T> = readonly [
   index: number,
   selector: string | undefined,
   body: string,
   parent: string | undefined,
   meta: RuleMeta | undefined,
-  context: RuleContext | undefined,
+  context: RuleContext<T> | undefined,
 ]
 
 export type PreparedRule = readonly [
diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
index 77f6e816bb..93dbcf266e 100644
--- a/packages/core/src/utils/helpers.ts
+++ b/packages/core/src/utils/helpers.ts
@@ -13,13 +13,13 @@ export function isValidSelector(selector = ''): selector is string {
   return validateFilterRE.test(selector)
 }
 
-export function normalizeVariant(variant: Variant): VariantObject {
+export function normalizeVariant<T>(variant: Variant<T>): VariantObject<T> {
   return typeof variant === 'function'
     ? { match: variant }
     : variant
 }
 
-export function isRawUtil(util: ParsedUtil | RawUtil | StringifiedUtil): util is RawUtil {
+export function isRawUtil<T>(util: ParsedUtil | RawUtil | StringifiedUtil<T>): util is RawUtil {
   return util.length === 3
 }
 
diff --git a/packages/core/src/utils/object.ts b/packages/core/src/utils/object.ts
index 8e8886f4bf..23770b2a45 100644
--- a/packages/core/src/utils/object.ts
+++ b/packages/core/src/utils/object.ts
@@ -98,10 +98,10 @@ export function clone<T>(val: T): T {
   return val
 }
 
-export function isStaticRule(rule: Rule): rule is StaticRule {
+export function isStaticRule<T>(rule: Rule<T>): rule is StaticRule {
   return isString(rule[0])
 }
 
-export function isStaticShortcut(sc: Shortcut): sc is StaticShortcut {
+export function isStaticShortcut<T>(sc: Shortcut<T>): sc is StaticShortcut {
   return isString(sc[0])
 }

From 94edfb9d9cff1b0f5c25a88c328da044265242e7 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:09:32 +0800
Subject: [PATCH 06/35] feat(preset-typography): expose `Preset` config type
 var

---
 packages/preset-typography/src/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/preset-typography/src/index.ts b/packages/preset-typography/src/index.ts
index a518d7e144..212ca36b74 100644
--- a/packages/preset-typography/src/index.ts
+++ b/packages/preset-typography/src/index.ts
@@ -49,7 +49,7 @@ export interface TypographyOptions {
  * @returns typography preset
  * @public
  */
-export function presetTypography(options?: TypographyOptions): Preset {
+export function presetTypography<T extends Theme>(options?: TypographyOptions): Preset<T> {
   if (options?.className) {
     console.warn('[unocss:preset-typography] "className" is deprecated. '
     + 'Use "selectorName" instead.')
@@ -78,7 +78,7 @@ export function presetTypography(options?: TypographyOptions): Preset {
       ],
       [
         colorsRE,
-        ([, color], { theme }: RuleContext<Theme>) => {
+        ([, color], { theme }: RuleContext<T>) => {
           const baseColor = theme.colors?.[color]
           if (baseColor == null)
             return

From 3c0f958c5c79e9cd914c0476b4f0c8b32b9040a5 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:20:20 +0800
Subject: [PATCH 07/35] feat(inspector): expose `Preset` config type var

---
 packages/inspector/node/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/inspector/node/index.ts b/packages/inspector/node/index.ts
index 0a728aaf82..9792cb2199 100644
--- a/packages/inspector/node/index.ts
+++ b/packages/inspector/node/index.ts
@@ -10,7 +10,7 @@ const _dirname = typeof __dirname !== 'undefined'
   ? __dirname
   : dirname(fileURLToPath(import.meta.url))
 
-export default function UnocssInspector(ctx: UnocssPluginContext): Plugin {
+export default function UnocssInspector<T>(ctx: UnocssPluginContext<T>): Plugin {
   async function configureServer(server: ViteDevServer) {
     await ctx.ready
 

From 49c43921da7e270cea7575248ee7260d763cd664 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:24:25 +0800
Subject: [PATCH 08/35] feat(config): expose `Preset` config type var

---
 packages/config/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/config/src/index.ts b/packages/config/src/index.ts
index dfcbd3ed67..ae52a03268 100644
--- a/packages/config/src/index.ts
+++ b/packages/config/src/index.ts
@@ -6,7 +6,7 @@ import { createConfigLoader as createLoader } from 'unconfig'
 
 export type { LoadConfigResult, LoadConfigSource }
 
-export async function loadConfig<U extends UserConfig>(
+export async function loadConfig<T, U extends UserConfig<T>>(
   cwd = process.cwd(),
   configOrPath: string | U = cwd,
   extraConfigSources: LoadConfigSource[] = [],

From 2bac171cceed6ca92ee3d9601b871763c4647332 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Tue, 9 Aug 2022 10:24:39 +0800
Subject: [PATCH 09/35] feat(preset-attributify): expose `Preset` config type
 var

---
 packages/preset-attributify/src/index.ts   | 2 +-
 packages/preset-attributify/src/variant.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/preset-attributify/src/index.ts b/packages/preset-attributify/src/index.ts
index bd7c1bbe53..8e1e8affdf 100644
--- a/packages/preset-attributify/src/index.ts
+++ b/packages/preset-attributify/src/index.ts
@@ -19,7 +19,7 @@ const preset = <T>(options: AttributifyOptions = {}): Preset<T> => {
   options.ignoreAttributes = options.ignoreAttributes ?? defaultIgnoreAttributes
 
   const variants = [
-    variantAttributify(options),
+    variantAttributify<T>(options),
   ]
   const extractors = [
     extractorAttributify(options),
diff --git a/packages/preset-attributify/src/variant.ts b/packages/preset-attributify/src/variant.ts
index 00b8d7adb2..36e488ca27 100644
--- a/packages/preset-attributify/src/variant.ts
+++ b/packages/preset-attributify/src/variant.ts
@@ -4,7 +4,7 @@ import type { AttributifyOptions } from './types'
 
 export const variantsRE = /^(?!\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/
 
-export const variantAttributify = (options: AttributifyOptions = {}): VariantObject => {
+export const variantAttributify = <T>(options: AttributifyOptions = {}): VariantObject<T> => {
   const prefix = options.prefix ?? 'un-'
   const prefixedOnly = options.prefixedOnly ?? false
   const trueToNonValued = options.trueToNonValued ?? false

From d7666edef93e195c7f41e1836faa9234541d3ae5 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:21:41 +0800
Subject: [PATCH 10/35] fix(autocomplete): add missing theme type var

---
 packages/autocomplete/src/create.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/autocomplete/src/create.ts b/packages/autocomplete/src/create.ts
index 643658ce64..5bccf7d502 100644
--- a/packages/autocomplete/src/create.ts
+++ b/packages/autocomplete/src/create.ts
@@ -5,7 +5,7 @@ import { parseAutocomplete } from './parse'
 import type { ParsedAutocompleteTemplate, UnocssAutocomplete } from './types'
 import { searchUsageBoundary } from './utils'
 
-export function createAutocomplete(uno: UnoGenerator): UnocssAutocomplete {
+export function createAutocomplete<T>(uno: UnoGenerator<T>): UnocssAutocomplete {
   const templateCache = new Map<string, ParsedAutocompleteTemplate>()
   const cache = new LRU<string, string[]>({ max: 5000 })
 
@@ -147,9 +147,11 @@ export function createAutocomplete(uno: UnoGenerator): UnocssAutocomplete {
     ) || []
   }
 
-  function suggestVariant(input: string, used: Set<Variant>) {
+  function suggestVariant<T>(input: string, used: Set<Variant<T>>) {
     return uno.config.variants
-      .filter(v => v.autocomplete && (v.multiPass || !used.has(v)))
+      .filter(v =>
+        v.autocomplete && (v.multiPass || !used.has(v as unknown as Variant<T>)), // HACK
+      )
       .flatMap(v => toArray(v.autocomplete || []))
       .map(fn =>
         typeof fn === 'function'

From bac6e68f9b7deba73666e8d1137db1e9b8af9f4b Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:22:19 +0800
Subject: [PATCH 11/35] feat(core): do not set theme default type

---
 packages/core/src/types.ts | 42 +++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 37a1c7bb07..7d0467eb1e 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -51,7 +51,7 @@ export interface ParsedColorValue {
 
 export type PresetOptions = Record<string, any>
 
-export interface RuleContext<T extends {} = {}> {
+export interface RuleContext<T> {
   /**
    * Unprocessed selector from user input.
    * Useful for generating CSS rule.
@@ -96,7 +96,7 @@ export interface RuleContext<T extends {} = {}> {
   variants?: Variant<T>[]
 }
 
-export interface VariantContext<T extends {} = {}> {
+export interface VariantContext<T> {
   /**
    * Unprocessed selector from user input.
    */
@@ -172,24 +172,24 @@ export interface RuleMeta {
 export type CSSValue = CSSObject | CSSEntries
 export type CSSValues = CSSValue | CSSValue[]
 
-export type DynamicMatcher<Theme extends {} = {}> = ((match: RegExpMatchArray, context: Readonly<RuleContext<Theme>>) => Awaitable<CSSValue | string | (CSSValue | string)[] | undefined>)
-export type DynamicRule<Theme extends {} = {}> = [RegExp, DynamicMatcher<Theme>] | [RegExp, DynamicMatcher<Theme>, RuleMeta]
+export type DynamicMatcher<T> = ((match: RegExpMatchArray, context: Readonly<RuleContext<T>>) => Awaitable<CSSValue | string | (CSSValue | string)[] | undefined>)
+export type DynamicRule<T> = [RegExp, DynamicMatcher<T>] | [RegExp, DynamicMatcher<T>, RuleMeta]
 export type StaticRule = [string, CSSObject | CSSEntries] | [string, CSSObject | CSSEntries, RuleMeta]
-export type Rule<Theme extends {} = {}> = DynamicRule<Theme> | StaticRule
+export type Rule<T> = DynamicRule<T> | StaticRule
 
-export type DynamicShortcutMatcher<Theme extends {} = {}> = ((match: RegExpMatchArray, context: Readonly<RuleContext<Theme>>) => (string | ShortcutValue[] | undefined))
+export type DynamicShortcutMatcher<T> = ((match: RegExpMatchArray, context: Readonly<RuleContext<T>>) => (string | ShortcutValue[] | undefined))
 
 export type StaticShortcut = [string, string | ShortcutValue[]] | [string, string | ShortcutValue[], RuleMeta]
 export type StaticShortcutMap = Record<string, string | ShortcutValue[]>
-export type DynamicShortcut<Theme extends {} = {}> = [RegExp, DynamicShortcutMatcher<Theme>] | [RegExp, DynamicShortcutMatcher<Theme>, RuleMeta]
-export type UserShortcuts<Theme extends {} = {}> = StaticShortcutMap | (StaticShortcut | DynamicShortcut<Theme> | StaticShortcutMap)[]
-export type Shortcut<Theme extends {} = {}> = StaticShortcut | DynamicShortcut<Theme>
+export type DynamicShortcut<T> = [RegExp, DynamicShortcutMatcher<T>] | [RegExp, DynamicShortcutMatcher<T>, RuleMeta]
+export type UserShortcuts<T> = StaticShortcutMap | (StaticShortcut | DynamicShortcut<T> | StaticShortcutMap)[]
+export type Shortcut<T> = StaticShortcut | DynamicShortcut<T>
 export type ShortcutValue = string | CSSValue
 
 export type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null
 
-export interface Preflight<Theme extends {} = {}> {
-  getCSS: (context: PreflightContext<Theme>) => Promise<string | undefined> | string | undefined
+export interface Preflight<T> {
+  getCSS: (context: PreflightContext<T>) => Promise<string | undefined> | string | undefined
   layer?: string
 }
 
@@ -265,9 +265,9 @@ export interface VariantHandler {
   layer?: string | undefined
 }
 
-export type VariantFunction<Theme extends {} = {}> = (matcher: string, context: Readonly<VariantContext<Theme>>) => string | VariantHandler | undefined
+export type VariantFunction<T> = (matcher: string, context: Readonly<VariantContext<T>>) => string | VariantHandler | undefined
 
-export interface VariantObject<Theme extends {} = {}> {
+export interface VariantObject<T> {
   /**
    * The name of the variant.
    */
@@ -275,7 +275,7 @@ export interface VariantObject<Theme extends {} = {}> {
   /**
    * The entry function to match and rewrite the selector for futher processing.
    */
-  match: VariantFunction<Theme>
+  match: VariantFunction<T>
 
   /**
    * Allows this variant to be used more than once in matching a single rule
@@ -290,13 +290,13 @@ export interface VariantObject<Theme extends {} = {}> {
   autocomplete?: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>
 }
 
-export type Variant<T extends {} = {}> = VariantFunction<T> | VariantObject<T>
+export type Variant<T> = VariantFunction<T> | VariantObject<T>
 
 export type Preprocessor = (matcher: string) => string | undefined
 export type Postprocessor = (util: UtilObject) => void
 export type ThemeExtender<T> = (theme: T) => void
 
-export interface ConfigBase<T extends {} = {}> {
+export interface ConfigBase<T> {
   /**
    * Rules to generate CSS utilities
    */
@@ -448,7 +448,7 @@ export interface AutoCompleteExtractor {
   order?: number
 }
 
-export interface Preset<Theme extends {} = {}> extends ConfigBase<Theme> {
+export interface Preset<T> extends ConfigBase<T> {
   name: string
   enforce?: 'pre' | 'post'
   /**
@@ -481,11 +481,11 @@ export interface GeneratorOptions {
   warn?: boolean
 }
 
-export interface UserOnlyOptions<Theme extends {} = {}> {
+export interface UserOnlyOptions<T> {
   /**
    * The theme object, will be merged with the theme provides by presets
    */
-  theme?: Theme
+  theme?: T
 
   /**
    * Layout name of shortcuts
@@ -497,7 +497,7 @@ export interface UserOnlyOptions<Theme extends {} = {}> {
   /**
    * Presets
    */
-  presets?: (Preset<Theme> | Preset<Theme>[])[]
+  presets?: (Preset<T> | Preset<T>[])[]
 
   /**
    * Environment mode
@@ -599,7 +599,7 @@ export interface PluginOptions<T> {
 }
 
 export interface UserConfig<T> extends ConfigBase<T>, UserOnlyOptions<T>, GeneratorOptions, PluginOptions<T> {}
-export interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme> {}
+export interface UserConfigDefaults<T> extends ConfigBase<T>, UserOnlyOptions<T> {}
 
 export interface ResolvedConfig<T> extends Omit<
 RequiredByKey<UserConfig<T>, 'mergeSelectors' | 'theme' | 'rules' | 'variants' | 'layers' | 'extractors' | 'blocklist' | 'safelist' | 'preflights' | 'sortLayers'>,

From 3405ac584c42ca54b4b93293ae4cc9f4667c656b Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:25:54 +0800
Subject: [PATCH 12/35] fix(cli): use `Theme` from `@unocss/preset-uno`

---
 packages/cli/src/config.ts | 3 ++-
 packages/cli/src/index.ts  | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/cli/src/config.ts b/packages/cli/src/config.ts
index 301112d32f..7d81a3d40b 100644
--- a/packages/cli/src/config.ts
+++ b/packages/cli/src/config.ts
@@ -1,7 +1,8 @@
+import type { Theme } from '@unocss/preset-uno'
 import presetUno from '@unocss/preset-uno'
 import type { UserConfig } from '@unocss/core'
 
-export const defaultConfig: UserConfig = {
+export const defaultConfig: UserConfig<Theme> = {
   envMode: 'build',
   presets: [
     presetUno(),
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index e52214f98d..e72a3f3588 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -4,7 +4,9 @@ import fg from 'fast-glob'
 import consola from 'consola'
 import { cyan, dim, green } from 'colorette'
 import { debounce } from 'perfect-debounce'
+import type { UserConfig } from '@unocss/core'
 import { createGenerator, toArray } from '@unocss/core'
+import type { Theme } from '@unocss/preset-uno'
 import { loadConfig } from '@unocss/config'
 import { version } from '../package.json'
 import { PrettyError, handleError } from './errors'
@@ -28,7 +30,7 @@ export async function build(_options: CliOptions) {
 
   const cwd = _options.cwd || process.cwd()
   const options = await resolveOptions(_options)
-  const { config, sources: configSources } = await loadConfig(cwd, options.config)
+  const { config, sources: configSources } = await loadConfig<Theme, UserConfig<Theme>>(cwd, options.config)
 
   const uno = createGenerator(
     config,
@@ -72,7 +74,7 @@ export async function build(_options: CliOptions) {
 
     watcher.on('all', async (type, file) => {
       if (configSources.includes(file)) {
-        uno.setConfig((await loadConfig()).config)
+        uno.setConfig((await loadConfig<Theme, UserConfig<Theme>>()).config)
         consola.info(`${cyan(basename(file))} changed, setting new config`)
       }
       else {

From 5d31d8ac3af4da9ad3175efe483e6118d95318d0 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:29:33 +0800
Subject: [PATCH 13/35] fix(inspector): add missing theme type var

---
 packages/inspector/client/composables/fetch.ts | 2 +-
 packages/inspector/node/index.ts               | 2 +-
 packages/inspector/types.ts                    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/inspector/client/composables/fetch.ts b/packages/inspector/client/composables/fetch.ts
index 8b9341744d..fd1295a39c 100644
--- a/packages/inspector/client/composables/fetch.ts
+++ b/packages/inspector/client/composables/fetch.ts
@@ -5,7 +5,7 @@ import { onConfigChanged, onModuleUpdated } from './hmr'
 
 const API_ROOT = '/__unocss_api'
 
-export const infoFetch = useFetch(API_ROOT).json<ProjectInfo>()
+export const infoFetch = useFetch(API_ROOT).json<ProjectInfo<unknown>>()
 export const overviewFetch = useFetch(`${API_ROOT}/overview`, { immediate: false }).json<OverviewInfo>()
 
 export const info = infoFetch.data
diff --git a/packages/inspector/node/index.ts b/packages/inspector/node/index.ts
index 9792cb2199..cf4f612a76 100644
--- a/packages/inspector/node/index.ts
+++ b/packages/inspector/node/index.ts
@@ -23,7 +23,7 @@ export default function UnocssInspector<T>(ctx: UnocssPluginContext<T>): Plugin
       if (!req.url)
         return next()
       if (req.url === '/') {
-        const info: ProjectInfo = {
+        const info: ProjectInfo<T> = {
           version: ctx.uno.version,
           // use the resolved config from the dev server
           root: server.config.root,
diff --git a/packages/inspector/types.ts b/packages/inspector/types.ts
index 62d1f1064c..b61524c173 100644
--- a/packages/inspector/types.ts
+++ b/packages/inspector/types.ts
@@ -1,10 +1,10 @@
 import type { GenerateResult, ResolvedConfig } from '@unocss/core'
 
-export interface ProjectInfo {
+export interface ProjectInfo<T> {
   version: string
   root: string
   modules: string[]
-  config: ResolvedConfig
+  config: ResolvedConfig<T>
   configSources?: string[]
 }
 

From 286bb06c57b7028f976fa6d2bcadc518e15fe9b9 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:50:37 +0800
Subject: [PATCH 14/35] fix(preset-mini): type theme everywhere

---
 packages/preset-mini/src/preflights.ts        |  2 +-
 packages/preset-mini/src/rules/align.ts       |  5 +--
 packages/preset-mini/src/rules/behaviors.ts   |  4 +--
 packages/preset-mini/src/rules/border.ts      |  4 +--
 packages/preset-mini/src/rules/color.ts       |  7 +++--
 packages/preset-mini/src/rules/default.ts     |  3 +-
 packages/preset-mini/src/rules/gap.ts         |  2 +-
 packages/preset-mini/src/rules/layout.ts      |  3 +-
 packages/preset-mini/src/rules/position.ts    | 20 ++++++------
 .../preset-mini/src/rules/question-mark.ts    |  3 +-
 packages/preset-mini/src/rules/size.ts        |  2 +-
 packages/preset-mini/src/rules/spacing.ts     |  5 +--
 packages/preset-mini/src/rules/static.ts      | 31 ++++++++++---------
 packages/preset-mini/src/rules/transform.ts   |  2 +-
 packages/preset-mini/src/rules/variables.ts   |  5 +--
 packages/preset-mini/src/utils/utilities.ts   |  6 ++--
 packages/preset-mini/src/utils/variants.ts    |  4 +--
 .../preset-mini/src/variants/combinators.ts   |  5 +--
 packages/preset-mini/src/variants/dark.ts     |  2 +-
 .../preset-mini/src/variants/directions.ts    |  3 +-
 .../preset-mini/src/variants/important.ts     |  3 +-
 packages/preset-mini/src/variants/media.ts    |  4 +--
 packages/preset-mini/src/variants/misc.ts     | 11 ++++---
 packages/preset-mini/src/variants/negative.ts |  3 +-
 packages/preset-mini/src/variants/pseudo.ts   | 11 ++++---
 25 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/packages/preset-mini/src/preflights.ts b/packages/preset-mini/src/preflights.ts
index bb3d12a7e6..a6bd276d6d 100644
--- a/packages/preset-mini/src/preflights.ts
+++ b/packages/preset-mini/src/preflights.ts
@@ -2,7 +2,7 @@ import type { Preflight, PreflightContext } from '@unocss/core'
 import { entriesToCss } from '@unocss/core'
 import type { Theme } from './theme'
 
-export const preflights: Preflight[] = [
+export const preflights: Preflight<Theme>[] = [
   {
     layer: 'preflights',
     getCSS(ctx: PreflightContext<Theme>) {
diff --git a/packages/preset-mini/src/rules/align.ts b/packages/preset-mini/src/rules/align.ts
index 6fba150fc2..b5b0ed5fd1 100644
--- a/packages/preset-mini/src/rules/align.ts
+++ b/packages/preset-mini/src/rules/align.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 import { globalKeywords } from '../utils/mappings'
 
 const verticalAlignAlias: Record<string, string> = {
@@ -16,8 +17,8 @@ const verticalAlignAlias: Record<string, string> = {
   ...Object.fromEntries(globalKeywords.map(x => [x, x])),
 }
 
-export const verticalAligns: Rule[] = [
+export const verticalAligns: Rule<Theme>[] = [
   [/^(?:vertical|align|v)-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `(vertical|align|v)-(${Object.keys(verticalAlignAlias).join('|')})` }],
 ]
 
-export const textAligns: Rule[] = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map(v => [`text-${v}`, { 'text-align': v }])
+export const textAligns: Rule<Theme>[] = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map(v => [`text-${v}`, { 'text-align': v }])
diff --git a/packages/preset-mini/src/rules/behaviors.ts b/packages/preset-mini/src/rules/behaviors.ts
index c28b6e0eca..5045343bcf 100644
--- a/packages/preset-mini/src/rules/behaviors.ts
+++ b/packages/preset-mini/src/rules/behaviors.ts
@@ -18,7 +18,7 @@ export const outline: Rule<Theme>[] = [
   ['outline-none', { 'outline': '2px solid transparent', 'outline-offset': '2px' }],
 ]
 
-export const appearance: Rule[] = [
+export const appearance: Rule<Theme>[] = [
   ['appearance-none', {
     'appearance': 'none',
     '-webkit-appearance': 'none',
@@ -32,6 +32,6 @@ const willChangeProperty = (prop: string): string | undefined => {
   }[prop]
 }
 
-export const willChange: Rule[] = [
+export const willChange: Rule<Theme>[] = [
   [/^will-change-(.+)/, ([, p]) => ({ 'will-change': willChangeProperty(p) })],
 ]
diff --git a/packages/preset-mini/src/rules/border.ts b/packages/preset-mini/src/rules/border.ts
index 5059c43269..332ae80262 100644
--- a/packages/preset-mini/src/rules/border.ts
+++ b/packages/preset-mini/src/rules/border.ts
@@ -4,7 +4,7 @@ import { colorOpacityToString, colorToString, cornerMap, directionMap, globalKey
 
 export const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords]
 
-export const borders: Rule[] = [
+export const borders: Rule<Theme>[] = [
   // compound
   [/^(?:border|b)()(?:-(.+))?$/, handlerBorder, { autocomplete: '(border|b)-<directions>' }],
   [/^(?:border|b)-([xy])(?:-(.+))?$/, handlerBorder],
@@ -84,7 +84,7 @@ const borderColorResolver = (direction: string) => ([, body]: string[], theme: T
   }
 }
 
-function handlerBorder(m: string[], ctx: RuleContext): CSSEntries | undefined {
+function handlerBorder(m: string[], ctx: RuleContext<Theme>): CSSEntries | undefined {
   const borderSizes = handlerBorderSize(m, ctx)
   const borderStyle = handlerBorderStyle(['', m[1], 'solid'])
   if (borderSizes && borderStyle) {
diff --git a/packages/preset-mini/src/rules/color.ts b/packages/preset-mini/src/rules/color.ts
index afa92ff204..6a41c93400 100644
--- a/packages/preset-mini/src/rules/color.ts
+++ b/packages/preset-mini/src/rules/color.ts
@@ -1,25 +1,26 @@
 import type { Rule } from '@unocss/core'
 import { colorResolver, handler as h } from '../utils'
 import { numberWithUnitRE } from '../utils/handlers/regex'
+import type { Theme } from '../theme'
 
 /**
  * @example op10 op-30 opacity-100
  */
-export const opacity: Rule[] = [
+export const opacity: Rule<Theme>[] = [
   [/^op(?:acity)?-?(.+)$/, ([, d]) => ({ opacity: h.bracket.percent.cssvar(d) })],
 ]
 
 /**
  * @example c-red color-red5 text-red-300
  */
-export const textColors: Rule[] = [
+export const textColors: Rule<Theme>[] = [
   [/^(?:color|c)-(.+)$/, colorResolver('color', 'text'), { autocomplete: '(text|color|c)-$colors' }],
   // auto detection and fallback to font-size if the content looks like a size
   [/^text-(.+)$/, colorResolver('color', 'text', css => !css.color?.toString().match(numberWithUnitRE)), { autocomplete: '(text|color|c)-$colors' }],
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-opacity': h.bracket.percent(opacity) }), { autocomplete: '(text|color|c)-(op|opacity)-<percent>' }],
 ]
 
-export const bgColors: Rule[] = [
+export const bgColors: Rule<Theme>[] = [
   [/^bg-(.+)$/, colorResolver('background-color', 'bg'), { autocomplete: 'bg-$colors' }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],
 ]
diff --git a/packages/preset-mini/src/rules/default.ts b/packages/preset-mini/src/rules/default.ts
index 9bfc460269..2ddf25b809 100644
--- a/packages/preset-mini/src/rules/default.ts
+++ b/packages/preset-mini/src/rules/default.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 import { transitions } from './transition'
 import { borders } from './border'
 import { bgColors, opacity, textColors } from './color'
@@ -21,7 +22,7 @@ import { appearance, outline, willChange } from './behaviors'
 import { textDecorations } from './decoration'
 import { svgUtilities } from './svg'
 
-export const rules: Rule[] = [
+export const rules: Rule<Theme>[] = [
   cssVariables,
   cssProperty,
   paddings,
diff --git a/packages/preset-mini/src/rules/gap.ts b/packages/preset-mini/src/rules/gap.ts
index 0ab5073dbd..70a44f90bf 100644
--- a/packages/preset-mini/src/rules/gap.ts
+++ b/packages/preset-mini/src/rules/gap.ts
@@ -18,7 +18,7 @@ const handleGap = ([, d = '', s]: string[], { theme }: RuleContext<Theme>) => {
   }
 }
 
-export const gaps: Rule[] = [
+export const gaps: Rule<Theme>[] = [
   [/^(?:flex-|grid-)?gap-?()(.+)$/, handleGap, { autocomplete: ['gap-$spacing', 'gap-<num>'] }],
   [/^(?:flex-|grid-)?gap-([xy])-?(.+)$/, handleGap, { autocomplete: ['gap-(x|y)-$spacing', 'gap-(x|y)-<num>'] }],
 ]
diff --git a/packages/preset-mini/src/rules/layout.ts b/packages/preset-mini/src/rules/layout.ts
index 010ae2ec15..8dd83fed02 100644
--- a/packages/preset-mini/src/rules/layout.ts
+++ b/packages/preset-mini/src/rules/layout.ts
@@ -1,5 +1,6 @@
 import type { Rule } from '@unocss/core'
 import { globalKeywords } from '../utils'
+import type { Theme } from '../theme'
 
 const overflowValues = [
   'auto',
@@ -10,7 +11,7 @@ const overflowValues = [
   ...globalKeywords,
 ]
 
-export const overflows: Rule[] = [
+export const overflows: Rule<Theme>[] = [
   [/^(?:overflow|of)-(.+)$/, ([, v]) => overflowValues.includes(v) ? { overflow: v } : undefined, { autocomplete: [`(overflow|of)-(${overflowValues.join('|')})`, `(overflow|of)-(x|y)-(${overflowValues.join('|')})`] }],
   [/^(?:overflow|of)-([xy])-(.+)$/, ([, d, v]) => overflowValues.includes(v) ? { [`overflow-${d}`]: v } : undefined],
 ]
diff --git a/packages/preset-mini/src/rules/position.ts b/packages/preset-mini/src/rules/position.ts
index 468805dc43..f01713c98e 100644
--- a/packages/preset-mini/src/rules/position.ts
+++ b/packages/preset-mini/src/rules/position.ts
@@ -2,13 +2,13 @@ import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
 import { globalKeywords, handler as h, insetMap, makeGlobalStaticRules } from '../utils'
 
-export const positions: Rule[] = [
+export const positions: Rule<Theme>[] = [
   [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, ([, v]) => ({ position: v })],
   [/^(?:position-|pos-)([-\w]+)$/, ([, v]) => globalKeywords.includes(v) ? { position: v } : undefined],
   [/^(?:position-|pos-)?(static)$/, ([, v]) => ({ position: v })],
 ]
 
-export const justifies: Rule[] = [
+export const justifies: Rule<Theme>[] = [
   // contents
   ['justify-start', { 'justify-content': 'flex-start' }],
   ['justify-end', { 'justify-content': 'flex-end' }],
@@ -34,14 +34,14 @@ export const justifies: Rule[] = [
   ...makeGlobalStaticRules('justify-self'),
 ]
 
-export const orders: Rule[] = [
+export const orders: Rule<Theme>[] = [
   [/^order-(.+)$/, ([, v]) => ({ order: h.bracket.cssvar.number(v) })],
   ['order-first', { order: '-9999' }],
   ['order-last', { order: '9999' }],
   ['order-none', { order: '0' }],
 ]
 
-export const alignments: Rule[] = [
+export const alignments: Rule<Theme>[] = [
   // contents
   ['content-center', { 'align-content': 'center' }],
   ['content-start', { 'align-content': 'flex-start' }],
@@ -69,7 +69,7 @@ export const alignments: Rule[] = [
   ...makeGlobalStaticRules('self', 'align-self'),
 ]
 
-export const placements: Rule[] = [
+export const placements: Rule<Theme>[] = [
   // contents
   ['place-content-center', { 'place-content': 'center' }],
   ['place-content-start', { 'place-content': 'start' }],
@@ -100,13 +100,13 @@ function handleInsetValue(v: string, { theme }: RuleContext<Theme>): string | nu
   return theme.spacing?.[v] ?? h.bracket.cssvar.global.auto.fraction.rem(v)
 }
 
-function handleInsetValues([, d, v]: string[], ctx: RuleContext): CSSEntries | undefined {
+function handleInsetValues([, d, v]: string[], ctx: RuleContext<Theme>): CSSEntries | undefined {
   const r = handleInsetValue(v, ctx)
   if (r != null && d in insetMap)
     return insetMap[d].map(i => [i.slice(1), r])
 }
 
-export const insets: Rule[] = [
+export const insets: Rule<Theme>[] = [
   [/^(?:position-|pos-)?inset-(.+)$/, ([, v], ctx) => ({ inset: handleInsetValue(v, ctx) }),
     {
       autocomplete: [
@@ -124,7 +124,7 @@ export const insets: Rule[] = [
   [/^(?:position-|pos-)?(top|left|right|bottom)-(.+)$/, ([, d, v], ctx) => ({ [d]: handleInsetValue(v, ctx) })],
 ]
 
-export const floats: Rule[] = [
+export const floats: Rule<Theme>[] = [
   // floats
   ['float-left', { float: 'left' }],
   ['float-right', { float: 'right' }],
@@ -139,12 +139,12 @@ export const floats: Rule[] = [
   ...makeGlobalStaticRules('clear'),
 ]
 
-export const zIndexes: Rule[] = [
+export const zIndexes: Rule<Theme>[] = [
   [/^z([\d.]+)$/, ([, v]) => ({ 'z-index': h.number(v) })],
   [/^z-(.+)$/, ([, v]) => ({ 'z-index': h.bracket.cssvar.global.auto.number(v) }), { autocomplete: 'z-<num>' }],
 ]
 
-export const boxSizing: Rule[] = [
+export const boxSizing: Rule<Theme>[] = [
   ['box-border', { 'box-sizing': 'border-box' }],
   ['box-content', { 'box-sizing': 'content-box' }],
   ...makeGlobalStaticRules('box', 'box-sizing'),
diff --git a/packages/preset-mini/src/rules/question-mark.ts b/packages/preset-mini/src/rules/question-mark.ts
index 9558e256e7..7ce97a1cd7 100644
--- a/packages/preset-mini/src/rules/question-mark.ts
+++ b/packages/preset-mini/src/rules/question-mark.ts
@@ -1,11 +1,12 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 
 /**
  * Used for debugging, only avaliable in development mode.
  *
  * @example `?` / `where`
  */
-export const questionMark: Rule[] = [
+export const questionMark: Rule<Theme>[] = [
   [
     /^(where|\?)$/, (_, { constructCSS, generator }) => {
       if (generator.userConfig.envMode === 'dev')
diff --git a/packages/preset-mini/src/rules/size.ts b/packages/preset-mini/src/rules/size.ts
index bf1de38769..2a95b7826c 100644
--- a/packages/preset-mini/src/rules/size.ts
+++ b/packages/preset-mini/src/rules/size.ts
@@ -66,6 +66,6 @@ function getAspectRatio(prop: string) {
   return h.bracket.cssvar.global.auto.number(prop)
 }
 
-export const aspectRatio: Rule[] = [
+export const aspectRatio: Rule<Theme>[] = [
   [/^aspect-(?:ratio-)?(.+)$/, ([, d]: string[]) => ({ 'aspect-ratio': getAspectRatio(d) }), { autocomplete: ['aspect-(square|video|ratio)', 'aspect-ratio-(square|video)'] }],
 ]
diff --git a/packages/preset-mini/src/rules/spacing.ts b/packages/preset-mini/src/rules/spacing.ts
index 6b1a176d95..a2f3fa7ce5 100644
--- a/packages/preset-mini/src/rules/spacing.ts
+++ b/packages/preset-mini/src/rules/spacing.ts
@@ -1,7 +1,8 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 import { directionSize } from '../utils'
 
-export const paddings: Rule[] = [
+export const paddings: Rule<Theme>[] = [
   [/^pa?()-?(-?.+)$/, directionSize('padding'), { autocomplete: ['(m|p)<num>', '(m|p)-<num>'] }],
   [/^p-?xy()()$/, directionSize('padding'), { autocomplete: '(m|p)-(xy)' }],
   [/^p-?([xy])(?:-?(-?.+))?$/, directionSize('padding')],
@@ -10,7 +11,7 @@ export const paddings: Rule[] = [
   [/^p-?([bi][se])(?:-?(-?.+))?$/, directionSize('padding'), { autocomplete: '(m|p)-(bs|be|is|ie)-<num>' }],
 ]
 
-export const margins: Rule[] = [
+export const margins: Rule<Theme>[] = [
   [/^ma?()-?(-?.+)$/, directionSize('margin')],
   [/^m-?xy()()$/, directionSize('margin')],
   [/^m-?([xy])(?:-?(-?.+))?$/, directionSize('margin')],
diff --git a/packages/preset-mini/src/rules/static.ts b/packages/preset-mini/src/rules/static.ts
index 048d5ed17c..3414c57339 100644
--- a/packages/preset-mini/src/rules/static.ts
+++ b/packages/preset-mini/src/rules/static.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 import { globalKeywords, handler as h, makeGlobalStaticRules } from '../utils'
 
 const cursorValues = ['auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out']
@@ -6,7 +7,7 @@ const cursorValues = ['auto', 'default', 'none', 'context-menu', 'help', 'pointe
 export const varEmpty = ' '
 
 // display table included on table.ts
-export const displays: Rule[] = [
+export const displays: Rule<Theme>[] = [
   ['inline', { display: 'inline' }],
   ['block', { display: 'block' }],
   ['inline-block', { display: 'inline-block' }],
@@ -17,7 +18,7 @@ export const displays: Rule[] = [
   [/^display-(.+)$/, ([, c]) => ({ display: h.bracket.cssvar.global(c) || c })],
 ]
 
-export const appearances: Rule[] = [
+export const appearances: Rule<Theme>[] = [
   ['visible', { visibility: 'visible' }],
   ['invisible', { visibility: 'hidden' }],
   ['backface-visible', { 'backface-visibility': 'visible' }],
@@ -25,18 +26,18 @@ export const appearances: Rule[] = [
   ...makeGlobalStaticRules('backface', 'backface-visibility'),
 ]
 
-export const cursors: Rule[] = [
+export const cursors: Rule<Theme>[] = [
   [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.bracket.cssvar.global(c) })],
-  ...cursorValues.map((v): Rule => [`cursor-${v}`, { cursor: v }]),
+  ...cursorValues.map((v): Rule<Theme> => [`cursor-${v}`, { cursor: v }]),
 ]
 
-export const pointerEvents: Rule[] = [
+export const pointerEvents: Rule<Theme>[] = [
   ['pointer-events-auto', { 'pointer-events': 'auto' }],
   ['pointer-events-none', { 'pointer-events': 'none' }],
   ...makeGlobalStaticRules('pointer-events'),
 ]
 
-export const resizes: Rule[] = [
+export const resizes: Rule<Theme>[] = [
   ['resize-x', { resize: 'horizontal' }],
   ['resize-y', { resize: 'vertical' }],
   ['resize', { resize: 'both' }],
@@ -44,7 +45,7 @@ export const resizes: Rule[] = [
   ...makeGlobalStaticRules('resize'),
 ]
 
-export const userSelects: Rule[] = [
+export const userSelects: Rule<Theme>[] = [
   ['select-auto', { 'user-select': 'auto' }],
   ['select-all', { 'user-select': 'all' }],
   ['select-text', { 'user-select': 'text' }],
@@ -52,7 +53,7 @@ export const userSelects: Rule[] = [
   ...makeGlobalStaticRules('select', 'user-select'),
 ]
 
-export const whitespaces: Rule[] = [
+export const whitespaces: Rule<Theme>[] = [
   [
     /^(?:whitespace-|ws-)([-\w]+)$/,
     ([, v]) => ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', ...globalKeywords].includes(v) ? { 'white-space': v } : undefined,
@@ -60,7 +61,7 @@ export const whitespaces: Rule[] = [
   ],
 ]
 
-export const contentVisibility: Rule[] = [
+export const contentVisibility: Rule<Theme>[] = [
   [/^intrinsic-size-(.+)$/, ([, d]) => ({ 'contain-intrinsic-size': h.bracket.cssvar.global.fraction.rem(d) }), { autocomplete: 'intrinsic-size-<num>' }],
   ['content-visibility-visible', { 'content-visibility': 'visible' }],
   ['content-visibility-hidden', { 'content-visibility': 'hidden' }],
@@ -68,26 +69,26 @@ export const contentVisibility: Rule[] = [
   ...makeGlobalStaticRules('content-visibility'),
 ]
 
-export const contents: Rule[] = [
+export const contents: Rule<Theme>[] = [
   [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
   [/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],
   ['content-empty', { content: '""' }],
   ['content-none', { content: '""' }],
 ]
 
-export const breaks: Rule[] = [
+export const breaks: Rule<Theme>[] = [
   ['break-normal', { 'overflow-wrap': 'normal', 'word-break': 'normal' }],
   ['break-words', { 'overflow-wrap': 'break-word' }],
   ['break-all', { 'word-break': 'break-all' }],
 ]
 
-export const textOverflows: Rule[] = [
+export const textOverflows: Rule<Theme>[] = [
   ['truncate', { 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }],
   ['text-ellipsis', { 'text-overflow': 'ellipsis' }],
   ['text-clip', { 'text-overflow': 'clip' }],
 ]
 
-export const textTransforms: Rule[] = [
+export const textTransforms: Rule<Theme>[] = [
   ['case-upper', { 'text-transform': 'uppercase' }],
   ['case-lower', { 'text-transform': 'lowercase' }],
   ['case-capital', { 'text-transform': 'capitalize' }],
@@ -95,7 +96,7 @@ export const textTransforms: Rule[] = [
   ...makeGlobalStaticRules('case', 'text-transform'),
 ]
 
-export const fontStyles: Rule[] = [
+export const fontStyles: Rule<Theme>[] = [
   ['italic', { 'font-style': 'italic' }],
   ['not-italic', { 'font-style': 'normal' }],
   ['font-italic', { 'font-style': 'italic' }],
@@ -106,7 +107,7 @@ export const fontStyles: Rule[] = [
   ['font-not-oblique', { 'font-style': 'normal' }],
 ]
 
-export const fontSmoothings: Rule[] = [
+export const fontSmoothings: Rule<Theme>[] = [
   ['antialiased', {
     '-webkit-font-smoothing': 'antialiased',
     '-moz-osx-font-smoothing': 'grayscale',
diff --git a/packages/preset-mini/src/rules/transform.ts b/packages/preset-mini/src/rules/transform.ts
index 9bf33ec45b..916afa78bb 100644
--- a/packages/preset-mini/src/rules/transform.ts
+++ b/packages/preset-mini/src/rules/transform.ts
@@ -52,7 +52,7 @@ export const transformBase = {
   '--un-translate-z': 0,
 }
 
-export const transforms: Rule[] = [
+export const transforms: Rule<Theme>[] = [
   // origins
   [/^(?:transform-)?origin-(.+)$/, ([, s]) => ({ 'transform-origin': positionMap[s] ?? h.bracket.cssvar(s) }), { autocomplete: [`transform-origin-(${Object.keys(positionMap).join('|')})`, `origin-(${Object.keys(positionMap).join('|')})`] }],
 
diff --git a/packages/preset-mini/src/rules/variables.ts b/packages/preset-mini/src/rules/variables.ts
index f851bc54af..a23e1f06a3 100644
--- a/packages/preset-mini/src/rules/variables.ts
+++ b/packages/preset-mini/src/rules/variables.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '../theme'
 import { handler as h } from '../utils'
 
 const variablesAbbrMap: Record<string, string> = {
@@ -17,7 +18,7 @@ const variablesAbbrMap: Record<string, string> = {
   ws: 'white-space',
 }
 
-export const cssVariables: Rule[] = [
+export const cssVariables: Rule<Theme>[] = [
   [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name]
     if (prop)
@@ -25,6 +26,6 @@ export const cssVariables: Rule[] = [
   }],
 ]
 
-export const cssProperty: Rule[] = [
+export const cssProperty: Rule<Theme>[] = [
   [/^\[([\w_-]+):([^'"]+)\]$/, ([, prop, value]) => ({ [prop]: h.bracket(`[${value}]`) })],
 ]
diff --git a/packages/preset-mini/src/utils/utilities.ts b/packages/preset-mini/src/utils/utilities.ts
index 375cdb00ce..22ca562b2f 100644
--- a/packages/preset-mini/src/utils/utilities.ts
+++ b/packages/preset-mini/src/utils/utilities.ts
@@ -13,7 +13,7 @@ export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
  * @param {string} propertyPrefix - Property for the css value to be created. Postfix will be appended according to direction matched.
  * @see {@link directionMap}
  */
-export function directionSize(propertyPrefix: string): DynamicMatcher {
+export function directionSize(propertyPrefix: string): DynamicMatcher<Theme> {
   return ([_, direction, size]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined => {
     const v = theme.spacing?.[size || 'DEFAULT'] ?? h.bracket.cssvar.global.auto.fraction.rem(size)
     if (v != null)
@@ -152,7 +152,7 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef
  * @param {string} varName - Base name for the opacity variable.
  * @return {@link DynamicMatcher} object.
  */
-export function colorResolver(property: string, varName: string, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher {
+export function colorResolver(property: string, varName: string, shouldPass?: (css: CSSObject) => boolean): DynamicMatcher<Theme> {
   return ([, body]: string[], { theme }: RuleContext<Theme>): CSSObject | undefined => {
     const data = parseColor(body, theme)
 
@@ -223,7 +223,7 @@ export function resolveVerticalBreakpoints({ theme, generator }: Readonly<Varian
 }
 
 export function makeGlobalStaticRules(prefix: string, property?: string) {
-  return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }] as Rule)
+  return globalKeywords.map<Rule<Theme>>(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }])
 }
 
 export function getComponent(str: string, open: string, close: string, separator: string) {
diff --git a/packages/preset-mini/src/utils/variants.ts b/packages/preset-mini/src/utils/variants.ts
index 11ff9a79d5..660da3a018 100644
--- a/packages/preset-mini/src/utils/variants.ts
+++ b/packages/preset-mini/src/utils/variants.ts
@@ -1,7 +1,7 @@
 import type { VariantHandler, VariantHandlerContext, VariantObject } from '@unocss/core'
 import { escapeRegExp } from '@unocss/core'
 
-export const variantMatcher = (name: string, handler: (input: VariantHandlerContext) => Record<string, any>): VariantObject => {
+export const variantMatcher = <T>(name: string, handler: (input: VariantHandlerContext) => Record<string, any>): VariantObject<T> => {
   const re = new RegExp(`^${escapeRegExp(name)}[:-]`)
   return {
     name,
@@ -21,7 +21,7 @@ export const variantMatcher = (name: string, handler: (input: VariantHandlerCont
   }
 }
 
-export const variantParentMatcher = (name: string, parent: string): VariantObject => {
+export const variantParentMatcher = <T>(name: string, parent: string): VariantObject<T> => {
   const re = new RegExp(`^${escapeRegExp(name)}[:-]`)
   return {
     name,
diff --git a/packages/preset-mini/src/variants/combinators.ts b/packages/preset-mini/src/variants/combinators.ts
index 100ff1d2ac..076a075394 100644
--- a/packages/preset-mini/src/variants/combinators.ts
+++ b/packages/preset-mini/src/variants/combinators.ts
@@ -1,6 +1,7 @@
 import type { Variant, VariantObject } from '@unocss/core'
+import type { Theme } from '../theme'
 
-const scopeMatcher = (strict: boolean, name: string, template: string): VariantObject => {
+const scopeMatcher = <T>(strict: boolean, name: string, template: string): VariantObject<T> => {
   const re = strict
     ? new RegExp(`^${name}(?:-\\[(.+?)\\])[:-]`)
     : new RegExp(`^${name}(?:-\\[(.+?)\\])?[:-]`)
@@ -19,7 +20,7 @@ const scopeMatcher = (strict: boolean, name: string, template: string): VariantO
   }
 }
 
-export const variantCombinators: Variant[] = [
+export const variantCombinators: Variant<Theme>[] = [
   scopeMatcher(false, 'all', '&&-s &&-c'),
   scopeMatcher(false, 'children', '&&-s>&&-c'),
   scopeMatcher(false, 'next', '&&-s+&&-c'),
diff --git a/packages/preset-mini/src/variants/dark.ts b/packages/preset-mini/src/variants/dark.ts
index 6a34d3cf13..1efeae934b 100644
--- a/packages/preset-mini/src/variants/dark.ts
+++ b/packages/preset-mini/src/variants/dark.ts
@@ -2,7 +2,7 @@ import type { Variant } from '@unocss/core'
 import type { PresetMiniOptions } from '..'
 import { variantMatcher, variantParentMatcher } from '../utils'
 
-export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => {
+export const variantColorsMediaOrClass = <T>(options: PresetMiniOptions = {}): Variant<T>[] => {
   if (options?.dark === 'class' || typeof options.dark === 'object') {
     const { dark = '.dark', light = '.light' } = typeof options.dark === 'string'
       ? {}
diff --git a/packages/preset-mini/src/variants/directions.ts b/packages/preset-mini/src/variants/directions.ts
index 1e169a96e0..ff7f70a783 100644
--- a/packages/preset-mini/src/variants/directions.ts
+++ b/packages/preset-mini/src/variants/directions.ts
@@ -1,7 +1,8 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '../theme'
 import { variantMatcher } from '../utils'
 
-export const variantLanguageDirections: Variant[] = [
+export const variantLanguageDirections: Variant<Theme>[] = [
   variantMatcher('rtl', input => ({ prefix: `[dir="rtl"] $$ ${input.prefix}` })),
   variantMatcher('ltr', input => ({ prefix: `[dir="ltr"] $$ ${input.prefix}` })),
 ]
diff --git a/packages/preset-mini/src/variants/important.ts b/packages/preset-mini/src/variants/important.ts
index ae8cfd7f2c..f1c0fd1e78 100644
--- a/packages/preset-mini/src/variants/important.ts
+++ b/packages/preset-mini/src/variants/important.ts
@@ -1,6 +1,7 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '../theme'
 
-export const variantImportant: Variant = {
+export const variantImportant: Variant<Theme> = {
   name: 'important',
   match(matcher) {
     let base: string | undefined
diff --git a/packages/preset-mini/src/variants/media.ts b/packages/preset-mini/src/variants/media.ts
index cab2bcd162..20034bca2f 100644
--- a/packages/preset-mini/src/variants/media.ts
+++ b/packages/preset-mini/src/variants/media.ts
@@ -2,9 +2,9 @@ import type { Variant, VariantContext, VariantObject } from '@unocss/core'
 import type { Theme } from '../theme'
 import { variantParentMatcher } from '../utils'
 
-export const variantPrint: Variant = variantParentMatcher('print', '@media print')
+export const variantPrint: Variant<Theme> = variantParentMatcher('print', '@media print')
 
-export const variantCustomMedia: VariantObject = {
+export const variantCustomMedia: VariantObject<Theme> = {
   name: 'media',
   match(matcher, { theme }: VariantContext<Theme>) {
     const match = matcher.match(/^media-([_\d\w]+)[:-]/)
diff --git a/packages/preset-mini/src/variants/misc.ts b/packages/preset-mini/src/variants/misc.ts
index 4b92332594..7dbd854bb6 100644
--- a/packages/preset-mini/src/variants/misc.ts
+++ b/packages/preset-mini/src/variants/misc.ts
@@ -1,7 +1,8 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '../theme'
 import { getComponent, handler as h } from '../utils'
 
-export const variantSelector: Variant = {
+export const variantSelector: Variant<Theme> = {
   name: 'selector',
   match(matcher) {
     const match = matcher.match(/^selector-\[(.+?)\][:-]/)
@@ -14,7 +15,7 @@ export const variantSelector: Variant = {
   },
 }
 
-export const variantCssLayer: Variant = {
+export const variantCssLayer: Variant<Theme> = {
   name: 'layer',
   match(matcher) {
     const match = matcher.match(/^layer-([_\d\w]+)[:-]/)
@@ -30,7 +31,7 @@ export const variantCssLayer: Variant = {
   },
 }
 
-export const variantInternalLayer: Variant = {
+export const variantInternalLayer: Variant<Theme> = {
   name: 'uno-layer',
   match(matcher) {
     const match = matcher.match(/^uno-layer-([_\d\w]+)[:-]/)
@@ -43,7 +44,7 @@ export const variantInternalLayer: Variant = {
   },
 }
 
-export const variantScope: Variant = {
+export const variantScope: Variant<Theme> = {
   name: 'scope',
   match(matcher) {
     const match = matcher.match(/^scope-([_\d\w]+)[:-]/)
@@ -56,7 +57,7 @@ export const variantScope: Variant = {
   },
 }
 
-export const variantVariables: Variant = {
+export const variantVariables: Variant<Theme> = {
   name: 'variables',
   match(matcher) {
     if (!matcher.startsWith('['))
diff --git a/packages/preset-mini/src/variants/negative.ts b/packages/preset-mini/src/variants/negative.ts
index f29b435229..023e3bede7 100644
--- a/packages/preset-mini/src/variants/negative.ts
+++ b/packages/preset-mini/src/variants/negative.ts
@@ -1,4 +1,5 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '../theme'
 import { CONTROL_MINI_NO_NEGATIVE } from '../utils'
 
 const numberRE = /[0-9.]+(?:[a-z]+|%)?/
@@ -7,7 +8,7 @@ const ignoreProps = [
   /opacity|color|flex/,
 ]
 
-export const variantNegative: Variant = {
+export const variantNegative: Variant<Theme> = {
   name: 'negative',
   match(matcher) {
     if (!matcher.startsWith('-'))
diff --git a/packages/preset-mini/src/variants/pseudo.ts b/packages/preset-mini/src/variants/pseudo.ts
index f9aa7545ad..4b83ae12e1 100644
--- a/packages/preset-mini/src/variants/pseudo.ts
+++ b/packages/preset-mini/src/variants/pseudo.ts
@@ -1,5 +1,6 @@
 import type { VariantObject } from '@unocss/core'
 import { escapeRegExp } from '@unocss/core'
+import type { Theme } from '../theme'
 import type { PresetMiniOptions } from '..'
 
 const PseudoClasses: Record<string, string> = Object.fromEntries([
@@ -81,7 +82,7 @@ const sortValue = (pseudo: string) => {
     return 1
 }
 
-const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject => {
+const taggedPseudoClassMatcher = (tag: string, parent: string, combinator: string): VariantObject<Theme> => {
   const rawRe = new RegExp(`^(${escapeRegExp(parent)}:)(\\S+)${escapeRegExp(combinator)}\\1`)
   const pseudoRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesStr}))[:-]`)
   const pseudoColonRE = new RegExp(`^${tag}-((?:(${PseudoClassFunctionsStr})-)?(${PseudoClassesColonStr}))[:]`)
@@ -111,7 +112,7 @@ const PseudoClassesAndElementsStr = Object.entries(PseudoClasses).map(([key]) =>
 const PseudoClassesAndElementsColonStr = Object.entries(PseudoClassesColon).map(([key]) => key).join('|')
 const PseudoClassesAndElementsRE = new RegExp(`^(${PseudoClassesAndElementsStr})[:-]`)
 const PseudoClassesAndElementsColonRE = new RegExp(`^(${PseudoClassesAndElementsColonStr})[:]`)
-export const variantPseudoClassesAndElements: VariantObject = {
+export const variantPseudoClassesAndElements: VariantObject<Theme> = {
   name: 'pseudo',
   match: (input: string) => {
     const match = input.match(PseudoClassesAndElementsRE) || input.match(PseudoClassesAndElementsColonRE)
@@ -143,7 +144,7 @@ export const variantPseudoClassesAndElements: VariantObject = {
 
 const PseudoClassFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesStr})[:-]`)
 const PseudoClassColonFunctionsRE = new RegExp(`^(${PseudoClassFunctionsStr})-(${PseudoClassesColonStr})[:]`)
-export const variantPseudoClassFunctions: VariantObject = {
+export const variantPseudoClassFunctions: VariantObject<Theme> = {
   match: (input: string) => {
     const match = input.match(PseudoClassFunctionsRE) || input.match(PseudoClassColonFunctionsRE)
     if (match) {
@@ -159,7 +160,7 @@ export const variantPseudoClassFunctions: VariantObject = {
   autocomplete: `(${PseudoClassFunctionsStr})-(${PseudoClassesStr}|${PseudoClassesColonStr}):`,
 }
 
-export const variantTaggedPseudoClasses = (options: PresetMiniOptions = {}): VariantObject[] => {
+export const variantTaggedPseudoClasses = (options: PresetMiniOptions = {}): VariantObject<Theme>[] => {
   const attributify = !!options?.attributifyPseudo
 
   return [
@@ -171,7 +172,7 @@ export const variantTaggedPseudoClasses = (options: PresetMiniOptions = {}): Var
 }
 
 const PartClassesRE = /(part-\[(.+)]:)(.+)/
-export const partClasses: VariantObject = {
+export const partClasses: VariantObject<Theme> = {
   match: (input: string) => {
     const match = input.match(PartClassesRE)
     if (match) {

From ca409159af48f551efee6df61e2564708f59a70f Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:51:21 +0800
Subject: [PATCH 15/35] fix(preset-tagify): add missing theme type var

---
 packages/preset-tagify/src/variant.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-tagify/src/variant.ts b/packages/preset-tagify/src/variant.ts
index 0bf42e1ea4..0fb9270d59 100644
--- a/packages/preset-tagify/src/variant.ts
+++ b/packages/preset-tagify/src/variant.ts
@@ -2,7 +2,7 @@ import type { VariantHandler, VariantObject } from '@unocss/core'
 import type { TagifyOptions } from './types'
 import { MARKER } from './extractor'
 
-export const variantTagify = (options: TagifyOptions): VariantObject => {
+export const variantTagify = <T>(options: TagifyOptions): VariantObject<T> => {
   const { extraProperties } = options
   const prefix = `${MARKER}${options.prefix ?? ''}`
 

From b959aa8a97c0b1f4d5c551ba6b4a1ec724800320 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:52:19 +0800
Subject: [PATCH 16/35] fix(preset-uno): add missing theme type var

---
 packages/preset-uno/src/variants/mix.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/preset-uno/src/variants/mix.ts b/packages/preset-uno/src/variants/mix.ts
index 54a176e17b..76d4354a24 100644
--- a/packages/preset-uno/src/variants/mix.ts
+++ b/packages/preset-uno/src/variants/mix.ts
@@ -1,4 +1,5 @@
 import type { CSSColorValue, Variant } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { colorToString, parseCssColor } from '@unocss/preset-mini/utils'
 
 const mixComponent = (v1: string | number, v2: string | number, w: string | number) => `calc(${v2} + (${v1} - ${v2}) * ${w} / 100)`
@@ -59,7 +60,7 @@ const fns: Record<string, (color: string | CSSColorValue, weight: string | numbe
  * Shading mixes the color with black, Tinting mixes the color with white.
  * @see {@link mixColor}
  */
-export const variantColorMix: Variant = (matcher) => {
+export const variantColorMix: Variant<Theme> = (matcher) => {
   const m = matcher.match(/^mix-(tint|shade|shift)-(-?\d{1,3})[-:]/)
   if (m) {
     return {

From d9a807b0238d4e680f3aaffe318388ed12ee5839 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:02:22 +0800
Subject: [PATCH 17/35] fix(preset-wind): add missing theme type var

---
 packages/preset-wind/src/rules/background.ts  |  6 ++---
 packages/preset-wind/src/rules/behaviors.ts   | 13 ++++++-----
 packages/preset-wind/src/rules/columns.ts     |  3 ++-
 packages/preset-wind/src/rules/default.ts     |  3 ++-
 packages/preset-wind/src/rules/divide.ts      |  4 ++--
 packages/preset-wind/src/rules/filters.ts     |  6 ++---
 packages/preset-wind/src/rules/line-clamp.ts  |  7 +++---
 packages/preset-wind/src/rules/placeholder.ts |  3 ++-
 packages/preset-wind/src/rules/scrolls.ts     |  3 ++-
 packages/preset-wind/src/rules/spacing.ts     |  2 +-
 packages/preset-wind/src/rules/static.ts      | 23 ++++++++++---------
 .../preset-wind/src/rules/touch-actions.ts    |  3 ++-
 packages/preset-wind/src/rules/typography.ts  |  3 ++-
 packages/preset-wind/src/rules/variables.ts   |  3 ++-
 .../preset-wind/src/variants/combinators.ts   |  3 ++-
 packages/preset-wind/src/variants/dark.ts     |  3 ++-
 packages/preset-wind/src/variants/media.ts    |  7 +++---
 packages/preset-wind/src/variants/misc.ts     |  3 ++-
 .../preset-wind/src/variants/placeholder.ts   |  3 ++-
 19 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
index 2e64ebfb37..d817286021 100644
--- a/packages/preset-wind/src/rules/background.ts
+++ b/packages/preset-wind/src/rules/background.ts
@@ -56,7 +56,7 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') =>
 const bgUrlRE = /^\[url\(.+\)\]$/
 const bgLengthRE = /^\[length:.+\]$/
 const bgPositionRE = /^\[position:.+\]$/
-export const backgroundStyles: Rule[] = [
+export const backgroundStyles: Rule<Theme>[] = [
   [/^bg-(.+)$/, ([, d]) => {
     if (bgUrlRE.test(d))
       return { '--un-url': h.bracket(d), 'background-image': 'var(--un-url)' }
@@ -122,10 +122,10 @@ export const backgroundStyles: Rule[] = [
   ['bg-clip-content', { '-webkit-background-clip': 'content-box', 'background-clip': 'content-box' }],
   ['bg-clip-padding', { '-webkit-background-clip': 'padding-box', 'background-clip': 'padding-box' }],
   ['bg-clip-text', { '-webkit-background-clip': 'text', 'background-clip': 'text' }],
-  ...globalKeywords.map(keyword => [`bg-clip-${keyword}`, {
+  ...globalKeywords.map<Rule<Theme>>(keyword => [`bg-clip-${keyword}`, {
     '-webkit-background-clip': keyword,
     'background-clip': keyword,
-  }] as Rule),
+  }]),
 
   // positions
   // skip 1 & 2 letters shortcut
diff --git a/packages/preset-wind/src/rules/behaviors.ts b/packages/preset-wind/src/rules/behaviors.ts
index 345878a1ce..d7b44c7c4d 100644
--- a/packages/preset-wind/src/rules/behaviors.ts
+++ b/packages/preset-wind/src/rules/behaviors.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { colorResolver, handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils'
 
 const listStyles: Record<string, string> = {
@@ -16,7 +17,7 @@ const listStyles: Record<string, string> = {
   'upper-latin': 'upper-latin',
 }
 
-export const listStyle: Rule[] = [
+export const listStyle: Rule<Theme>[] = [
   // base
   [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => {
     const style = listStyles[alias]
@@ -37,17 +38,17 @@ export const listStyle: Rule[] = [
   ...makeGlobalStaticRules('list', 'list-style-type'),
 ]
 
-export const accents: Rule[] = [
+export const accents: Rule<Theme>[] = [
   [/^accent-(.+)$/, colorResolver('accent-color', 'accent'), { autocomplete: 'accent-$colors' }],
   [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ '--un-accent-opacity': h.bracket.percent(d) }), { autocomplete: ['accent-(op|opacity)', 'accent-(op|opacity)-<percent>'] }],
 ]
 
-export const carets: Rule[] = [
+export const carets: Rule<Theme>[] = [
   [/^caret-(.+)$/, colorResolver('caret-color', 'caret'), { autocomplete: 'caret-$colors' }],
   [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ '--un-caret-opacity': h.bracket.percent(d) }), { autocomplete: ['caret-(op|opacity)', 'caret-(op|opacity)-<percent>'] }],
 ]
 
-export const imageRenderings: Rule[] = [
+export const imageRenderings: Rule<Theme>[] = [
   ['image-render-auto', { 'image-rendering': 'auto' }],
   ['image-render-edge', { 'image-rendering': 'crisp-edges' }],
   ['image-render-pixel', [
@@ -59,7 +60,7 @@ export const imageRenderings: Rule[] = [
   ]],
 ]
 
-export const overscrolls: Rule[] = [
+export const overscrolls: Rule<Theme>[] = [
   ['overscroll-auto', { 'overscroll-behavior': 'auto' }],
   ['overscroll-contain', { 'overscroll-behavior': 'contain' }],
   ['overscroll-none', { 'overscroll-behavior': 'none' }],
@@ -74,7 +75,7 @@ export const overscrolls: Rule[] = [
   ...makeGlobalStaticRules('overscroll-y', 'overscroll-behavior-y'),
 ]
 
-export const scrollBehaviors: Rule[] = [
+export const scrollBehaviors: Rule<Theme>[] = [
   ['scroll-auto', { 'scroll-behavior': 'auto' }],
   ['scroll-smooth', { 'scroll-behavior': 'smooth' }],
   ...makeGlobalStaticRules('scroll', 'scroll-behavior'),
diff --git a/packages/preset-wind/src/rules/columns.ts b/packages/preset-wind/src/rules/columns.ts
index 4dad976076..682354f23f 100644
--- a/packages/preset-wind/src/rules/columns.ts
+++ b/packages/preset-wind/src/rules/columns.ts
@@ -1,7 +1,8 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { handler as h, makeGlobalStaticRules } from '@unocss/preset-mini/utils'
 
-export const columns: Rule[] = [
+export const columns: Rule<Theme>[] = [
   [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: 'columns-<num>' }],
 
   // break before
diff --git a/packages/preset-wind/src/rules/default.ts b/packages/preset-wind/src/rules/default.ts
index 56b00e7f2f..011aab68d9 100644
--- a/packages/preset-wind/src/rules/default.ts
+++ b/packages/preset-wind/src/rules/default.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import {
   alignments,
   appearance,
@@ -72,7 +73,7 @@ import { scrolls } from './scrolls'
 import { columns } from './columns'
 import { placeholders } from './placeholder'
 
-export const rules: Rule[] = [
+export const rules: Rule<Theme>[] = [
   miniCssVariables,
   cssVariables,
   cssProperty,
diff --git a/packages/preset-wind/src/rules/divide.ts b/packages/preset-wind/src/rules/divide.ts
index 55e5248966..5618f34ef4 100644
--- a/packages/preset-wind/src/rules/divide.ts
+++ b/packages/preset-wind/src/rules/divide.ts
@@ -3,7 +3,7 @@ import type { Theme } from '@unocss/preset-mini'
 import { borderStyles, handlerBorderStyle } from '@unocss/preset-mini/rules'
 import { colorResolver, directionMap, handler as h } from '@unocss/preset-mini/utils'
 
-export const divides: Rule[] = [
+export const divides: Rule<Theme>[] = [
   // divides
   [/^divide-?([xy])$/, handlerDivide, { autocomplete: ['divide-(x|y|block|inline)', 'divide-(x|y|block|inline)-reverse', 'divide-(x|y|block|inline)-$lineWidth'] }],
   [/^divide-?([xy])-?(-?.+)$/, handlerDivide],
@@ -17,7 +17,7 @@ export const divides: Rule[] = [
   [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-divide-opacity': h.bracket.percent(opacity) }), { autocomplete: ['divide-(op|opacity)', 'divide-(op|opacity)-<percent>'] }],
 
   // styles
-  ...borderStyles.map(style => [`divide-${style}`, { 'border-style': style }] as Rule),
+  ...borderStyles.map<Rule<Theme>>(style => [`divide-${style}`, { 'border-style': style }]),
 ]
 
 function handlerDivide([, d, s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
diff --git a/packages/preset-wind/src/rules/filters.ts b/packages/preset-wind/src/rules/filters.ts
index fe86b263bc..c5532bd93d 100644
--- a/packages/preset-wind/src/rules/filters.ts
+++ b/packages/preset-wind/src/rules/filters.ts
@@ -117,9 +117,9 @@ export const filters: Rule<Theme>[] = [
     'backdrop-filter': 'none',
   }],
 
-  ...globalKeywords.map(keyword => [`filter-${keyword}`, { filter: keyword }] as Rule),
-  ...globalKeywords.map(keyword => [`backdrop-filter-${keyword}`, {
+  ...globalKeywords.map<Rule<Theme>>(keyword => [`filter-${keyword}`, { filter: keyword }]),
+  ...globalKeywords.map<Rule<Theme>>(keyword => [`backdrop-filter-${keyword}`, {
     '-webkit-backdrop-filter': keyword,
     'backdrop-filter': keyword,
-  }] as Rule),
+  }]),
 ]
diff --git a/packages/preset-wind/src/rules/line-clamp.ts b/packages/preset-wind/src/rules/line-clamp.ts
index 7c441f8e64..5fdbdbfc19 100644
--- a/packages/preset-wind/src/rules/line-clamp.ts
+++ b/packages/preset-wind/src/rules/line-clamp.ts
@@ -1,7 +1,8 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { globalKeywords } from '@unocss/preset-mini/utils'
 
-export const lineClamps: Rule[] = [
+export const lineClamps: Rule<Theme>[] = [
   [/^line-clamp-(\d+)$/, ([, v]) => ({
     'overflow': 'hidden',
     'display': '-webkit-box',
@@ -10,8 +11,8 @@ export const lineClamps: Rule[] = [
     'line-clamp': v,
   }), { autocomplete: ['line-clamp', 'line-clamp-<num>'] }],
 
-  ...['none', ...globalKeywords].map(keyword => [`line-clamp-${keyword}`, {
+  ...['none', ...globalKeywords].map<Rule<Theme>>(keyword => [`line-clamp-${keyword}`, {
     '-webkit-line-clamp': keyword,
     'line-clamp': keyword,
-  }] as Rule),
+  }]),
 ]
diff --git a/packages/preset-wind/src/rules/placeholder.ts b/packages/preset-wind/src/rules/placeholder.ts
index 2e5fa2e44b..5061d0ffe9 100644
--- a/packages/preset-wind/src/rules/placeholder.ts
+++ b/packages/preset-wind/src/rules/placeholder.ts
@@ -1,7 +1,8 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { colorResolver, handler as h } from '@unocss/preset-mini/utils'
 
-export const placeholders: Rule[] = [
+export const placeholders: Rule<Theme>[] = [
   // The prefix `$ ` is intentional. This rule is not to be matched directly from user-generated token.
   // See variants/placeholder.
   [/^\$ placeholder-(.+)$/, colorResolver('color', 'placeholder'), { autocomplete: 'placeholder-$colors' }],
diff --git a/packages/preset-wind/src/rules/scrolls.ts b/packages/preset-wind/src/rules/scrolls.ts
index eb3cb04afd..8c50d109cf 100644
--- a/packages/preset-wind/src/rules/scrolls.ts
+++ b/packages/preset-wind/src/rules/scrolls.ts
@@ -1,11 +1,12 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { directionSize } from '@unocss/preset-mini/utils'
 
 export const scrollSnapTypeBase = {
   '--un-scroll-snap-strictness': 'proximity',
 }
 
-export const scrolls: Rule[] = [
+export const scrolls: Rule<Theme>[] = [
   // snap type
   [/^snap-(x|y)$/, ([, d]) => ({
     'scroll-snap-type': `${d} var(--un-scroll-snap-strictness)`,
diff --git a/packages/preset-wind/src/rules/spacing.ts b/packages/preset-wind/src/rules/spacing.ts
index fd042a4602..1a82d563df 100644
--- a/packages/preset-wind/src/rules/spacing.ts
+++ b/packages/preset-wind/src/rules/spacing.ts
@@ -2,7 +2,7 @@ import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '@unocss/preset-mini'
 import { directionMap, handler as h } from '@unocss/preset-mini/utils'
 
-export const spaces: Rule[] = [
+export const spaces: Rule<Theme>[] = [
   [/^space-?([xy])-?(-?.+)$/, handlerSpace, { autocomplete: ['space-(x|y|block|inline)', 'space-(x|y|block|inline)-reverse', 'space-(x|y|block|inline)-$spacing'] }],
   [/^space-?([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })],
   [/^space-(block|inline)-(-?.+)$/, handlerSpace],
diff --git a/packages/preset-wind/src/rules/static.ts b/packages/preset-wind/src/rules/static.ts
index 6d8a97fa34..fa43e2e263 100644
--- a/packages/preset-wind/src/rules/static.ts
+++ b/packages/preset-wind/src/rules/static.ts
@@ -1,7 +1,8 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { globalKeywords, handler as h, makeGlobalStaticRules, positionMap } from '@unocss/preset-mini/utils'
 
-export const textTransforms: Rule[] = [
+export const textTransforms: Rule<Theme>[] = [
   // tailwind compat
   ['uppercase', { 'text-transform': 'uppercase' }],
   ['lowercase', { 'text-transform': 'lowercase' }],
@@ -9,29 +10,29 @@ export const textTransforms: Rule[] = [
   ['normal-case', { 'text-transform': 'none' }],
 ]
 
-export const hyphens: Rule[] = [
-  ...['manual', 'auto', 'none', ...globalKeywords].map(keyword => [`hyphens-${keyword}`, {
+export const hyphens: Rule<Theme>[] = [
+  ...['manual', 'auto', 'none', ...globalKeywords].map<Rule<Theme>>(keyword => [`hyphens-${keyword}`, {
     '-webkit-hyphens': keyword,
     '-ms-hyphens': keyword,
     'hyphens': keyword,
-  }] as Rule),
+  }]),
 ]
 
-export const writingModes: Rule[] = [
+export const writingModes: Rule<Theme>[] = [
   ['write-vertical-right', { 'writing-mode': 'vertical-rl' }],
   ['write-vertical-left', { 'writing-mode': 'vertical-lr' }],
   ['write-normal', { 'writing-mode': 'horizontal-tb' }],
   ...makeGlobalStaticRules('write', 'writing-mode'),
 ]
 
-export const writingOrientations: Rule[] = [
+export const writingOrientations: Rule<Theme>[] = [
   ['write-orient-mixed', { 'text-orientation': 'mixed' }],
   ['write-orient-sideways', { 'text-orientation': 'sideways' }],
   ['write-orient-upright', { 'text-orientation': 'upright' }],
   ...makeGlobalStaticRules('write-orient', 'text-orientation'),
 ]
 
-export const screenReadersAccess: Rule[] = [
+export const screenReadersAccess: Rule<Theme>[] = [
   [
     'sr-only', {
       'position': 'absolute',
@@ -60,13 +61,13 @@ export const screenReadersAccess: Rule[] = [
   ],
 ]
 
-export const isolations: Rule[] = [
+export const isolations: Rule<Theme>[] = [
   ['isolate', { isolation: 'isolate' }],
   ['isolate-auto', { isolation: 'auto' }],
   ['isolation-auto', { isolation: 'auto' }],
 ]
 
-export const objectPositions: Rule[] = [
+export const objectPositions: Rule<Theme>[] = [
   // object fit
   ['object-cover', { 'object-fit': 'cover' }],
   ['object-contain', { 'object-fit': 'contain' }],
@@ -84,7 +85,7 @@ export const objectPositions: Rule[] = [
 
 ]
 
-export const backgroundBlendModes: Rule[] = [
+export const backgroundBlendModes: Rule<Theme>[] = [
   ['bg-blend-multiply', { 'background-blend-mode': 'multiply' }],
   ['bg-blend-screen', { 'background-blend-mode': 'screen' }],
   ['bg-blend-overlay', { 'background-blend-mode': 'overlay' }],
@@ -104,7 +105,7 @@ export const backgroundBlendModes: Rule[] = [
   ...makeGlobalStaticRules('bg-blend', 'background-blend'),
 ]
 
-export const mixBlendModes: Rule[] = [
+export const mixBlendModes: Rule<Theme>[] = [
   ['mix-blend-multiply', { 'mix-blend-mode': 'multiply' }],
   ['mix-blend-screen', { 'mix-blend-mode': 'screen' }],
   ['mix-blend-overlay', { 'mix-blend-mode': 'overlay' }],
diff --git a/packages/preset-wind/src/rules/touch-actions.ts b/packages/preset-wind/src/rules/touch-actions.ts
index 7438f6b75f..c1aee52ed1 100644
--- a/packages/preset-wind/src/rules/touch-actions.ts
+++ b/packages/preset-wind/src/rules/touch-actions.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { varEmpty } from '@unocss/preset-mini/rules'
 import { makeGlobalStaticRules } from '@unocss/preset-mini/utils'
 
@@ -9,7 +10,7 @@ export const touchActionBase = {
 }
 const touchActionProperty = 'var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)'
 
-export const touchActions: Rule[] = [
+export const touchActions: Rule<Theme>[] = [
   [/^touch-pan-(x|left|right)$/, ([, d]) => ({
     '--un-pan-x': `pan-${d}`,
     'touch-action': touchActionProperty,
diff --git a/packages/preset-wind/src/rules/typography.ts b/packages/preset-wind/src/rules/typography.ts
index 28b36bba66..1fad0e33b9 100644
--- a/packages/preset-wind/src/rules/typography.ts
+++ b/packages/preset-wind/src/rules/typography.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { varEmpty } from '@unocss/preset-mini/rules'
 
 export const fontVariantNumericBase = {
@@ -13,7 +14,7 @@ const toEntries = (entry: any) => ({
   'font-variant-numeric': 'var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)',
 })
 
-export const fontVariantNumeric: Rule[] = [
+export const fontVariantNumeric: Rule<Theme>[] = [
   [/^ordinal$/, () => toEntries({ '--un-ordinal': 'ordinal' }), { autocomplete: 'ordinal' }],
   [/^slashed-zero$/, () => toEntries({ '--un-slashed-zero': 'slashed-zero' }), { autocomplete: 'slashed-zero' }],
   [/^lining-nums$/, () => toEntries({ '--un-numeric-figure': 'lining-nums' }), { autocomplete: 'lining-nums' }],
diff --git a/packages/preset-wind/src/rules/variables.ts b/packages/preset-wind/src/rules/variables.ts
index 27d26198d6..11985ad623 100644
--- a/packages/preset-wind/src/rules/variables.ts
+++ b/packages/preset-wind/src/rules/variables.ts
@@ -1,4 +1,5 @@
 import type { Rule } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { handler as h } from '@unocss/preset-mini/utils'
 
 const variablesAbbrMap: Record<string, string> = {
@@ -17,7 +18,7 @@ const variablesAbbrMap: Record<string, string> = {
   'write-orient': 'text-orientation',
 }
 
-export const cssVariables: Rule[] = [
+export const cssVariables: Rule<Theme>[] = [
   [/^(.+?)-(\$.+)$/, ([, name, varname]) => {
     const prop = variablesAbbrMap[name]
     if (prop)
diff --git a/packages/preset-wind/src/variants/combinators.ts b/packages/preset-wind/src/variants/combinators.ts
index 9cc8612799..e42fd35a5b 100644
--- a/packages/preset-wind/src/variants/combinators.ts
+++ b/packages/preset-wind/src/variants/combinators.ts
@@ -1,6 +1,7 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { variantMatcher } from '@unocss/preset-mini/utils'
 
-export const variantCombinators: Variant[] = [
+export const variantCombinators: Variant<Theme>[] = [
   variantMatcher('svg', input => ({ selector: `${input.selector} svg` })),
 ]
diff --git a/packages/preset-wind/src/variants/dark.ts b/packages/preset-wind/src/variants/dark.ts
index af042164e1..28d973b3f7 100644
--- a/packages/preset-wind/src/variants/dark.ts
+++ b/packages/preset-wind/src/variants/dark.ts
@@ -1,7 +1,8 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { variantMatcher, variantParentMatcher } from '@unocss/preset-mini/utils'
 
-export const variantColorsScheme: Variant[] = [
+export const variantColorsScheme: Variant<Theme>[] = [
   variantMatcher('.dark', input => ({ prefix: `.dark $$ ${input.prefix}` })),
   variantMatcher('.light', input => ({ prefix: `.light $$ ${input.prefix}` })),
   variantParentMatcher('@dark', '@media (prefers-color-scheme: dark)'),
diff --git a/packages/preset-wind/src/variants/media.ts b/packages/preset-wind/src/variants/media.ts
index 7d314c86a6..c35d0bd7af 100644
--- a/packages/preset-wind/src/variants/media.ts
+++ b/packages/preset-wind/src/variants/media.ts
@@ -1,17 +1,18 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { variantParentMatcher } from '@unocss/preset-mini/utils'
 
-export const variantContrasts: Variant[] = [
+export const variantContrasts: Variant<Theme>[] = [
   variantParentMatcher('contrast-more', '@media (prefers-contrast: more)'),
   variantParentMatcher('contrast-less', '@media (prefers-contrast: less)'),
 ]
 
-export const variantMotions: Variant[] = [
+export const variantMotions: Variant<Theme>[] = [
   variantParentMatcher('motion-reduce', '@media (prefers-reduced-motion: reduce)'),
   variantParentMatcher('motion-safe', '@media (prefers-reduced-motion: no-preference)'),
 ]
 
-export const variantOrientations: Variant[] = [
+export const variantOrientations: Variant<Theme>[] = [
   variantParentMatcher('landscape', '@media (orientation: landscape)'),
   variantParentMatcher('portrait', '@media (orientation: portrait)'),
 ]
diff --git a/packages/preset-wind/src/variants/misc.ts b/packages/preset-wind/src/variants/misc.ts
index 92120bf2e0..c24b94d8a8 100644
--- a/packages/preset-wind/src/variants/misc.ts
+++ b/packages/preset-wind/src/variants/misc.ts
@@ -1,6 +1,7 @@
 import type { Variant } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 
-export const variantSpaceAndDivide: Variant = (matcher) => {
+export const variantSpaceAndDivide: Variant<Theme> = (matcher) => {
   if (/^space-?([xy])-?(-?.+)$/.test(matcher) || /^divide-/.test(matcher)) {
     return {
       matcher,
diff --git a/packages/preset-wind/src/variants/placeholder.ts b/packages/preset-wind/src/variants/placeholder.ts
index 3e756eae74..c41301f17c 100644
--- a/packages/preset-wind/src/variants/placeholder.ts
+++ b/packages/preset-wind/src/variants/placeholder.ts
@@ -1,7 +1,8 @@
 import type { VariantFunction } from '@unocss/core'
+import type { Theme } from '@unocss/preset-mini'
 import { handler as h, hasParseableColor } from '@unocss/preset-mini/utils'
 
-export const placeholderModifier: VariantFunction = (input: string, { theme }) => {
+export const placeholderModifier: VariantFunction<Theme> = (input: string, { theme }) => {
   const m = input.match(/^(.*)\b(placeholder-)(.+)$/)
   if (m) {
     const [, pre = '', p, body] = m

From 28842247e835b87c4b7b31423c7647f4a511e1a3 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:07:16 +0800
Subject: [PATCH 18/35] fix(runtime): add missing theme type var

---
 packages/runtime/src/cdn/attributify.ts |  3 ++-
 packages/runtime/src/cdn/full.ts        |  3 ++-
 packages/runtime/src/cdn/mini.ts        |  3 ++-
 packages/runtime/src/cdn/uno.ts         |  3 ++-
 packages/runtime/src/index.ts           | 18 +++++++++---------
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/runtime/src/cdn/attributify.ts b/packages/runtime/src/cdn/attributify.ts
index 83a4266e14..36e4e39363 100644
--- a/packages/runtime/src/cdn/attributify.ts
+++ b/packages/runtime/src/cdn/attributify.ts
@@ -1,8 +1,9 @@
+import type { Theme } from '@unocss/preset-uno'
 import presetUno from '@unocss/preset-uno'
 import presetAttributify from '@unocss/preset-attributify'
 import init from '../index'
 
-init({
+init<Theme>({
   defaults: {
     presets: [
       presetUno(),
diff --git a/packages/runtime/src/cdn/full.ts b/packages/runtime/src/cdn/full.ts
index 65b062d6dc..596f0abebb 100644
--- a/packages/runtime/src/cdn/full.ts
+++ b/packages/runtime/src/cdn/full.ts
@@ -1,10 +1,11 @@
 import presetAttributify from '@unocss/preset-attributify'
+import type { Theme } from '@unocss/preset-uno'
 import presetUno from '@unocss/preset-uno'
 import presetTypography from '@unocss/preset-typography'
 import presetTagify from '@unocss/preset-tagify'
 import init from '../index'
 
-init({
+init<Theme>({
   defaults: {
     presets: [
       presetAttributify(),
diff --git a/packages/runtime/src/cdn/mini.ts b/packages/runtime/src/cdn/mini.ts
index 863a23b933..c7ba27852a 100644
--- a/packages/runtime/src/cdn/mini.ts
+++ b/packages/runtime/src/cdn/mini.ts
@@ -1,8 +1,9 @@
+import type { Theme } from '@unocss/preset-mini'
 import presetMini from '@unocss/preset-mini'
 import presetAttributify from '@unocss/preset-attributify'
 import init from '../index'
 
-init({
+init<Theme>({
   defaults: {
     presets: [
       presetMini(),
diff --git a/packages/runtime/src/cdn/uno.ts b/packages/runtime/src/cdn/uno.ts
index cc2cdcc9d0..8f07056017 100644
--- a/packages/runtime/src/cdn/uno.ts
+++ b/packages/runtime/src/cdn/uno.ts
@@ -1,7 +1,8 @@
+import type { Theme } from '@unocss/preset-uno'
 import presetUno from '@unocss/preset-uno'
 import init from '../index'
 
-init({
+init<Theme>({
   defaults: {
     presets: [
       presetUno(),
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
index eda8122e6a..a2b1ba6572 100644
--- a/packages/runtime/src/index.ts
+++ b/packages/runtime/src/index.ts
@@ -2,11 +2,11 @@ import type { UnoGenerator, UserConfig, UserConfigDefaults } from '@unocss/core'
 import { createGenerator } from '@unocss/core'
 import { autoPrefixer, decodeHtml } from './utils'
 
-export interface RuntimeOptions {
+export interface RuntimeOptions<T> {
   /**
    * Default config of UnoCSS
    */
-  defaults?: UserConfigDefaults
+  defaults?: UserConfigDefaults<T>
   /**
    * Enable css property auto prefixer
    * @default false
@@ -15,22 +15,22 @@ export interface RuntimeOptions {
   /**
    * Callback to modify config
    */
-  configResolved?: (config: UserConfig, defaults: UserConfigDefaults) => void
+  configResolved?: (config: UserConfig<T>, defaults: UserConfigDefaults<T>) => void
   /**
    * Callback when the runtime is ready. Returning false will prevent default extraction
    */
-  ready?: (runtime: RuntimeContext) => false | any
+  ready?: (runtime: RuntimeContext<T>) => false | any
 }
 
 export type RuntimeInspectorCallback = (element: Element) => boolean
 
-export interface RuntimeContext {
+export interface RuntimeContext<T> {
   /**
    * The UnoCSS instance.
    *
    * @type {UnoGenerator}
    */
-  uno: UnoGenerator
+  uno: UnoGenerator<T>
 
   /**
    * Run extractor on specified tokens
@@ -74,12 +74,12 @@ export interface RuntimeContext {
 
 declare global {
   interface Window {
-    __unocss?: UserConfig & { runtime?: RuntimeOptions }
-    __unocss_runtime?: RuntimeContext
+    __unocss?: UserConfig<any> & { runtime?: RuntimeOptions<any> }
+    __unocss_runtime?: RuntimeContext<unknown>
   }
 }
 
-export default function init(inlineConfig: RuntimeOptions = {}) {
+export default function init<T>(inlineConfig: RuntimeOptions<T> = {}) {
   if (typeof window == 'undefined') {
     console.warn('@unocss/runtime been used in non-browser environment, skipped.')
     return

From 8c3af65e8d425e67013b6caa6cb35b2f72c4c079 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:13:20 +0800
Subject: [PATCH 19/35] fix(shared-docs): add missing theme type var

---
 packages/shared-docs/package.json         |  3 +++
 packages/shared-docs/src/config.ts        |  2 +-
 packages/shared-docs/src/defaultConfig.ts |  3 ++-
 packages/shared-docs/src/search.ts        | 32 +++++++++++------------
 packages/shared-docs/src/types.ts         |  6 ++---
 pnpm-lock.yaml                            |  3 +++
 6 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/shared-docs/package.json b/packages/shared-docs/package.json
index f832945064..cabaaf900d 100644
--- a/packages/shared-docs/package.json
+++ b/packages/shared-docs/package.json
@@ -8,5 +8,8 @@
     "@vue/reactivity": "^3.2.37",
     "fuse.js": "^6.6.2",
     "prettier": "^2.7.1"
+  },
+  "devDependencies": {
+    "@unocss/preset-uno": "workspace:^0.45.5"
   }
 }
diff --git a/packages/shared-docs/src/config.ts b/packages/shared-docs/src/config.ts
index b7955a2852..3bf95ed56f 100644
--- a/packages/shared-docs/src/config.ts
+++ b/packages/shared-docs/src/config.ts
@@ -13,7 +13,7 @@ export function clearModuleCache() {
   modulesCache.set('unocss', __unocss)
 }
 
-export async function evaluateUserConfig<U = UserConfig>(configStr: string): Promise<U | undefined> {
+export async function evaluateUserConfig<T, U = UserConfig<T>>(configStr: string): Promise<U | undefined> {
   const code = configStr
     .replace(/import\s*(.*?)\s*from\s*(['"])unocss\2/g, 'const $1 = await __import("unocss");')
     .replace(/import\s*(\{[\s\S]*?\})\s*from\s*(['"])([\w-@/]+)\2/g, 'const $1 = await __import("$3");')
diff --git a/packages/shared-docs/src/defaultConfig.ts b/packages/shared-docs/src/defaultConfig.ts
index aaf5a2e861..a1dda631f1 100644
--- a/packages/shared-docs/src/defaultConfig.ts
+++ b/packages/shared-docs/src/defaultConfig.ts
@@ -1,3 +1,4 @@
+import type { Theme } from '@unocss/preset-mini'
 import {
   defineConfig,
   presetAttributify,
@@ -5,7 +6,7 @@ import {
   presetUno,
 } from 'unocss'
 
-export default defineConfig({
+export default defineConfig<Theme>({
   rules: [
     ['custom-rule', { color: 'red' }]
   ],
diff --git a/packages/shared-docs/src/search.ts b/packages/shared-docs/src/search.ts
index 42c6779c31..18b6531ceb 100644
--- a/packages/shared-docs/src/search.ts
+++ b/packages/shared-docs/src/search.ts
@@ -8,23 +8,23 @@ import { computed, reactive, toRaw } from 'vue'
 import type { DocItem, GuideItem, ResultItem, RuleItem } from './types'
 import { extractColors, formatCSS, sampleArray } from './utils'
 
-export interface SearchState {
-  uno: UnoGenerator
+export interface SearchState<T> {
+  uno: UnoGenerator<T>
   docs: Ref<DocItem[]>
   guides: GuideItem[]
   limit?: number
 }
 
-export function createSearch(
-  { uno, docs, guides, limit = 50 }: SearchState,
+export function createSearch<T>(
+  { uno, docs, guides, limit = 50 }: SearchState<T>,
 ) {
   const ac = createAutocomplete(uno)
-  const matchedMap = reactive(new Map<string, RuleItem>())
-  const featuresMap = reactive(new Map<string, Set<RuleItem>>())
+  const matchedMap = reactive(new Map<string, RuleItem<T>>())
+  const featuresMap = reactive(new Map<string, Set<RuleItem<T>>>())
 
-  let fuseCollection: ResultItem[] = []
+  let fuseCollection: ResultItem<T>[] = []
 
-  const fuse = new Fuse<ResultItem>(
+  const fuse = new Fuse<ResultItem<T>>(
     fuseCollection,
     {
       keys: [
@@ -50,8 +50,8 @@ export function createSearch(
       includeScore: true,
     },
   )
-  const docsFuse = computed(() => new Fuse<ResultItem>(docs.value, { keys: ['title', 'summary'], isCaseSensitive: false }))
-  const guideFuse = new Fuse<ResultItem>(guides, { keys: ['title'], isCaseSensitive: false })
+  const docsFuse = computed(() => new Fuse<ResultItem<T>>(docs.value, { keys: ['title', 'summary'], isCaseSensitive: false }))
+  const guideFuse = new Fuse<ResultItem<T>>(guides, { keys: ['title'], isCaseSensitive: false })
 
   const az09 = Array.from('abcdefghijklmnopqrstuvwxyz01234567890')
 
@@ -140,7 +140,7 @@ export function createSearch(
     return matched
   }
 
-  const _generatePromiseMap = new Map<string, Promise<RuleItem | undefined>>()
+  const _generatePromiseMap = new Map<string, Promise<RuleItem<T> | undefined>>()
   async function _generateFor(input: string) {
     if (matchedMap.has(input))
       return matchedMap.get(input)
@@ -189,14 +189,14 @@ export function createSearch(
     return _generatePromiseMap.get(input)
   }
 
-  function getPresetOfRule(rule?: Rule) {
+  function getPresetOfRule(rule?: Rule<T>) {
     if (!rule)
       return
     const r = toRaw(rule)
     return uno.config.presets?.flat().find(i => i.rules?.find(i => i === r || i === rule))
   }
 
-  function getPresetOfVariant(variant?: Variant) {
+  function getPresetOfVariant(variant?: Variant<T>) {
     if (!variant)
       return
     const v = toRaw(variant)
@@ -221,17 +221,17 @@ export function createSearch(
     return [...(featuresMap.get(name) || [])]
   }
 
-  function getAliasOf(item: RuleItem) {
+  function getAliasOf(item: RuleItem<T>) {
     return [...matchedMap.values()].filter(i => i.body === item.body && i.class !== item.class)
   }
 
-  function getItemId(item: ResultItem) {
+  function getItemId(item: ResultItem<T>) {
     if (item.type !== 'rule')
       return `${item.type}:${item.title}`
     return item.class
   }
 
-  function getSameRules(item: RuleItem) {
+  function getSameRules(item: RuleItem<T>) {
     if (!item.context?.rules?.length)
       return []
     const raw = toRaw(item)
diff --git a/packages/shared-docs/src/types.ts b/packages/shared-docs/src/types.ts
index 6c9c8eced9..bc9c7d1daf 100644
--- a/packages/shared-docs/src/types.ts
+++ b/packages/shared-docs/src/types.ts
@@ -8,12 +8,12 @@ export interface DocItem {
   summary?: string
 }
 
-export interface RuleItem {
+export interface RuleItem<T> {
   type: 'rule'
   class: string
   css?: string
   body?: string
-  context?: RuleContext
+  context?: RuleContext<T>
   colors?: string[]
   features?: string[]
   layers?: string[]
@@ -29,4 +29,4 @@ export interface GuideItem {
   component: () => Promise<{ default: Component }>
 }
 
-export type ResultItem = DocItem | RuleItem | GuideItem
+export type ResultItem<T> = DocItem | RuleItem<T> | GuideItem
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b90357e812..59ea595431 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -442,6 +442,7 @@ importers:
     specifiers:
       '@unocss/autocomplete': workspace:*
       '@unocss/core': workspace:*
+      '@unocss/preset-uno': workspace:^0.45.5
       '@vue/reactivity': ^3.2.37
       fuse.js: ^6.6.2
       prettier: ^2.7.1
@@ -451,6 +452,8 @@ importers:
       '@vue/reactivity': 3.2.37
       fuse.js: 6.6.2
       prettier: 2.7.1
+    devDependencies:
+      '@unocss/preset-uno': link:../preset-uno
 
   packages/shared-integration:
     specifiers:

From 5ef8101d0a3084c195421e9f69472a929a46a9cb Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:19:37 +0800
Subject: [PATCH 20/35] fix(shared-integration): add missing theme type var

---
 packages/shared-integration/src/context.ts      | 8 ++++----
 packages/shared-integration/src/transformers.ts | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/shared-integration/src/context.ts b/packages/shared-integration/src/context.ts
index fdc2b3948f..d192f4f302 100644
--- a/packages/shared-integration/src/context.ts
+++ b/packages/shared-integration/src/context.ts
@@ -6,12 +6,12 @@ import { BetterMap, createGenerator } from '@unocss/core'
 import { CSS_PLACEHOLDER, IGNORE_COMMENT, INCLUDE_COMMENT } from './constants'
 import { defaultExclude, defaultInclude } from './defaults'
 
-export function createContext<Config extends UserConfig<any> = UserConfig<any>>(
+export function createContext<T, Config extends UserConfig<T> = UserConfig<T>>(
   configOrPath?: Config | string,
-  defaults: UserConfigDefaults = {},
+  defaults: UserConfigDefaults<T> = {},
   extraConfigSources: LoadConfigSource[] = [],
   resolveConfigResult: (config: LoadConfigResult<Config>) => void = () => {},
-): UnocssPluginContext<Config> {
+): UnocssPluginContext<T> {
   let root = process.cwd()
   let rawConfig = {} as Config
   const uno = createGenerator(rawConfig, defaults)
@@ -27,7 +27,7 @@ export function createContext<Config extends UserConfig<any> = UserConfig<any>>(
   let ready = reloadConfig()
 
   async function reloadConfig() {
-    const result = await loadConfig(root, configOrPath, extraConfigSources)
+    const result = await loadConfig<T, Config>(root, configOrPath, extraConfigSources)
     resolveConfigResult(result)
 
     rawConfig = result.config
diff --git a/packages/shared-integration/src/transformers.ts b/packages/shared-integration/src/transformers.ts
index 8be944f88b..be60b9c012 100644
--- a/packages/shared-integration/src/transformers.ts
+++ b/packages/shared-integration/src/transformers.ts
@@ -5,8 +5,8 @@ import remapping from '@ampproject/remapping'
 import type { SourceMap } from 'rollup'
 import { IGNORE_COMMENT } from './constants'
 
-export async function applyTransformers(
-  ctx: UnocssPluginContext,
+export async function applyTransformers<T>(
+  ctx: UnocssPluginContext<T>,
   original: string,
   id: string,
   enforce: SourceCodeTransformerEnforce = 'default',

From e028b5d5f13081655869951b28e42dec03a7a59a Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:20:44 +0800
Subject: [PATCH 21/35] fix(transformer-attributify-jsx): add missing theme
 type var

---
 packages/transformer-attributify-jsx/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
index 59ea69df27..e20d104a63 100644
--- a/packages/transformer-attributify-jsx/src/index.ts
+++ b/packages/transformer-attributify-jsx/src/index.ts
@@ -40,7 +40,7 @@ export interface TransformerAttributifyJsxOptions {
 const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs
 const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
 
-export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
+export default function transformerAttributifyJsx<T>(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer<T> {
   const {
     blocklist = [],
   } = options

From 93adc20f7850f274d20725c854f642a95cf679ba Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:22:58 +0800
Subject: [PATCH 22/35] fix(transformer-compile-class): add missing theme type
 var

---
 packages/transformer-compile-class/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/transformer-compile-class/src/index.ts b/packages/transformer-compile-class/src/index.ts
index 682a5f1fa0..e9b0db61ab 100644
--- a/packages/transformer-compile-class/src/index.ts
+++ b/packages/transformer-compile-class/src/index.ts
@@ -32,7 +32,7 @@ export interface CompileClassOptions {
   layer?: string
 }
 
-export default function transformerCompileClass(options: CompileClassOptions = {}): SourceCodeTransformer {
+export default function transformerCompileClass<T>(options: CompileClassOptions = {}): SourceCodeTransformer<T> {
   const {
     trigger = ':uno:',
     classPrefix = 'uno-',

From 3086dd13e1bc675ac23e5f553a116615d4e35a8f Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:24:00 +0800
Subject: [PATCH 23/35] fix(transformer-directives): add missing theme type var

---
 packages/transformer-directives/src/index.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/transformer-directives/src/index.ts b/packages/transformer-directives/src/index.ts
index 3431ed1a83..aba0586371 100644
--- a/packages/transformer-directives/src/index.ts
+++ b/packages/transformer-directives/src/index.ts
@@ -6,8 +6,8 @@ import type MagicString from 'magic-string'
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] }
 
-export interface TransformerDirectivesOptions {
-  enforce?: SourceCodeTransformer['enforce']
+export interface TransformerDirectivesOptions<T> {
+  enforce?: SourceCodeTransformer<T>['enforce']
   /**
    * Treat CSS variables as directives for CSS syntax compatible.
    *
@@ -25,7 +25,7 @@ export interface TransformerDirectivesOptions {
   throwOnMissing?: boolean
 }
 
-export default function transformerDirectives(options: TransformerDirectivesOptions = {}): SourceCodeTransformer {
+export default function transformerDirectives<T>(options: TransformerDirectivesOptions<T> = {}): SourceCodeTransformer<T> {
   return {
     name: 'css-directive',
     enforce: options?.enforce,
@@ -38,10 +38,10 @@ export default function transformerDirectives(options: TransformerDirectivesOpti
 
 const themeFnRE = /theme\((.*?)\)/g
 
-export async function transformDirectives(
+export async function transformDirectives<T>(
   code: MagicString,
-  uno: UnoGenerator,
-  options: TransformerDirectivesOptions,
+  uno: UnoGenerator<T>,
+  options: TransformerDirectivesOptions<T>,
   filename?: string,
   originalCode?: string,
   offset?: number,
@@ -100,9 +100,9 @@ export async function transformDirectives(
           target[2] += item[2]
         else
         // use spread operator to prevent reassign to uno internal cache
-          acc.push([...item] as Writeable<StringifiedUtil>)
+          acc.push([...item] as Writeable<StringifiedUtil<T>>)
         return acc
-      }, [] as Writeable<StringifiedUtil>[])
+      }, [] as Writeable<StringifiedUtil<T>>[])
 
     if (!utils.length)
       return

From 97f3fef91fb39d86b3df471ab44bdde5fd571a41 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:24:35 +0800
Subject: [PATCH 24/35] fix(transformer-variant-group): add missing theme type
 var

---
 packages/transformer-variant-group/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/transformer-variant-group/src/index.ts b/packages/transformer-variant-group/src/index.ts
index 84c3927e91..1f95ddc90a 100644
--- a/packages/transformer-variant-group/src/index.ts
+++ b/packages/transformer-variant-group/src/index.ts
@@ -19,7 +19,7 @@ export interface TransformerVariantGroupOptions {
   separators?: (':' | '-')[]
 }
 
-export default function transformerVariantGroup(options: TransformerVariantGroupOptions = {}): SourceCodeTransformer {
+export default function transformerVariantGroup<T>(options: TransformerVariantGroupOptions = {}): SourceCodeTransformer<T> {
   return {
     name: 'variant-group',
     enforce: 'pre',

From a1b78d80666ff0dbda466bd32bbb65416f1c04dd Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:25:22 +0800
Subject: [PATCH 25/35] feat(unocss): relax restriction on theme type var

---
 packages/unocss/src/vite.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/unocss/src/vite.ts b/packages/unocss/src/vite.ts
index 894ef80da7..8f585cb18d 100644
--- a/packages/unocss/src/vite.ts
+++ b/packages/unocss/src/vite.ts
@@ -5,8 +5,8 @@ import type { Plugin } from 'vite'
 
 export * from '@unocss/vite'
 
-export default function UnocssVitePlugin<Theme extends {}>(
-  configOrPath?: VitePluginConfig<Theme> | string,
+export default function UnocssVitePlugin<T>(
+  configOrPath?: VitePluginConfig<T> | string,
 ): Plugin[] {
   return VitePlugin(
     configOrPath,

From 75ec591b4f68e7570842ebcaa188b154e1ded9b4 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:29:52 +0800
Subject: [PATCH 26/35] fix(vite): add missing theme type var

---
 packages/vite/src/config-hmr.ts          | 2 +-
 packages/vite/src/devtool.ts             | 2 +-
 packages/vite/src/index.ts               | 8 ++++----
 packages/vite/src/modes/chunk-build.ts   | 2 +-
 packages/vite/src/modes/global/build.ts  | 2 +-
 packages/vite/src/modes/global/dev.ts    | 2 +-
 packages/vite/src/modes/global/index.ts  | 2 +-
 packages/vite/src/modes/per-module.ts    | 2 +-
 packages/vite/src/modes/shadow-dom.ts    | 2 +-
 packages/vite/src/modes/svelte-scoped.ts | 2 +-
 packages/vite/src/modes/vue-scoped.ts    | 2 +-
 packages/vite/src/transformers.ts        | 2 +-
 packages/vite/src/types.ts               | 2 +-
 13 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/vite/src/config-hmr.ts b/packages/vite/src/config-hmr.ts
index 5a69f07893..87bbeebdb3 100644
--- a/packages/vite/src/config-hmr.ts
+++ b/packages/vite/src/config-hmr.ts
@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
 
-export function ConfigHMRPlugin(ctx: UnocssPluginContext): Plugin | undefined {
+export function ConfigHMRPlugin<T>(ctx: UnocssPluginContext<T>): Plugin | undefined {
   const { ready, uno } = ctx
   return {
     name: 'unocss:config',
diff --git a/packages/vite/src/devtool.ts b/packages/vite/src/devtool.ts
index 9d09083c69..bd69e202e9 100644
--- a/packages/vite/src/devtool.ts
+++ b/packages/vite/src/devtool.ts
@@ -39,7 +39,7 @@ function getBodyJson(req: IncomingMessage) {
   })
 }
 
-export function createDevtoolsPlugin(ctx: UnocssPluginContext): Plugin[] {
+export function createDevtoolsPlugin<T>(ctx: UnocssPluginContext<T>): Plugin[] {
   let config: ResolvedConfig
   let server: ViteDevServer | undefined
   let clientCode = ''
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index 2e25eb4c87..b49fb8db88 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -24,11 +24,11 @@ export function defineConfig<Theme extends {}>(config: VitePluginConfig<Theme>)
   return config
 }
 
-export default function UnocssPlugin<Theme extends {}>(
-  configOrPath?: VitePluginConfig<Theme> | string,
-  defaults: UserConfigDefaults = {},
+export default function UnocssPlugin<T>(
+  configOrPath?: VitePluginConfig<T> | string,
+  defaults: UserConfigDefaults<VitePluginConfig<T>> = {},
 ): Plugin[] {
-  const ctx = createContext<VitePluginConfig>(configOrPath as any, defaults)
+  const ctx = createContext<VitePluginConfig<T>>(configOrPath as any, defaults)
   const inlineConfig = (configOrPath && typeof configOrPath !== 'string') ? configOrPath : {}
   const mode = inlineConfig.mode ?? 'global'
 
diff --git a/packages/vite/src/modes/chunk-build.ts b/packages/vite/src/modes/chunk-build.ts
index 3240a73bc2..f9dc32f0ea 100644
--- a/packages/vite/src/modes/chunk-build.ts
+++ b/packages/vite/src/modes/chunk-build.ts
@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
 
-export function ChunkModeBuildPlugin({ uno, filter }: UnocssPluginContext): Plugin {
+export function ChunkModeBuildPlugin<T>({ uno, filter }: UnocssPluginContext<T>): Plugin {
   let cssPlugin: Plugin | undefined
 
   const files: Record<string, string> = {}
diff --git a/packages/vite/src/modes/global/build.ts b/packages/vite/src/modes/global/build.ts
index 5d022f4598..1f5fe93e1d 100644
--- a/packages/vite/src/modes/global/build.ts
+++ b/packages/vite/src/modes/global/build.ts
@@ -14,7 +14,7 @@ import {
 } from '../../integration'
 import type { VitePluginConfig } from '../../types'
 
-export function GlobalModeBuildPlugin({ uno, ready, extract, tokens, filter, getConfig }: UnocssPluginContext<VitePluginConfig>): Plugin[] {
+export function GlobalModeBuildPlugin<T>({ uno, ready, extract, tokens, filter, getConfig }: UnocssPluginContext<T, VitePluginConfig<T>>): Plugin[] {
   const vfsLayers = new Set<string>()
   const layerImporterMap = new Map<string, string>()
   let tasks: Promise<any>[] = []
diff --git a/packages/vite/src/modes/global/dev.ts b/packages/vite/src/modes/global/dev.ts
index 296818dc8f..025265edbd 100644
--- a/packages/vite/src/modes/global/dev.ts
+++ b/packages/vite/src/modes/global/dev.ts
@@ -7,7 +7,7 @@ const WARN_TIMEOUT = 20000
 const WS_EVENT_PREFIX = 'unocss:hmr'
 const HASH_LENGTH = 6
 
-export function GlobalModeDevPlugin({ uno, tokens, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext): Plugin[] {
+export function GlobalModeDevPlugin<T>({ uno, tokens, affectedModules, onInvalidate, extract, filter }: UnocssPluginContext<T>): Plugin[] {
   const servers: ViteDevServer[] = []
   let base = ''
 
diff --git a/packages/vite/src/modes/global/index.ts b/packages/vite/src/modes/global/index.ts
index 88b81bb7e6..11c31eab28 100644
--- a/packages/vite/src/modes/global/index.ts
+++ b/packages/vite/src/modes/global/index.ts
@@ -5,7 +5,7 @@ import { GlobalModeDevPlugin } from './dev'
 export * from './dev'
 export * from './build'
 
-export function GlobalModePlugin(ctx: UnocssPluginContext) {
+export function GlobalModePlugin<T>(ctx: UnocssPluginContext<T>) {
   return [
     ...GlobalModeBuildPlugin(ctx),
     ...GlobalModeDevPlugin(ctx),
diff --git a/packages/vite/src/modes/per-module.ts b/packages/vite/src/modes/per-module.ts
index f349de1140..6d00b198bb 100644
--- a/packages/vite/src/modes/per-module.ts
+++ b/packages/vite/src/modes/per-module.ts
@@ -5,7 +5,7 @@ import { getHash } from '../integration'
 const VIRTUAL_PREFIX = '/@unocss/'
 const SCOPE_IMPORT_RE = / from (['"])(@unocss\/scope)\1/
 
-export function PerModuleModePlugin({ uno, filter }: UnocssPluginContext): Plugin[] {
+export function PerModuleModePlugin<T>({ uno, filter }: UnocssPluginContext<T>): Plugin[] {
   const moduleMap = new Map<string, [string, string]>()
   let server: ViteDevServer | undefined
 
diff --git a/packages/vite/src/modes/shadow-dom.ts b/packages/vite/src/modes/shadow-dom.ts
index e0f8c72056..629f6be065 100644
--- a/packages/vite/src/modes/shadow-dom.ts
+++ b/packages/vite/src/modes/shadow-dom.ts
@@ -2,7 +2,7 @@ import type { Plugin } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
 import { CSS_PLACEHOLDER } from '../integration'
 
-export function ShadowDomModuleModePlugin({ uno }: UnocssPluginContext): Plugin {
+export function ShadowDomModuleModePlugin<T>({ uno }: UnocssPluginContext<T>): Plugin {
   const partExtractorRegex = /^part-\[(.+)]:/
   const nameRegexp = /<([^\s^!>]+)\s*([^>]*)>/
   interface PartData {
diff --git a/packages/vite/src/modes/svelte-scoped.ts b/packages/vite/src/modes/svelte-scoped.ts
index e1dab57ef4..089e380077 100644
--- a/packages/vite/src/modes/svelte-scoped.ts
+++ b/packages/vite/src/modes/svelte-scoped.ts
@@ -3,7 +3,7 @@ import { createFilter } from '@rollup/pluginutils'
 import type { UnocssPluginContext } from '@unocss/core'
 import { defaultExclude } from '../integration'
 
-export function SvelteScopedPlugin({ uno, ready }: UnocssPluginContext): Plugin {
+export function SvelteScopedPlugin<T>({ uno, ready }: UnocssPluginContext<T>): Plugin {
   let filter = createFilter([/\.svelte$/], defaultExclude)
 
   async function transformSFC(code: string) {
diff --git a/packages/vite/src/modes/vue-scoped.ts b/packages/vite/src/modes/vue-scoped.ts
index d84fc05184..07c1bea4b3 100644
--- a/packages/vite/src/modes/vue-scoped.ts
+++ b/packages/vite/src/modes/vue-scoped.ts
@@ -3,7 +3,7 @@ import { createFilter } from '@rollup/pluginutils'
 import type { UnocssPluginContext } from '@unocss/core'
 import { defaultExclude } from '../integration'
 
-export function VueScopedPlugin({ uno, ready }: UnocssPluginContext): Plugin {
+export function VueScopedPlugin<T>({ uno, ready }: UnocssPluginContext<T>): Plugin {
   let filter = createFilter([/\.vue$/], defaultExclude)
 
   async function transformSFC(code: string) {
diff --git a/packages/vite/src/transformers.ts b/packages/vite/src/transformers.ts
index 789897e26a..6e88956114 100644
--- a/packages/vite/src/transformers.ts
+++ b/packages/vite/src/transformers.ts
@@ -2,7 +2,7 @@ import type { Plugin } from 'vite'
 import type { UnocssPluginContext } from '@unocss/core'
 import { applyTransformers } from '../../shared-integration/src/transformers'
 
-export function createTransformerPlugins(ctx: UnocssPluginContext): Plugin[] {
+export function createTransformerPlugins<T>(ctx: UnocssPluginContext<T>): Plugin[] {
   const enforces = ['default', 'pre', 'post'] as const
   return enforces.map((enforce): Plugin => ({
     name: `unocss:transformers:${enforce}`,
diff --git a/packages/vite/src/types.ts b/packages/vite/src/types.ts
index b03f733881..6afcaa5c7f 100644
--- a/packages/vite/src/types.ts
+++ b/packages/vite/src/types.ts
@@ -1,6 +1,6 @@
 import type { UserConfig } from '@unocss/core'
 
-export interface VitePluginConfig<Theme extends {} = {}> extends UserConfig<Theme> {
+export interface VitePluginConfig<T> extends UserConfig<T> {
   /**
    * Enable UnoCSS inspector
    *

From 78ad72ac7d747c2038609c972f19a491718b544f Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 14:57:43 +0800
Subject: [PATCH 27/35] fix(shared-integration): misplaced type var

---
 packages/shared-integration/src/context.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared-integration/src/context.ts b/packages/shared-integration/src/context.ts
index d192f4f302..88805e4275 100644
--- a/packages/shared-integration/src/context.ts
+++ b/packages/shared-integration/src/context.ts
@@ -11,7 +11,7 @@ export function createContext<T, Config extends UserConfig<T> = UserConfig<T>>(
   defaults: UserConfigDefaults<T> = {},
   extraConfigSources: LoadConfigSource[] = [],
   resolveConfigResult: (config: LoadConfigResult<Config>) => void = () => {},
-): UnocssPluginContext<T> {
+): UnocssPluginContext<T, Config> {
   let root = process.cwd()
   let rawConfig = {} as Config
   const uno = createGenerator(rawConfig, defaults)

From ca78a601c9c64eee754a8d62b1d94bd623c8ed55 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:05:15 +0800
Subject: [PATCH 28/35] fix(vscode): add missing theme type var

the nuxt part has not been touched yet
---
 packages/vscode/src/autocomplete.ts  | 15 ++++++++-------
 packages/vscode/src/contextLoader.ts | 17 +++++++++--------
 packages/vscode/src/utils.ts         |  6 +++---
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/vscode/src/autocomplete.ts b/packages/vscode/src/autocomplete.ts
index 64c8cdac8b..926b987b82 100644
--- a/packages/vscode/src/autocomplete.ts
+++ b/packages/vscode/src/autocomplete.ts
@@ -1,5 +1,6 @@
 import type { UnocssAutocomplete } from '@unocss/autocomplete'
 import { createAutocomplete } from '@unocss/autocomplete'
+import type { Theme } from '@unocss/preset-uno'
 import type { CompletionItemProvider, ExtensionContext } from 'vscode'
 import { CompletionItem, CompletionItemKind, CompletionList, MarkdownString, Range, languages } from 'vscode'
 import type { UnoGenerator, UnocssPluginContext } from '@unocss/core'
@@ -27,10 +28,10 @@ const languageIds = [
 ]
 const delimiters = ['-', ':']
 
-class UnoCompletionItem extends CompletionItem {
-  uno: UnoGenerator
+class UnoCompletionItem<T> extends CompletionItem {
+  uno: UnoGenerator<T>
 
-  constructor(label: string, kind: CompletionItemKind, uno: UnoGenerator) {
+  constructor(label: string, kind: CompletionItemKind, uno: UnoGenerator<T>) {
     super(label, kind)
     this.uno = uno
   }
@@ -41,7 +42,7 @@ export async function registerAutoComplete(
   contextLoader: ContextLoader,
   ext: ExtensionContext,
 ) {
-  const autoCompletes = new Map<UnocssPluginContext, UnocssAutocomplete>()
+  const autoCompletes = new Map<UnocssPluginContext<Theme>, UnocssAutocomplete>()
   contextLoader.events.on('contextReload', (ctx) => {
     autoCompletes.delete(ctx)
   })
@@ -49,7 +50,7 @@ export async function registerAutoComplete(
     autoCompletes.delete(ctx)
   })
 
-  function getAutocomplete(ctx: UnocssPluginContext) {
+  function getAutocomplete(ctx: UnocssPluginContext<Theme>) {
     const cached = autoCompletes.get(ctx)
     if (cached)
       return cached
@@ -60,11 +61,11 @@ export async function registerAutoComplete(
     return autocomplete
   }
 
-  async function getMarkdown(uno: UnoGenerator, util: string) {
+  async function getMarkdown(uno: UnoGenerator<Theme>, util: string) {
     return new MarkdownString(await getPrettiedMarkdown(uno, util))
   }
 
-  const provider: CompletionItemProvider<UnoCompletionItem> = {
+  const provider: CompletionItemProvider<UnoCompletionItem<Theme>> = {
     async provideCompletionItems(doc, position) {
       const id = doc.uri.fsPath
       if (!isSubdir(cwd, id))
diff --git a/packages/vscode/src/contextLoader.ts b/packages/vscode/src/contextLoader.ts
index 83e599be72..6b2f93ceb3 100644
--- a/packages/vscode/src/contextLoader.ts
+++ b/packages/vscode/src/contextLoader.ts
@@ -4,6 +4,7 @@ import fs from 'fs'
 import type { UnocssPluginContext, UserConfig, UserConfigDefaults } from '@unocss/core'
 import { notNull } from '@unocss/core'
 import { sourceObjectFields, sourcePluginFactory } from 'unconfig/presets'
+import type { Theme } from '@unocss/preset-uno'
 import presetUno from '@unocss/preset-uno'
 import { resolveOptions as resolveNuxtOptions } from '../../nuxt/src/options'
 import { createNanoEvents } from '../../core/src/utils/events'
@@ -14,25 +15,25 @@ import { log } from './log'
 export class ContextLoader {
   public cwd: string
   public ready: Promise<void>
-  public defaultContext: UnocssPluginContext<UserConfig<any>>
-  public contextsMap = new Map<string, UnocssPluginContext<UserConfig<any>> | null>()
+  public defaultContext: UnocssPluginContext<Theme, UserConfig<Theme>>
+  public contextsMap = new Map<string, UnocssPluginContext<Theme, UserConfig<Theme>> | null>()
 
-  private fileContextCache = new Map<string, UnocssPluginContext<UserConfig<any>> | null>()
+  private fileContextCache = new Map<string, UnocssPluginContext<Theme, UserConfig<Theme>> | null>()
   private configExistsCache = new Map<string, boolean>()
-  private defaultUnocssConfig: UserConfigDefaults = {
+  private defaultUnocssConfig: UserConfigDefaults<Theme> = {
     presets: [presetUno()],
   }
 
   public events = createNanoEvents<{
     reload: () => void
-    contextLoaded: (context: UnocssPluginContext<UserConfig<any>>) => void
-    contextReload: (context: UnocssPluginContext<UserConfig<any>>) => void
-    contextUnload: (context: UnocssPluginContext<UserConfig<any>>) => void
+    contextLoaded: (context: UnocssPluginContext<Theme>) => void
+    contextReload: (context: UnocssPluginContext<Theme>) => void
+    contextUnload: (context: UnocssPluginContext<Theme>) => void
   }>()
 
   constructor(cwd: string) {
     this.cwd = cwd
-    this.defaultContext = createContext(this.defaultUnocssConfig)
+    this.defaultContext = createContext<Theme, UserConfigDefaults<Theme>>(this.defaultUnocssConfig)
 
     this.ready = this.reload()
       .then(async () => {
diff --git a/packages/vscode/src/utils.ts b/packages/vscode/src/utils.ts
index 1ea1443ca1..27d30d866d 100644
--- a/packages/vscode/src/utils.ts
+++ b/packages/vscode/src/utils.ts
@@ -22,7 +22,7 @@ export function throttle<T extends ((...args: any) => any)>(func: T, timeFrame:
   } as T
 }
 
-export async function getPrettiedCSS(uno: UnoGenerator, util: string) {
+export async function getPrettiedCSS<T>(uno: UnoGenerator<T>, util: string) {
   const result = (await uno.generate(new Set([util]), { preflights: false, safelist: false }))
   const prettified = prettier.format(result.css, {
     parser: 'css',
@@ -35,7 +35,7 @@ export async function getPrettiedCSS(uno: UnoGenerator, util: string) {
   }
 }
 
-export async function getPrettiedMarkdown(uno: UnoGenerator, util: string) {
+export async function getPrettiedMarkdown<T>(uno: UnoGenerator<T>, util: string) {
   return `\`\`\`css\n${(await getPrettiedCSS(uno, util)).prettified}\n\`\`\``
 }
 
@@ -59,7 +59,7 @@ export function body2ColorValue(body: string, theme: Theme) {
 const matchedAttributifyRE = /(?<=^\[.+~=").*(?="\]$)/
 const matchedValuelessAttributifyRE = /(?<=^\[).+(?==""\]$)/
 const _colorsMapCache = new Map<string, string>()
-export function getColorsMap(uno: UnoGenerator, result: GenerateResult) {
+export function getColorsMap<T>(uno: UnoGenerator<T>, result: GenerateResult) {
   const theme = uno.config.theme as Theme
   const colorsMap = new Map<string, string>()
 

From b9a3088cb73b061c3a1940bdab8f9dd465b1321f Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:06:14 +0800
Subject: [PATCH 29/35] fix(webpack): add missing theme type var

---
 packages/webpack/src/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/webpack/src/index.ts b/packages/webpack/src/index.ts
index 7df103056b..4f3e7417eb 100644
--- a/packages/webpack/src/index.ts
+++ b/packages/webpack/src/index.ts
@@ -8,7 +8,7 @@ import { HASH_PLACEHOLDER_RE, LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, getHashPlace
 import { applyTransformers } from '../../shared-integration/src/transformers'
 import { getPath, isCssId } from '../../shared-integration/src/utils'
 
-export interface WebpackPluginOptions<Theme extends {} = {}> extends UserConfig<Theme> {}
+export interface WebpackPluginOptions<T> extends UserConfig<T> {}
 
 const PLUGIN_NAME = 'unocss:webpack'
 const UPDATE_DEBOUNCE = 10
@@ -17,12 +17,12 @@ export function defineConfig<Theme extends {}>(config: WebpackPluginOptions<Them
   return config
 }
 
-export default function WebpackPlugin<Theme extends {}>(
-  configOrPath?: WebpackPluginOptions<Theme> | string,
-  defaults?: UserConfigDefaults,
+export default function WebpackPlugin<T>(
+  configOrPath?: WebpackPluginOptions<T> | string,
+  defaults?: UserConfigDefaults<T>,
 ) {
   return createUnplugin(() => {
-    const ctx = createContext<WebpackPluginOptions>(configOrPath as any, defaults)
+    const ctx = createContext<T, WebpackPluginOptions<T>>(configOrPath as any, defaults)
     const { uno, tokens, filter, extract, onInvalidate } = ctx
 
     let timer: any

From d2a914aa98be26ed6d8161873d5f2aef78b3f643 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:10:05 +0800
Subject: [PATCH 30/35] fix(preset-web-fonts): add missing theme type var

---
 packages/preset-web-fonts/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-web-fonts/src/index.ts b/packages/preset-web-fonts/src/index.ts
index 6e601ef7d2..9b161d0b41 100644
--- a/packages/preset-web-fonts/src/index.ts
+++ b/packages/preset-web-fonts/src/index.ts
@@ -27,7 +27,7 @@ const providers = {
   none: NoneProvider,
 }
 
-const preset = (options: WebFontsOptions = {}): Preset<any> => {
+const preset = <T>(options: WebFontsOptions = {}): Preset<T> => {
   const {
     provider: defaultProvider = 'google',
     extendTheme = true,

From 9067413bd94f0b7bf70ca4e425f38c2f9f1ba30a Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:14:08 +0800
Subject: [PATCH 31/35] fix(nuxt): add missing theme type var

---
 packages/nuxt/src/index.ts   | 6 +++---
 packages/nuxt/src/options.ts | 6 +++---
 packages/nuxt/src/types.ts   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
index 58209c918d..ea59f06f11 100644
--- a/packages/nuxt/src/index.ts
+++ b/packages/nuxt/src/index.ts
@@ -10,7 +10,7 @@ export { UnocssNuxtOptions }
 
 const dir = dirname(fileURLToPath(import.meta.url))
 
-export default defineNuxtModule<UnocssNuxtOptions>({
+export default defineNuxtModule<UnocssNuxtOptions<any>>({
   meta: {
     name: 'unocss',
     configKey: 'unocss',
@@ -67,9 +67,9 @@ export default defineNuxtModule<UnocssNuxtOptions>({
 
 declare module '@nuxt/schema' {
   interface NuxtConfig {
-    unocss?: UnocssNuxtOptions
+    unocss?: UnocssNuxtOptions<any>
   }
   interface NuxtOptions {
-    unocss?: UnocssNuxtOptions
+    unocss?: UnocssNuxtOptions<any>
   }
 }
diff --git a/packages/nuxt/src/options.ts b/packages/nuxt/src/options.ts
index df712dba55..677ca0ddd2 100644
--- a/packages/nuxt/src/options.ts
+++ b/packages/nuxt/src/options.ts
@@ -7,7 +7,7 @@ import presetTagify from '@unocss/preset-tagify'
 import presetWind from '@unocss/preset-wind'
 import type { UnocssNuxtOptions } from './types'
 
-export function resolveOptions(options: UnocssNuxtOptions) {
+export function resolveOptions<T>(options: UnocssNuxtOptions<T>) {
   if (options.presets == null) {
     options.presets = []
     const presetMap = {
@@ -20,9 +20,9 @@ export function resolveOptions(options: UnocssNuxtOptions) {
       wind: presetWind,
     }
     for (const [key, preset] of Object.entries(presetMap)) {
-      const option = options[key as keyof UnocssNuxtOptions]
+      const option = options[key as keyof UnocssNuxtOptions<T>]
       if (option)
-        options.presets.push(preset(typeof option === 'boolean' ? {} : option))
+        options.presets.push((preset as (options?: typeof option) => any)(typeof option === 'boolean' ? {} : option)) // HACK It's tedious to type them all
     }
   }
 }
diff --git a/packages/nuxt/src/types.ts b/packages/nuxt/src/types.ts
index dd5455ac49..49d205e911 100644
--- a/packages/nuxt/src/types.ts
+++ b/packages/nuxt/src/types.ts
@@ -7,7 +7,7 @@ import type { TypographyOptions } from '@unocss/preset-typography'
 import type { TagifyOptions } from '@unocss/preset-tagify'
 import type { PresetWindOptions } from '@unocss/preset-wind'
 
-export interface UnocssNuxtOptions extends UserConfig {
+export interface UnocssNuxtOptions<T> extends UserConfig<T> {
   /**
    * Injecting `uno.css` entry
    *

From 273cb65a90049caad4192edcbf175461a048e885 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:16:41 +0800
Subject: [PATCH 32/35] fix(preset-tagify): add missing theme type var

---
 packages/preset-tagify/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-tagify/src/index.ts b/packages/preset-tagify/src/index.ts
index a44eac061a..4d620c93ae 100644
--- a/packages/preset-tagify/src/index.ts
+++ b/packages/preset-tagify/src/index.ts
@@ -14,7 +14,7 @@ function tagifyPreset<T>(options: TagifyOptions = {}): Preset<T> {
   } = options
 
   const variants = [
-    variantTagify(options),
+    variantTagify<T>(options),
   ]
   const extractors = [
     extractorTagify(options),

From 5e9ef80351517d2f47daada0e607213a0477eae0 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:19:35 +0800
Subject: [PATCH 33/35] fix(preset-mini): add missing theme type var

---
 packages/preset-mini/src/variants/default.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/preset-mini/src/variants/default.ts b/packages/preset-mini/src/variants/default.ts
index a2668254ef..779560fa7e 100644
--- a/packages/preset-mini/src/variants/default.ts
+++ b/packages/preset-mini/src/variants/default.ts
@@ -29,7 +29,7 @@ export const variants = (options: PresetMiniOptions): Variant<Theme>[] => [
   ...variantTaggedPseudoClasses(options),
 
   partClasses,
-  ...variantColorsMediaOrClass(options),
+  ...variantColorsMediaOrClass<Theme>(options),
   ...variantLanguageDirections,
   variantScope,
 ]

From ec5013a26ff4407756f4b2114533ff0b577ab555 Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:28:11 +0800
Subject: [PATCH 34/35] refactor: tagless final

---
 packages/preset-typography/src/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/preset-typography/src/index.ts b/packages/preset-typography/src/index.ts
index 212ca36b74..fc9806df70 100644
--- a/packages/preset-typography/src/index.ts
+++ b/packages/preset-typography/src/index.ts
@@ -1,5 +1,4 @@
 import type { CSSObject, Preset, RuleContext } from '@unocss/core'
-import type { Theme } from '@unocss/preset-mini'
 import { toEscapedSelector } from '@unocss/core'
 import { getPreflights } from './preflights'
 
@@ -30,6 +29,11 @@ export interface TypographyOptions {
   className?: string
 }
 
+export type Theme = Readonly<{
+  colors?: Record<string, Record<string, string>>
+  fontFamily?: Record<string, string>
+}>
+
 /**
  * UnoCSS Preset for Typography
  *

From bc50a65ab0a5feec3a671b420cfd770ae5f079bd Mon Sep 17 00:00:00 2001
From: equt <17521736+equt@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:30:36 +0800
Subject: [PATCH 35/35] feat(vite): relax restriction on theme type var

---
 packages/vite/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
index b49fb8db88..2ef305eb1d 100644
--- a/packages/vite/src/index.ts
+++ b/packages/vite/src/index.ts
@@ -20,7 +20,7 @@ export * from './modes/per-module'
 export * from './modes/vue-scoped'
 export * from './modes/svelte-scoped'
 
-export function defineConfig<Theme extends {}>(config: VitePluginConfig<Theme>) {
+export function defineConfig<T>(config: VitePluginConfig<T>) {
   return config
 }