farm-plugin-unocss

UnoCSS integration plugin for Farm, powered by the PostCSS pipeline.

Note: This package was renamed from farmfe-plugin-unocss (deprecated). Update your imports accordingly.

Install

pnpm add -D farm-plugin-unocss unocss

You do not need to add postcss separately for this package's own contract.

Usage

1. Create uno.config.ts

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  content: {
    filesystem: ['src/**/*.{html,js,ts,jsx,tsx}'],
  },
  presets: [presetUno()],
})

2. Configure farm.config.ts

import { defineConfig } from '@farmfe/core'
import unocss from 'farm-plugin-unocss'

export default defineConfig({
  plugins: ['@farmfe/plugin-react', ...unocss()],
})

3. Import in your app

import 'uno.css'

Options

import unocss from 'farm-plugin-unocss'

unocss({
  // CSS entry file name (default: 'uno.css')
  entry: 'uno.css',

  // UnoCSS layers to inject (default: 'all')
  injectLayers: 'all',

  // Options passed to @unocss/postcss
  uno: {
    configOrPath: './uno.config.ts',
  },

  // PostCSS plugin filters
  filters: { moduleTypes: ['css'] },

  // Additional @farmfe/js-plugin-postcss options
  postcss: {},
})

How It Works

This plugin delegates to two sub-plugins:

1. Virtual Module Plugin — resolves uno.css imports to a virtual CSS module containing @unocss all;
2. PostCSS Plugin — uses @farmfe/js-plugin-postcss + @unocss/postcss to transform @unocss directives into generated utility CSS

HMR is supported: when source files change, the virtual module is invalidated and UnoCSS re-generates the stylesheet.

Migration from farmfe-plugin-unocss

- import unocss from 'farmfe-plugin-unocss'
+ import unocss from 'farm-plugin-unocss'

- pnpm add -D farmfe-plugin-unocss
+ pnpm add -D farm-plugin-unocss

The API and options are unchanged — only the package name changed.

License

MIT