UnoCSS Config

Konfigurácia

Konfigurácie sú tým, čo robí UnoCSS výkonným.

• Rules - Definovať atomické CSS utility
• Shortcuts - Skombinovať viacero pravidiel do jedného skratky.
• Theme - Definovať premenné témy.
• Variants - Aplikovať vlastné konvencie na pravidlá.
• Extractors - Definovať, kde a ako sa extrahuje použitie utilít.
• Preflights - Definovať globálne surové CSS.
• Layers - Definovať poradie každej vrstvy utilít.
• Presets - Preddefinované konfigurácie pre bežné prípady použitia.
• Transformers - Transformátory kódu na podporu konvencií v používateľskom zdrojovom kóde.
• Autocomplete - Definovať prispôsobené návrhy autocomplete.

Možnosti

rules

• Type: Rule<Theme>[]

Pravidlá na generovanie CSS utilít. Neskoršie položky majú vyššiu prioritu.

shortcuts

• Type: UserShortcuts<Theme>

Podobné ako Windi CSS shortcuts, umožňuje vám vytvoriť nové utility kombináciou existujúcich. Neskoršie položky majú vyššiu prioritu.

theme

• Type: Theme

Objekt témy pre zdieľanú konfiguráciu medzi pravidlami.

extendTheme

• Type: Arrayable<ThemeExtender<Theme>>

Vlastné funkcie, ktoré mutujú objekt témy.

Je tiež možné vrátiť nový objekt témy na úplné nahradenie pôvodného.

variants

• Type: Variant<Theme>[]

Varianty, ktoré predspracovávajú selektory a majú schopnosť prepísať CSS objekt.

extractors

• Type: Extractor[]

Extractory na spracovanie zdrojového súboru a výstup možných tried/selektorov. Môžu byť jazykovo špecifické.

preflights

• Type: Preflight<Theme>[]

Surové CSS injekcie.

layers

• Type: Record<string, number>

Poradie vrstiev. Predvolené na 0.

outputToCssLayers

• Type: boolean | UseCssLayersOptions
• Default: false

Výstup vrstiev do CSS Cascade Layers.

cssLayerName

• Type: (internalLayer: string) => string | undefined | null

Určuje názov CSS vrstvy, do ktorej sa má výstupovať interná vrstva (môže to byť podvrstva, napr. "mylayer.mysublayer").

Ak sa vráti undefined, názov internej vrstvy sa použije ako názov CSS vrstvy. Ak sa vráti null, interná vrstva sa nebude výstupovať do CSS vrstvy.

sortLayers

• Type: (layers: string[]) => string[]

Vlastná funkcia na zoradenie vrstiev.

presets

• Type: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

Preddefinované konfigurácie pre bežné prípady použitia.

transformers

• Type: SourceCodeTransformer[]

Vlastné transformátory pre zdrojový kód.

blocklist

• Type: BlocklistRule[]

Pravidlá na vylúčenie selektorov pre váš dizajnový systém (na zúženie možností). Kombinácia s možnosťou warnExcluded môže tiež pomôcť identifikovať nesprávne použitia.

safelist

• Type: string[]

Utility, ktoré sú vždy zahrnuté.

preprocess

• Type: Arrayable<Preprocessor>

Predspracovanie prichádzajúcich utilít, vráti nepravdivú hodnotu na vylúčenie.

postprocess

• Type: Arrayable<Postprocessor>

Postspracovanie generovaného objektu utilít.

separators

• Type: Arrayable<string>
• Default: [':', '-']

Oddeľovače variantov.

extractorDefault

• Type: Extractor | null | false
• Default: import('@unocss/core').defaultExtractor

Predvolený extractor, ktorý sa vždy aplikuje. Predvolene rozdeľuje zdrojový kód podľa whitespace a úvodzoviek.

Môže byť nahradený presetom alebo používateľskou konfiguráciou, môže byť prítomný iba jeden predvolený extractor, neskorší nahradí predchádzajúci.

Pre vypnutie predvoleného extractora prejdite na null alebo false.

autocomplete

Ďalšie možnosti pre autocomplete.

templates

• Type: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Vlastné funkcie / šablóny na poskytovanie návrhov autocomplete.

extractors

• Type: Arrayable<AutoCompleteExtractor>

Vlastné extractory na zachytenie možných tried a transformáciu návrhov v štýle class-name na správny formát.

shorthands

• Type: Record<string, string | string[]>

Vlastné skratky na poskytovanie návrhov autocomplete. Ak je hodnotou pole, bude spojená s | a zabalená do ().

content

Možnosti pre zdroje, ktoré sa majú extrahovať ako použitia utilít.

Podporované zdroje:

• filesystem - extrakcia z súborového systému
• inline - extrakcia z plain inline textu
• pipeline - extrakcia z pipeline transformácie build nástrojov, ako sú Vite a Webpack

Použitia extrahované z každého zdroja budú zlúčené spolu.

filesystem

• Type: string[]
• Default: []

Glob vzory na extrakciu zo súborového systému, okrem iných zdrojov obsahu.

V režime vývoja budú súbory sledované a spustia HMR.

inline

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

Inline text na extrakciu.

pipeline

Filtre na určenie, či extrahovať určité moduly z pipeline transformácie build nástrojov.

Momentálne funguje len pre integráciu Vite a Webpack.

Nastavte false na vypnutie.

include

• Type: FilterPattern
• Default: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

Vzory, ktoré filtrujú súbory, ktoré sa extrahujú. Podporuje regulárne výrazy a glob vzory picomatch.

Predvolene sa súbory .ts a .js NEextrahujú.

exclude

• Type: FilterPattern
• Default: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

Vzory, ktoré filtrujú súbory, ktoré sa NExtrahujú. Podporuje regulárne výrazy a glob vzory picomatch.

Predvolene sa node_modules a dist tiež extrahujú.

configResolved

• Type: (config: ResolvedConfig) => void

Hook na úpravu vyriešenej konfigurácie.

Najprv sa spustia presety a potom používateľská konfigurácia.

configFile

• Type: string | false

Načítať z konfiguračných súborov.

Nastavte false na vypnutie.

configDeps

• Type: string[]

Zoznam súborov, ktoré tiež spustia opätovné načítanie konfigurácie.

cli

Možnosti UnoCSS CLI.

entry

• Type: Arrayable<CliEntryItem>

Vstupné body UnoCSS cli.

patterns

• Type: string[]

Glob vzory na extrakciu zo súborového systému.

outFile

• Type: string

Cesta výstupného súboru.

shortcutsLayer

• Type: string
• Default: 'shortcuts'

Názov vrstvy pre skratky.

envMode

• Type: 'dev' | 'build'
• Default: 'build'

Režim prostredia.

details

• Type: boolean

Exponovať interné detaily pre ladenie / inšpekciu.

warn

• Type: boolean
• Default: true

Vydávať upozornenie, keď sa zhodujúce selektory nachádzajú v blockliste.