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
```