0
# Postprocessors System
1

2
CSS transformation pipeline for handling important utilities and other post-processing tasks that modify generated CSS output.
3

4
## Capabilities
5

6
### Postprocessors Function
7

8
Creates an array of postprocessors based on preset options, combining preset-mini postprocessors with Wind-specific enhancements.
9

10
```typescript { .api }
11
/**
12
 * Creates postprocessors array for CSS transformation pipeline
13
 * @param options - Preset Wind configuration options
14
 * @returns Array of postprocessor functions
15
 */
16
function postprocessors(options: PresetWindOptions): Postprocessor[];
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import { postprocessors } from "@unocss/preset-wind";
23

24
// Create postprocessors with important handling
25
const processors = postprocessors({
26
  important: true
27
});
28
```
29

30
### Important Postprocessor
31

32
Handles CSS specificity control through `!important` declaration or selector scoping.
33

34
```typescript { .api }
35
/**
36
 * Creates postprocessors for handling important CSS specificity
37
 * @param option - Important configuration (boolean, string, or undefined)
38
 * @returns Array of postprocessor functions
39
 */
40
function important(option: PresetWindOptions['important']): Postprocessor[];
41
```
42

43
**Important Option Behaviors:**
44

45
#### Boolean Mode (`important: true`)
46
Adds `!important` to all generated CSS properties:
47

48
```css
49
/* Input */
50
.m-4 { margin: 1rem; }
51

52
/* Output */
53
.m-4 { margin: 1rem !important; }
54
```
55

56
#### Selector Mode (`important: "#app"`)
57
Wraps utilities with the specified selector using `:is()`:
58

59
```css
60
/* Input */
61
.m-4 { margin: 1rem; }
62

63
/* Output */
64
#app :is(.m-4) { margin: 1rem; }
65
```
66

67
**Pseudo-element Handling:**
68
The selector mode correctly handles pseudo-elements:
69

70
```css
71
/* Input */
72
.btn::before { content: ""; }
73

74
/* Output */
75
#app :is(.btn)::before { content: ""; }
76
```
77

78
#### Disabled Mode (`important: false` or `undefined`)
79
No modifications applied to CSS output:
80

81
```css
82
/* Input and Output remain unchanged */
83
.m-4 { margin: 1rem; }
84
```
85

86
**Usage Examples:**
87

88
```typescript
89
import { important } from "@unocss/preset-wind";
90

91
// Boolean important mode
92
const booleanProcessors = important(true);
93

94
// Selector important mode
95
const selectorProcessors = important("#app");
96

97
// Disabled important mode
98
const disabledProcessors = important(false);
99
// Returns empty array []
100
```
101

102
### Postprocessor Integration
103

104
Postprocessors are automatically integrated into the preset pipeline:
105

106
1. **Preset-mini postprocessors** - Applied first for base functionality
107
2. **Important postprocessors** - Applied based on options.important configuration
108
3. **Execution order** - Postprocessors execute in array order during CSS generation
109

110
**Internal Processing Flow:**
111

112
```typescript
113
// Automatic integration in presetWind()
114
return {
115
  // ... other preset properties
116
  postprocess: postprocessors(options),
117
}
118

119
// Postprocessors array composition
120
function postprocessors(options: PresetWindOptions): Postprocessor[] {
121
  return [
122
    ...toArray(presetMini(options).postprocess),
123
    ...important(options.important),
124
  ]
125
}
126
```
127

128
**Advanced Usage:**
129

130
```typescript
131
import { defineConfig } from "unocss";
132
import { presetWind, postprocessors } from "@unocss/preset-wind";
133

134
// Manual postprocessor usage (advanced)
135
export default defineConfig({
136
  presets: [
137
    {
138
      name: 'custom-preset',
139
      postprocess: postprocessors({
140
        important: "#root"
141
      })
142
    }
143
  ],
144
});
145
```
146

147
### Postprocessor Context
148

149
Each postprocessor receives a context object for CSS manipulation:
150

151
```typescript { .api }
152
interface PostprocessorContext {
153
  /** CSS selector being processed */
154
  selector: string;
155
  /** CSS property-value pairs as tuples */
156
  entries: [string, string | number | undefined][];
157
  /** Parent rule reference */
158
  parent?: Rule;
159
  /** CSS layer name */
160
  layer?: string;
161
  /** Sort order for CSS output */
162
  sort?: number;
163
}
164
```
165

166
**Context Usage Example:**
167

168
```typescript
169
// Example postprocessor implementation
170
const customPostprocessor: Postprocessor = (util) => {
171
  // Modify selector
172
  if (util.selector.includes('.btn')) {
173
    util.selector = `.custom ${util.selector}`;
174
  }
175
  
176
  // Modify CSS properties
177
  util.entries.forEach(([prop, value]) => {
178
    if (prop === 'color' && value === 'red') {
179
      util.entries.push(['border-color', 'red']);
180
    }
181
  });
182
};
183
```