Configurazione di UnoCSS

Configurazione

Le configurazioni sono ciò che rende UnoCSS potente.

• Regole - Definisci utility CSS atomiche
• Scorciatoie - Combina più regole in una singola scorciatoia.
• Tema - Definisci variabili del tema.
• Varianti - Applica convenzioni personalizzate alle regole.
• Estrattori - Definisci dove e come vengono estratti gli utilizzi delle utility.
• Preflights - Definisci CSS raw globale.
• Livelli - Definisci l'ordine di ogni livello di utility.
• Preset - Configurazioni predefinite per casi d'uso comuni.
• Trasformatori - Trasformatori di codice per il codice sorgente dell'utente per supportare convenzioni.
• Autocompletamento - Definisci suggerimenti di autocompletamento personalizzati.

Opzioni

rules

• Tipo: Rule<Theme>[]

Regole per generare utility CSS. Le voci successive hanno priorità più alta.

shortcuts

• Tipo: UserShortcuts<Theme>

Simile alle scorciatoie di Windi CSS, ti permette di creare nuove utility combinando quelle esistenti. Le voci successive hanno priorità più alta.

theme

• Tipo: Theme

Oggetto tema per la configurazione condivisa tra le regole.

extendTheme

• Tipo: Arrayable<ThemeExtender<Theme>> Funzioni personalizzate che mutano l'oggetto tema.

È anche possibile restituire un nuovo oggetto tema per sostituire completamente quello originale.

variants

• Tipo: Variant<Theme>[]

Varianti che preprocessano i selettori, con la capacità di riscrivere l'oggetto CSS.

extractors

• Tipo: Extractor[]

Estrattori per gestire il file sorgente e produrre possibili classi/selettori. Può essere consapevole del linguaggio.

preflights

• Tipo: Preflight<Theme>[]

Iniezioni CSS raw.

layers

• Tipo: Record<string, number>

Ordini dei livelli. Predefinito a 0.

outputToCssLayers

• Tipo: boolean | UseCssLayersOptions
• Predefinito: false

Emette i livelli a CSS Cascade Layers.

cssLayerName

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

Specifica il nome del livello CSS a cui il livello interno dovrebbe essere emesso (può essere un sottolivello, ad esempio "mylayer.mysublayer").

Se viene restituito undefined, il nome del livello interno verrà usato come nome del livello CSS. Se viene restituito null, il livello interno non verrà emesso a un livello CSS.

sortLayers

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

Funzione personalizzata per ordinare i livelli.

presets

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

Configurazioni predefinite per casi d'uso comuni.

transformers

• Tipo: SourceCodeTransformer[]

Trasformatori personalizzati per il codice sorgente.

blocklist

• Tipo: BlocklistRule[]

Regole per escludere i selettori per il tuo sistema di design (per restringere le possibilità). Combinare le opzioni warnExcluded può anche aiutarti a identificare utilizzi errati.

safelist

• Tipo: string[]

Utility che sono sempre incluse.

preprocess

• Tipo: Arrayable<Preprocessor>

Preprocessa le utility in arrivo, restituisci un valore falsy per escludere.

postprocess

• Tipo: Arrayable<Postprocessor>

Postprocessa l'oggetto utils generato.

separators

• Tipo: Arrayable<string>
• Predefinito: [':', '-']

Separatore di varianti.

extractorDefault

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

Estrattore predefinito che viene sempre applicato. Per impostazione predefinita divide il codice sorgente per spazi bianchi e virgolette.

Può essere sostituito da preset o configurazione utente, solo un estrattore predefinito può essere presente, quello successivo sovrascriverà quello precedente.

Passa null o false per disabilitare l'estrattore predefinito.

autocomplete

Opzioni aggiuntive per l'autocompletamento.

templates

• Tipo: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Funzioni / template personalizzati per fornire suggerimenti di autocompletamento.

extractors

• Tipo: Arrayable<AutoCompleteExtractor>

Estrattori personalizzati per raccogliere possibili classi e trasformare i suggerimenti di stile nome-classe nel formato corretto.

shorthands

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

Scorciatoie personalizzate per fornire suggerimenti di autocompletamento. Se i valori sono un array, verranno uniti con | e avvolti con ().

content

Opzioni per le sorgenti da estrarre come utilizzi delle utility.

Sorgenti supportate:

• filesystem - estrai dal file system
• inline - estrai da testo inline semplice
• pipeline - estrai dalla pipeline di trasformazione degli strumenti di build, come Vite e Webpack

L'utilizzo estratto da ogni sorgente verrà unito insieme.

filesystem

• Tipo: string[]
• Predefinito: []

Pattern glob per estrarre dal file system, in aggiunta ad altre sorgenti di contenuto.

In modalità dev, i file verranno monitorati e attiveranno HMR.

inline

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

Testo inline da estrarre.

pipeline

Filtri per determinare se estrarre determinati moduli dalla pipeline di trasformazione degli strumenti di build.

Attualmente funziona solo per l'integrazione Vite e Webpack.

Imposta false per disabilitare.

include

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

Pattern che filtrano i file da estrarre. Supporta espressioni regolari e pattern glob picomatch.

Per impostazione predefinita, i file .ts e .js NON vengono estratti.

exclude

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

Pattern che filtrano i file da NON estrarre. Supporta espressioni regolari e pattern glob picomatch.

Per impostazione predefinita, anche node_modules e dist vengono estratti.

configResolved

• Tipo: (config: ResolvedConfig) => void

Hook per modificare la configurazione risolta.

Prima vengono eseguiti i preset e poi la configurazione utente.

configFile

• Tipo: string | false

Carica dai file di configurazione.

Imposta false per disabilitare.

configDeps

• Tipo: string[]

Elenco di file che attiveranno anche il ricaricamento della configurazione.

cli

Opzioni CLI di UnoCSS.

entry

• Tipo: Arrayable<CliEntryItem>

Punti di ingresso CLI di UnoCSS.

patterns

• Tipo: string[]

Pattern glob per estrarre dal file system.

outFile

• Tipo: string

Percorso del file di output.

shortcutsLayer

• Tipo: string
• Predefinito: 'shortcuts'

Nome del layout delle scorciatoie.

envMode

• Tipo: 'dev' | 'build'
• Predefinito: 'build'

Modalità ambiente.

details

• Tipo: boolean

Esponi dettagli interni per il debug / l'ispezione.

warn

• Tipo: boolean
• Predefinito: true

Emette un avviso quando i selettori corrispondenti sono presenti nella blocklist.