0
# UnoCSS Preset Mini
1

2
The minimal preset for UnoCSS, an instant on-demand Atomic CSS engine. This preset provides the essential utilities for CSS generation, serving as the foundational building block for UnoCSS configurations. It features comprehensive CSS coverage from layout to typography to effects, with support for dark mode variants, arbitrary CSS selectors, customizable prefixes, and optional preflight styles.
3

4
## Package Information
5

6
- **Package Name**: @unocss/preset-mini
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @unocss/preset-mini`
10

11
## Core Imports
12

13
```typescript
14
import { presetMini } from "@unocss/preset-mini";
15
```
16

17
For specific exports:
18

19
```typescript
20
import { presetMini, colors, theme, parseColor } from "@unocss/preset-mini";
21
import { colors } from "@unocss/preset-mini/colors";
22
import { theme } from "@unocss/preset-mini/theme";
23
import { variants } from "@unocss/preset-mini/variants";
24
import { rules } from "@unocss/preset-mini/rules";
25
import { handler, h, parseColor } from "@unocss/preset-mini/utils";
26
```
27

28
## Basic Usage
29

30
```typescript
31
import { defineConfig } from "unocss";
32
import { presetMini } from "@unocss/preset-mini";
33

34
export default defineConfig({
35
  presets: [
36
    presetMini({
37
      dark: 'class', // Enable class-based dark mode
38
      preflight: true, // Include CSS reset
39
      variablePrefix: 'un-', // CSS variable prefix
40
    })
41
  ]
42
});
43
```
44

45
## Architecture
46

47
UnoCSS Preset Mini is built around several key components:
48

49
- **Preset Factory**: The main `presetMini` function that generates a complete UnoCSS preset configuration
50
- **Theme System**: Comprehensive theming with colors, spacing, typography, and breakpoints based on Tailwind CSS
51
- **Rule Engine**: Modular CSS rule generators for layout, typography, colors, effects, and more  
52
- **Variant System**: Support for responsive, pseudo-classes, dark mode, and arbitrary variants
53
- **Utility Functions**: Color parsing, value handling, and CSS generation utilities
54
- **Modular Exports**: Individual access to theme, rules, variants, colors, and utilities
55

56
## Capabilities
57

58
### Preset Configuration
59

60
Main preset factory function that creates a complete UnoCSS preset with essential utilities and configurable options.
61

62
```typescript { .api }
63
function presetMini(options?: PresetMiniOptions): Preset;
64

65
interface PresetMiniOptions extends PresetOptions {
66
  /** Dark mode configuration - class-based, media query, or custom selectors */
67
  dark?: 'class' | 'media' | DarkModeSelectors;
68
  /** Generate tagged pseudo selector as [group=""] instead of .group */
69
  attributifyPseudo?: boolean;
70
  /** Prefix for CSS variables */
71
  variablePrefix?: string;
72
  /** Utils prefix for class names */
73
  prefix?: string | string[];
74
  /** Generate preflight CSS reset styles */
75
  preflight?: boolean | 'on-demand';
76
  /** Enable arbitrary variants like [&>*]:m-1 */
77
  arbitraryVariants?: boolean;
78
}
79

80
interface DarkModeSelectors {
81
  /** Selectors for light variant */
82
  light?: string | string[];
83
  /** Selectors for dark variant */
84
  dark?: string | string[];
85
}
86
```
87

88
[Preset Configuration](./preset-configuration.md)
89

90
### Theme System
91

92
Comprehensive theme configuration with colors, spacing, typography, breakpoints, and more, providing the foundation for all utility generation.
93

94
```typescript { .api }
95
const theme: Theme;
96
const colors: Colors;
97

98
interface Theme {
99
  colors?: Colors;
100
  spacing?: Record<string, string>;
101
  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
102
  fontFamily?: Record<string, string>;
103
  breakpoints?: Record<string, string>;
104
  borderRadius?: Record<string, string>;
105
  boxShadow?: Record<string, string | string[]>;
106
  // ... comprehensive theme properties
107
}
108

109
interface Colors {
110
  [key: string]: Colors & { DEFAULT?: string } | string;
111
}
112

113
// Additional utility types
114
interface ParsedColorValue {
115
  opacity?: string;
116
  name: string;
117
  no: string;
118
  color?: string;
119
  cssColor?: CSSColorValue;
120
  alpha?: string;
121
}
122

123
interface ValueHandler {
124
  bracket: (str: string) => string | undefined;
125
  bracketOfColor: (str: string) => string | undefined;
126
  bracketOfLength: (str: string) => string | undefined;
127
  bracketOfPosition: (str: string) => string | undefined;
128
  cssvar: (str: string) => string | undefined;
129
  number: (str: string) => string | undefined;
130
  numberWithUnit: (str: string) => string | undefined;
131
  auto: (str: string) => string | undefined;
132
  rem: (str: string) => string | undefined;
133
  px: (str: string) => string | undefined;
134
  percent: (str: string) => string | undefined;
135
  fraction: (str: string) => string | undefined;
136
  global: (str: string) => string | undefined;
137
  time: (str: string) => string | undefined;
138
  degree: (str: string) => string | undefined;
139
  properties: (str: string) => string | undefined;
140
  position: (str: string) => string | undefined;
141
}
142

