Настройка UnoCSS

Конфигурация

Конфигурации делают UnoCSS мощным.

• Правила - Определение атомарных CSS-утилит
• Сокращения - Объединение нескольких правил в одно сокращение.
• Тема - Определение переменных темы.
• Варианты - Применение пользовательских соглашений к правилам.
• Экстракторы - Определение где и как извлекаются утилиты.
• Префлайты - Определение глобального базового CSS.
• Слои - Определение порядка слоев утилит.
• Пресеты - Предопределенные конфигурации для распространенных случаев использования.
• Трансформеры - Трансформеры кода для поддержки соглашений.
• Автодополнение - Определение настраиваемых подсказок автодополнения.

Опции

rules

• Тип: Rule<Theme>[]

Правила для генерации CSS-утилит. Последующие записи имеют более высокий приоритет.

shortcuts

• Тип: UserShortcuts<Theme>

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

theme

• Тип: Theme

Объект темы для общей конфигурации между правилами.

extendTheme

• Тип: Arrayable<ThemeExtender<Theme>> Пользовательские функции для изменения объекта темы.

Также возможно вернуть новый объект темы для полной замены оригинального.

variants

• Тип: Variant<Theme>[]

Варианты, которые предобрабатывают селекторы, с возможностью перезаписи CSS-объекта.

extractors

• Тип: Extractor[]

Экстракторы для обработки исходного файла и вывода возможных классов/селекторов. Могут быть осведомлены о языке.

preflights

• Тип: Preflight<Theme>[]

Внедрения базового CSS.

layers

• Тип: Record<string, number>

Порядок слоев. По умолчанию 0.

outputToCssLayers

• Тип: boolean | UseCssLayersOptions
• По умолчанию: false

Выводит слои в CSS Cascade Layers.

cssLayerName

• Тип: (internalLayer: string) => string | undefined | null

Указывает имя CSS-слоя, в который должен быть выведен внутренний слой (может быть подслоем, например, "mylayer.mysublayer").

Если возвращается undefined, будет использоваться имя внутреннего слоя в качестве имени CSS-слоя. Если возвращается null, внутренний слой не будет выводиться в CSS-слой.

sortLayers

• Тип: (layers: string[]) => string[]

Пользовательская функция для сортировки слоев.

presets

• Тип: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

Предопределенные конфигурации для распространенных случаев использования.

transformers

• Тип: SourceCodeTransformer[]

Пользовательские трансформеры исходного кода.

blocklist

• Тип: BlocklistRule[]

Правила для исключения селекторов из вашей системы дизайна (для сужения возможностей). Комбинирование с опцией warnExcluded также может помочь выявить неправильные использования.

safelist

• Тип: string[]

Утилиты, которые всегда включаются.

preprocess

• Тип: Arrayable<Preprocessor>

Предобработка входящих утилит, возврат ложного значения исключает их.

postprocess

• Тип: Arrayable<Postprocessor>

Постобработка сгенерированного объекта утилит.

separators

• Тип: Arrayable<string>
• По умолчанию: [':', '-']

Разделитель варианта.

extractorDefault

• Тип: Extractor | null | false
• По умолчанию: import('@unocss/core').defaultExtractor

Экстрактор по умолчанию, который всегда применяется. По умолчанию разделяет исходный код по пробелам и кавычкам.

Может быть заменен пресетом или пользовательской конфигурацией, только один экстрактор по умолчанию может присутствовать, последующий перезаписывает предыдущий.

Передайте null или false для отключения экстрактора по умолчанию.

autocomplete

Дополнительные опции для автодополнения.

templates

• Тип: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Пользовательские функции/шаблоны для предоставления подсказок автодополнения.

extractors

• Тип: Arrayable<AutoCompleteExtractor>

Пользовательские экстракторы для сбора возможных классов и преобразования подсказок стиля имен классов в правильный формат.

shorthands

• Тип: Record<string, string | string[]>

Пользовательские сокращения для предоставления подсказок автодополнения. Если значения - массив, они будут объединены с | и обернуты в ().

content

Опции для источников, из которых извлекаются утилиты.

Поддерживаемые источники:

• filesystem - извлечение из файловой системы
• inline - извлечение из простого встроенного текста
• pipeline - извлечение из конвейера трансформации инструментов сборки, таких как Vite и Webpack

Извлеченное использование из каждого источника будет объединено.

filesystem

• Тип: string[]
• По умолчанию: []

Шаблоны glob для извлечения из файловой системы в дополнение к другим источникам контента.

В режиме разработки файлы будут отслеживаться и вызывать горячую перезагрузку.

inline

• Тип: string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []

Встроенный текст для извлечения.

pipeline

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

В настоящее время работает только для интеграций Vite и Webpack.

Установите false для отключения.

include

• Тип: FilterPattern
• По умолчанию: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

Шаблоны для фильтрации извлекаемых файлов. Поддерживает регулярные выражения и glob-шаблоны picomatch.

По умолчанию файлы .ts и .js НЕ извлекаются.

exclude

• Тип: FilterPattern
• По умолчанию: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

Шаблоны для фильтрации файлов, которые НЕ извлекаются. Поддерживает регулярные выражения и glob-шаблоны picomatch.

По умолчанию node_modules и dist также извлекаются.

configResolved

• Тип: (config: ResolvedConfig) => void

Хук для изменения разрешенной конфигурации.

Сначала выполняются пресеты, затем пользовательская конфигурация.

configFile

• Тип: string | false

Загрузка из файлов конфигурации.

Установите false для отключения.

configDeps

• Тип: string[]

Список файлов, которые также вызовут перезагрузку конфигурации.

cli

Опции CLI UnoCSS.

entry

• Тип: Arrayable<CliEntryItem>

Точки входа CLI UnoCSS.

patterns

• Тип: string[]

Шаблоны glob для извлечения из файловой системы.

outFile

• Тип: string

Путь к выходному файлу.

shortcutsLayer

• Тип: string
• По умолчанию: 'shortcuts'

Название слоя для сокращений.

envMode

• Тип: 'dev' | 'build'
• По умолчанию: 'build'

Режим окружения.

details

• Тип: boolean

Предоставление внутренних деталей для отладки и инспекции.

warn

• Тип: boolean
• По умолчанию: true

Выдавать предупреждения, когда найдены селекторы в списке блокировки.