tessl/npm-unocss--preset-wind
Tailwind / Windi CSS compact preset for UnoCSS that provides comprehensive utility classes and theming system
—
postprocessors.mddocs/
Postprocessors System
CSS transformation pipeline for handling important utilities and other post-processing tasks that modify generated CSS output.
Capabilities
Postprocessors Function
Creates an array of postprocessors based on preset options, combining preset-mini postprocessors with Wind-specific enhancements.
/**
* Creates postprocessors array for CSS transformation pipeline
* @param options - Preset Wind configuration options
* @returns Array of postprocessor functions
*/
function postprocessors(options: PresetWindOptions): Postprocessor[];Usage Example:
import { postprocessors } from "@unocss/preset-wind";
// Create postprocessors with important handling
const processors = postprocessors({
important: true
});Important Postprocessor
Handles CSS specificity control through !important declaration or selector scoping.
/**
* Creates postprocessors for handling important CSS specificity
* @param option - Important configuration (boolean, string, or undefined)
* @returns Array of postprocessor functions
*/
function important(option: PresetWindOptions['important']): Postprocessor[];Important Option Behaviors:
Boolean Mode (important: true)
Adds !important to all generated CSS properties:
/* Input */
.m-4 { margin: 1rem; }
/* Output */
.m-4 { margin: 1rem !important; }Selector Mode (important: "#app")
Wraps utilities with the specified selector using :is():
/* Input */
.m-4 { margin: 1rem; }
/* Output */
#app :is(.m-4) { margin: 1rem; }Pseudo-element Handling: The selector mode correctly handles pseudo-elements:
/* Input */
.btn::before { content: ""; }
/* Output */
#app :is(.btn)::before { content: ""; }Disabled Mode (important: false or undefined)
No modifications applied to CSS output:
/* Input and Output remain unchanged */
.m-4 { margin: 1rem; }Usage Examples:
import { important } from "@unocss/preset-wind";
// Boolean important mode
const booleanProcessors = important(true);
// Selector important mode
const selectorProcessors = important("#app");
// Disabled important mode
const disabledProcessors = important(false);
// Returns empty array []Postprocessor Integration
Postprocessors are automatically integrated into the preset pipeline:
- Preset-mini postprocessors - Applied first for base functionality
- Important postprocessors - Applied based on options.important configuration
- Execution order - Postprocessors execute in array order during CSS generation
Internal Processing Flow:
// Automatic integration in presetWind()
return {
// ... other preset properties
postprocess: postprocessors(options),
}
// Postprocessors array composition
function postprocessors(options: PresetWindOptions): Postprocessor[] {
return [
...toArray(presetMini(options).postprocess),
...important(options.important),
]
}Advanced Usage:
import { defineConfig } from "unocss";
import { presetWind, postprocessors } from "@unocss/preset-wind";
// Manual postprocessor usage (advanced)
export default defineConfig({
presets: [
{
name: 'custom-preset',
postprocess: postprocessors({
important: "#root"
})
}
],
});Postprocessor Context
Each postprocessor receives a context object for CSS manipulation:
interface PostprocessorContext {
/** CSS selector being processed */
selector: string;
/** CSS property-value pairs as tuples */
entries: [string, string | number | undefined][];
/** Parent rule reference */
parent?: Rule;
/** CSS layer name */
layer?: string;
/** Sort order for CSS output */
sort?: number;
}Context Usage Example:
// Example postprocessor implementation
const customPostprocessor: Postprocessor = (util) => {
// Modify selector
if (util.selector.includes('.btn')) {
util.selector = `.custom ${util.selector}`;
}
// Modify CSS properties
util.entries.forEach(([prop, value]) => {
if (prop === 'color' && value === 'red') {
util.entries.push(['border-color', 'red']);
}
});
};Install with Tessl CLI
npx tessl i tessl/npm-unocss--preset-wind