143
type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';
144

145
// Re-exported from @unocss/core
146
interface Preset {
147
  name: string;
148
  theme?: Theme;
149
  rules?: Rule[];
150
  variants?: Variant[];
151
  options?: any;
152
  prefix?: string | string[];
153
  postprocess?: Postprocessor[];
154
  preflights?: Preflight[];
155
  extractorDefault?: Extractor;
156
  autocomplete?: any;
157
}
158

159
interface PresetOptions {
160
  // Base preset options from UnoCSS core
161
}
162

163
type Postprocessor = (obj: { entries: [string, string | number][] }) => void;
164

165
// Core UnoCSS types referenced in the API
166
interface Rule {
167
  0?: string | RegExp;
168
  1?: string | DynamicMatcher | CSSObject;
169
  meta?: any;
170
}
171

172
interface Variant {
173
  name?: string;
174
  match?: VariantMatcher;
175
  multiPass?: boolean;
176
  autocomplete?: string[];
177
}
178

179
interface Extractor {
180
  name: string;
181
  extract: ExtractorFunction;
182
  order?: number;
183
}
184

185
interface CSSObject {
186
  [key: string]: string | number | CSSObject | undefined;
187
}
188

189
interface CSSColorValue {
190
  type: string;
191
  components: number[];
192
  alpha?: number;
193
}
194

195
interface StaticRule {
196
  0: string;
197
  1: CSSObject;
198
  meta?: any;
199
}
200

201
type DynamicMatcher = (match: string[], context: RuleContext<Theme>) => CSSObject | string | undefined;
202
type VariantMatcher = (matcher: string, context: VariantContext<Theme>) => VariantMatchedResult | undefined;
203
type ExtractorFunction = (code: string, id?: string) => Set<string> | string[] | Promise<Set<string> | string[]>;
204

205
interface RuleContext<T = any> {
206
  theme: T;
207
  rawSelector: string;
208
  currentSelector: string;
209
  variantHandlers: VariantHandler[];
210
  constructCSS: ConstructCSSFunction;
211
  generator: UnoGenerator;
212
}
213

214
interface VariantContext<T = any> {
215
  theme: T;
216
  generator: UnoGenerator;
217
}
218

219
interface VariantMatchedResult {
220
  matcher: string;
221
  selector?: string | ((input: string) => string);
222
  parent?: string | [string, number];
223
  layer?: string;
224
  sort?: number;
225
}
226

227
interface VariantHandler {
228
  matcher: string;
229
  selector?: string | ((input: string) => string);
230
  parent?: string | [string, number];
231
  layer?: string;
232
  sort?: number;
233
}
234

235
type ConstructCSSFunction = (selector: string, css: CSSObject | string) => string;
236

237
interface UnoGenerator {
238
  config: any;
239
  userConfig: any;
240
}
241
```
242

243
[Theme System](./theme-system.md)
244

245
### CSS Rules
246

247
Modular CSS rule generators covering layout, typography, colors, effects, and responsive design utilities.
248

249
```typescript { .api }
250
const rules: Rule[];
251
```
252

253
[CSS Rules](./css-rules.md)
254

255
### Variants
256

257
Comprehensive variant system supporting responsive breakpoints, pseudo-classes, dark mode, arbitrary selectors, and more.
258

259
```typescript { .api }
260
function variants(options: PresetMiniOptions): Variant[];
261
```
262

263
[Variants](./variants.md)
264

265
### Utility Functions
266

267
Color parsing, value handling, and CSS generation utilities for advanced use cases and custom rule creation.
268

269
```typescript { .api }
270
function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined;
271

272
function VarPrefixPostprocessor(prefix: string): Postprocessor | undefined;
273

274
const handler: ValueHandler;
275
const h: ValueHandler; // Alias for handler
276
```
277

278
[Utility Functions](./utility-functions.md)
279

280
## Types
281

282
```typescript { .api }
283
interface PresetMiniOptions extends PresetOptions {
284
  dark?: 'class' | 'media' | DarkModeSelectors;
285
  attributifyPseudo?: boolean;
286
  variablePrefix?: string;
287
  prefix?: string | string[];
288
  preflight?: boolean | 'on-demand';
289
  arbitraryVariants?: boolean;
290
}
291

292
interface DarkModeSelectors {
293
  light?: string | string[];
294
  dark?: string | string[];
295
}
296

