Процессоры

Процессоры — это хуки, которые преобразуют сгенерированный CSS. В отличие от трансформеров, изменяющих исходный код до извлечения, процессоры запускаются после того, как UnoCSS сгенерировал слои CSS.

Определение процессора

Процессор получает CSS одного слоя и возвращает CSS, который должен его заменить. Поддерживаются как синхронные, так и асинхронные результаты.

uno.config.ts

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],
})

Процесс обработки

Для каждого непустого слоя CSS UnoCSS выполняет следующие шаги:

1. Генерирует исходный CSS слоя, включая префлайт и все включённые обёртки CSS-слоя или маркеры слоя.
2. Сортирует процессоры по значению order в порядке возрастания.
3. Последовательно передаёт слой каждому процессору. Результат одного процессора становится входными данными для следующего.
4. Кэширует обработанный слой и предоставляет его через getLayer(), getLayers() и css.

Разные слои могут обрабатываться параллельно. Процессору следует избегать зависимости от изменяемого состояния, общего для нескольких слоёв.

Когда setLayer() изменяет слой, его callback получает исходный, необработанный CSS. Затем UnoCSS снова пропускает обновлённый CSS через всю цепочку процессоров. Это предотвращает повторное применение процессоров к результату их предыдущей обработки.

сгенерированный слой
  -> процессор 1
  -> процессор 2
  -> результат обработки слоя

Если процессор выбрасывает ошибку, генерация завершается с ошибкой, которая передаётся вызывающей стороне.

Контекст

Вторым аргументом, передаваемым в process(), является CSSProcessorContext:

interface CSSProcessorContext<Theme extends object = object> {
  layer: string
  theme: Theme
  envMode: 'dev' | 'build'
}

• layer — имя текущего сгенерированного слоя.
• theme — разрешённая тема UnoCSS.
• envMode — указывает, генерирует ли UnoCSS разметку для dev-сборки или для продакшен-сборки.

Порядок выполнения процессоров

Процессоры с меньшим значением order выполняются первыми. Для процессоров, у которых порядок не указан явно, используется значение 0.

processors: [
  { name: 'minify', order: 20, process: minify },
  { name: 'prefix', order: 10, process: addPrefixes },
]

В этом примере prefix выполняется перед minify.

Процессоры, объявленные пресетами и пользовательской конфигурацией, объединяются. name процессора используется для его идентификации при удалении дубликатов.

Официальные процессоры

• Процессор Lightning CSS