Configurare UnoCSS

Configurare

Configurările sunt cele care fac UnoCSS puternic.

• Reguli - Definirea utilităților CSS atomice
• Prescurtări - Combinarea mai multor reguli într-o singură prescurtare.
• Temă - Definirea variabilelor temei.
• Variante - Aplicarea convențiilor personalizate la reguli.
• Extractori - Definirea unde și cum este extrasă utilizarea utilităților.
• Preflăți - Definirea CSS-ului brut global.
• Straturi - Definirea ordinii fiecărui strat de utilități.
• Presets - Configurări predefinite pentru cazuri de utilizare comune.
• Transformatori - Transformatori de cod pentru a suporta convenții.
• Autocompletare - Definirea sugestiilor de autocompletare personalizate.

Opțiuni

rules

• Tip: Rule<Theme>[]

Reguli pentru a genera utilități CSS. Intrările ulterioare au prioritate mai mare.

shortcuts

• Tip: UserShortcuts<Theme>

Similare cu prescurtările din Windi CSS, vă permite să creați noi utilități combinându-le pe cele existente. Intrările ulterioare au prioritate mai mare.

theme

• Tip: Theme

Obiectul temei pentru configurare partajată între reguli.

extendTheme

• Tip: Arrayable<ThemeExtender<Theme>> Funcții personalizate care mută obiectul temei.

De asemenea, este posibil să returnați un nou obiect temă pentru a înlocui complet originalul.

variants

• Tip: Variant<Theme>[]

Variante care preprocesează selectorii, având capacitatea de a rescrie obiectul CSS.

extractors

• Tip: Extractor[]

Extractori pentru a gestiona fișierul sursă și a genera posibile clase/selectoare. Poate fi conștient de limbaj.

preflights

• Tip: Preflight<Theme>[]

Injecții CSS brute.

layers

• Tip: Record<string, number>

Ordinea straturilor. Implicit 0.

outputToCssLayers

• Tip: boolean | UseCssLayersOptions
• Implicit: false

Generează straturile în Cascade Layers CSS.

cssLayerName

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

Specifică numele stratului CSS în care stratul intern ar trebui generat (poate fi un substrat, de exemplu "mylayer.mysublayer").

Dacă se returnează undefined, numele stratului intern va fi folosit ca nume strat CSS. Dacă se returnează null, stratul intern nu va fi generat într-un strat CSS.

sortLayers

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

Funcție personalizată pentru sortarea straturilor.

presets

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

Configurări predefinite pentru cazuri de utilizare comune.

transformers

• Tip: SourceCodeTransformer[]

Transformatori personalizați pentru codul sursă.

blocklist

• Tip: BlocklistRule[]

Reguli pentru a exclude selectorii din sistemul de design (pentru a restrânge posibilitățile). Combinarea opțiunilor warnExcluded vă poate ajuta să identificați utilizările greșite.

safelist

• Tip: string[]

Utilități care sunt întotdeauna incluse.

preprocess

• Tip: Arrayable<Preprocessor>

Preprocesează utilitățile primite, returnează o valoare falsă pentru a exclude.

postprocess

• Tip: Arrayable<Postprocessor>

Postprocesează obiectul utilităților generate.

separators

• Tip: Arrayable<string>
• Implicit: [':', '-']

Separatorul variantelor.

extractorDefault

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

Extractorul implicit care este întotdeauna aplicat. În mod implicit, împarte codul sursă prin spații și ghilimele.

Poate fi înlocuit de preset sau configurarea utilizatorului, doar un singur extractor implicit poate fi prezent, cel ulterior va suprascrie pe cel anterior.

Pass null sau false pentru a dezactiva extractorul implicit.

autocomplete

Opțiuni suplimentare pentru autocompletare.

templates

• Tip: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Funcții / șabloane personalizate pentru a furniza sugestii de autocompletare.

extractors

• Tip: Arrayable<AutoCompleteExtractor>

Extractori personalizați pentru a prelua posibile clase și a transforma sugestiile de tip nume-clasă în formatul corect.

shorthands

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

Prescurtări personalizate pentru a furniza sugestii de autocompletare. Dacă valorile sunt un array, vor fi unite cu | și înfășurate cu ().

content

Opțiuni pentru sursele care trebuie extrase ca utilizări de utilități.

Surse suportate:

• filesystem - extrage din sistemul de fișiere
• inline - extrage din text inline simplu
• pipeline - extrage din pipeline-ul de transformare al instrumentelor de build, cum ar fi Vite și Webpack

Utilizarea extrasă din fiecare sursă va fi combinată împreună.

filesystem

• Tip: string[]
• Implicit: []

Modele glob pentru a extrage din sistemul de fișiere, pe lângă alte surse de conținut.

În modul dev, fișierele vor fi monitorizate și vor declanșa HMR.

inline

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

Text inline care trebuie extras.

pipeline

Filtre pentru a determina dacă să extragă anumite module din pipeline-ul de transformare al instrumentelor de build.

Funcționează momentan doar pentru integrarea Vite și Webpack.

Setează false pentru a dezactiva.

include

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

Modele care filtrează fișierele extrase. Suportă expresii regulate și modele glob picomatch.

În mod implicit, fișierele .ts și .js NU sunt extrase.

exclude

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

Modele care filtrează fișierele care NU sunt extrase. Suportă expresii regulate și modele glob picomatch.

În mod implicit, node_modules și dist sunt de asemenea extrase.

configResolved

• Tip: (config: ResolvedConfig) => void

Hook pentru a modifica configurarea rezolvată.

Mai întâi rulează preseturile, apoi configurarea utilizatorului.

configFile

• Tip: string | false

Încarcă din fișiere de configurare.

Setează false pentru a dezactiva.

configDeps

• Tip: string[]

Lista fișierelor care vor declanșa și reîncărcări ale configurării.

cli

Opțiuni pentru UnoCSS CLI.

entry

• Tip: Arrayable<CliEntryItem>

Puncte de intrare pentru UnoCSS cli.

patterns

• Tip: string[]

Modele glob pentru a extrage din sistemul de fișiere.

outFile

• Tip: string

Calea fișierului de ieșire.

shortcutsLayer

• Tip: string
• Implicit: 'shortcuts'

Numele stratului pentru prescurtări.

envMode

• Tip: 'dev' | 'build'
• Implicit: 'build'

Modul de mediu.

details

• Tip: boolean

Expune detaliile interne pentru debugging / inspectare.

warn

• Tip: boolean
• Implicit: true

Emite un avertisment când selectorii potriviți sunt prezenți în blocklist.