297
interface Theme {
298
  width?: Record<string, string>;
299
  height?: Record<string, string>;
300
  maxWidth?: Record<string, string>;
301
  maxHeight?: Record<string, string>;
302
  minWidth?: Record<string, string>;
303
  minHeight?: Record<string, string>;
304
  borderRadius?: Record<string, string>;
305
  breakpoints?: Record<string, string>;
306
  colors?: Colors;
307
  fontFamily?: Record<string, string>;
308
  fontSize?: Record<string, string | [string, string | CSSObject] | [string, string, string]>;
309
  fontWeight?: Record<string, string>;
310
  spacing?: Record<string, string>;
311
  boxShadow?: Record<string, string | string[]>;
312
  // ... additional theme properties
313
}
314

315
interface ThemeAnimation {
316
  keyframes?: Record<string, string>;
317
  durations?: Record<string, string>;
318
  timingFns?: Record<string, string>;
319
  properties?: Record<string, object>;
320
  counts?: Record<string, string | number>;
321
  category?: Record<string, string>;
322
}
323

324
interface Colors {
325
  [key: string]: Colors & { DEFAULT?: string } | string;
326
}
327

328
// Additional utility types
329
interface ParsedColorValue {
330
  opacity?: string;
331
  name: string;
332
  no: string;
333
  color?: string;
334
  cssColor?: CSSColorValue;
335
  alpha?: string;
336
}
337

338
interface ValueHandler {
339
  bracket: (str: string) => string | undefined;
340
  bracketOfColor: (str: string) => string | undefined;
341
  bracketOfLength: (str: string) => string | undefined;
342
  bracketOfPosition: (str: string) => string | undefined;
343
  cssvar: (str: string) => string | undefined;
344
  number: (str: string) => string | undefined;
345
  numberWithUnit: (str: string) => string | undefined;
346
  auto: (str: string) => string | undefined;
347
  rem: (str: string) => string | undefined;
348
  px: (str: string) => string | undefined;
349
  percent: (str: string) => string | undefined;
350
  fraction: (str: string) => string | undefined;
351
  global: (str: string) => string | undefined;
352
  time: (str: string) => string | undefined;
353
  degree: (str: string) => string | undefined;
354
  properties: (str: string) => string | undefined;
355
  position: (str: string) => string | undefined;
356
}
357

358
type ThemeColorKeys = 'colors' | 'borderColor' | 'backgroundColor' | 'textColor' | 'shadowColor' | 'accentColor';
359

360
// Re-exported from @unocss/core
361
interface Preset {
362
  name: string;
363
  theme?: Theme;
364
  rules?: Rule[];
365
  variants?: Variant[];
366
  options?: any;
367
  prefix?: string | string[];
368
  postprocess?: Postprocessor[];
369
  preflights?: Preflight[];
370
  extractorDefault?: Extractor;
371
  autocomplete?: any;
372
}
373

374
interface PresetOptions {
375
  // Base preset options from UnoCSS core
376
}
377

378
type Postprocessor = (obj: { entries: [string, string | number][] }) => void;
379

380
// Core UnoCSS types referenced in the API
381
interface Rule {
382
  0?: string | RegExp;
383
  1?: string | DynamicMatcher | CSSObject;
384
  meta?: any;
385
}
386

387
interface Variant {
388
  name?: string;
389
  match?: VariantMatcher;
390
  multiPass?: boolean;
391
  autocomplete?: string[];
392
}
393

394
interface Extractor {
395
  name: string;
396
  extract: ExtractorFunction;
397
  order?: number;
398
}
399

400
interface CSSObject {
401
  [key: string]: string | number | CSSObject | undefined;
402
}
403

404
interface CSSColorValue {
405
  type: string;
406
  components: number[];
407
  alpha?: number;
408
}
409

410
interface StaticRule {
411
  0: string;
412
  1: CSSObject;
413
  meta?: any;
414
}
415

416
type DynamicMatcher = (match: string[], context: RuleContext<Theme>) => CSSObject | string | undefined;
417
type VariantMatcher = (matcher: string, context: VariantContext<Theme>) => VariantMatchedResult | undefined;
418
type ExtractorFunction = (code: string, id?: string) => Set<string> | string[] | Promise<Set<string> | string[]>;
419

420
interface RuleContext<T = any> {
421
  theme: T;
422
  rawSelector: string;
423
  currentSelector: string;
424
  variantHandlers: VariantHandler[];
425
  constructCSS: ConstructCSSFunction;
426
  generator: UnoGenerator;
427
}
428

429
interface VariantContext<T = any> {
430
  theme: T;
431
  generator: UnoGenerator;
432
}
433

434
interface VariantMatchedResult {
435
  matcher: string;
436
  selector?: string | ((input: string) => string);
437
  parent?: string | [string, number];
438
  layer?: string;
439
  sort?: number;
440
}
441

442
interface VariantHandler {
443
  matcher: string;
444
  selector?: string | ((input: string) => string);
445
  parent?: string | [string, number];
446
  layer?: string;
447
  sort?: number;
448
}
449

450
type ConstructCSSFunction = (selector: string, css: CSSObject | string) => string;
451

452
interface UnoGenerator {
453
  config: any;
454
  userConfig: any;
455
}
456
```