Setting the file. One moment.
Subchapter 10.4
references/core-processors.mdMarkdown3 KBView on GitHub
Processors are hooks that transform generated CSS. Unlike transformers (which modify source code before extraction), processors run after UnoCSS has generated its CSS layers.
A processor receives the CSS for one layer and returns the CSS that replaces it. Sync or async results are supported.
import type { CSSProcessor } from '@unocss/core'
import { defineConfig } from 'unocss'
const banner: CSSProcessor = {
name: 'add-banner',
order: 10,
process(css, { layer, envMode }) {
if (envMode !== 'build')
return css
return `/* generated layer: ${layer} */\n${css}`
},
}
export default defineConfig({
processors: [banner],
})For every non-empty CSS layer:
order ascending (default 0; lower runs first).getLayer(), getLayers(), and css.Layers may be processed concurrently, so processors must not rely on mutable state shared across layers. When setLayer() changes a layer, its callback gets the raw unprocessed CSS and UnoCSS re-runs the full chain (prevents double-processing). A thrown error fails generation.
interface CSSProcessorContext<Theme extends object = object> {
layer: string // current generated layer name
theme: Theme // resolved UnoCSS theme
envMode: 'dev' | 'build'
}Processors from presets and user config are merged; the processor name dedups duplicates.
@unocss/processor-lightningcss runs each layer through Lightning CSS (opens in a new tab) to minify, compile modern syntax, and apply compatibility transforms for browser targets. Node.js only — outside Node it warns once and returns the CSS unchanged.
import processorLightningCSS from '@unocss/processor-lightningcss'
import { defineConfig } from 'unocss'
export default defineConfig({
processors: [
processorLightningCSS({
targets: {
chrome: 111 << 16,
safari: 15 << 16,
},
}),
],
})Accepts Lightning CSS TransformOptions except code/filename (UnoCSS supplies these per layer; the layer name becomes the filename, e.g. utilities.css).
minify — defaults to on when envMode is build, off in dev; set explicitly to override.targets — controls which compatibility transforms are applied.