Процессор Lightning CSS

@unocss/processor-lightningcss обрабатывает каждый сгенерированный слой UnoCSS с помощью Lightning CSS. Он может минифицировать CSS, компилировать современный синтаксис CSS и выполнять преобразования для обеспечения совместимости с целевыми браузерами.

Исходный код

Установка

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

Использование

Добавьте процессор в массив processors в конфигурации UnoCSS:

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

Процессор запускается после того, как UnoCSS генерирует каждый непустой слой. Его результат возвращается через getLayer(), getLayers() и сгенерированный результат css.

Опции

Процессор принимает опции TransformOptions Lightning CSS, за исключением code и filename. UnoCSS предоставляет эти значения для каждого сгенерированного слоя.

Текущее имя слоя используется в качестве имени файла. Например, слой utilities передаётся в Lightning CSS как utilities.css, что упрощает определение источника ошибок преобразования.

Минификация

По умолчанию минификация включена, если envMode имеет значение build, и отключена, если он имеет значение dev. Явно задайте minify, чтобы изменить это поведение:

uno.config.ts

processorLightningCSS({
  minify: true,
})

Целевые браузеры

Используйте targets, чтобы управлять преобразованиями для обеспечения совместимости, которые применяет Lightning CSS:

uno.config.ts

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

Только для Node.js

Этот процессор использует нативную сборку Lightning CSS для Node.js и предназначен для использования во время сборки. При вызове вне Node.js UnoCSS один раз выводит предупреждение и возвращает исходный CSS без изменений.

Лицензия

• Лицензия MIT © 2021-настоящее время Anthony Fu