Lightning CSS processor

@unocss/processor-lightningcss processes each generated UnoCSS layer with Lightning CSS. It can minify CSS, compile modern CSS syntax, and add compatibility transforms for your browser targets.

Source Code

Installation

pnpm

pnpm add -D @unocss/processor-lightningcss

yarn

yarn add -D @unocss/processor-lightningcss

npm

npm install -D @unocss/processor-lightningcss

bun

bun add -D @unocss/processor-lightningcss

Usage

Add the processor to the processors array in your UnoCSS configuration:

uno.config.ts

import processorLightningCSS from '@unocss/processor-lightningcss'
import { defineConfig } from 'unocss'

export default defineConfig({
  processors: [
    processorLightningCSS({
      targets: {
        chrome: 111 << 16,
        safari: 15 << 16,
      },
    }),
  ],
})

The processor runs after UnoCSS generates each non-empty layer. Its output is returned by getLayer(), getLayers(), and the generated css result.

Options

The processor accepts Lightning CSS TransformOptions, except for code and filename. UnoCSS supplies those values for each generated layer.

The current layer name is used as the filename. For example, the utilities layer is passed to Lightning CSS as utilities.css, which makes transformation errors easier to identify.

Minification

By default, minification is enabled when envMode is build and disabled when it is dev. Set minify explicitly to override that behavior:

uno.config.ts

processorLightningCSS({
  minify: true,
})

Browser targets

Use targets to control which compatibility transforms Lightning CSS applies:

uno.config.ts

processorLightningCSS({
  targets: {
    chrome: 111 << 16,
    firefox: 113 << 16,
    safari: 15 << 16,
  },
})

Node.js only

This processor uses the native Node.js build of Lightning CSS and is intended for build-time usage. When it is invoked outside Node.js, UnoCSS emits a warning once and returns the original CSS unchanged.

License

• MIT License © 2021-PRESENT Anthony Fu