Konfigurera UnoCSS

Konfiguration

Konfigurationer är vad som gör UnoCSS kraftfullt.

• Rules - Definiera atomära CSS-verktyg
• Shortcuts - Kombinera flera regler till en enda genväg.
• Theme - Definiera tema-variabler.
• Variants - Tillämpa anpassade konventioner på regler.
• Extractors - Definiera var och hur användningen av verktyg extraheras.
• Preflights - Definiera global rå CSS.
• Layers - Definiera ordningen för varje verktygslager.
• Presets - Fördefinierade konfigurationer för vanliga användningsfall.
• Transformers - Kodtransformatorer för att stödja konventioner i användarens källkod.
• Autocomplete - Definiera anpassade autocomplete-förslag.

Alternativ

rules

• Typ: Rule<Theme>[]

Regler för att generera CSS-verktyg. Senare poster har högre prioritet.

shortcuts

• Typ: UserShortcuts<Theme>

Liknar Windi CSS:s genvägar, låter dig skapa nya verktyg genom att kombinera befintliga. Senare poster har högre prioritet.

theme

• Typ: Theme

Tema-objekt för delad konfiguration mellan regler.

extendTheme

• Typ: Arrayable<ThemeExtender<Theme>> Anpassade funktioner som muterar tema-objektet.

Det är också möjligt att returnera ett nytt tema-objekt för att helt ersätta det ursprungliga.

variants

• Typ: Variant<Theme>[]

Varianter som förbehandlar selektorerna och har förmågan att skriva om CSS-objektet.

extractors

• Typ: Extractor[]

Extraherare för att hantera källfilen och mata ut möjliga klasser/selektorer. Kan vara språkmedveten.

preflights

• Typ: Preflight<Theme>[]

Rå CSS-injektioner.

layers

• Typ: Record<string, number>

Lagerordningar. Standard är 0.

outputToCssLayers

• Typ: boolean | UseCssLayersOptions
• Standard: false

Matar ut lagren till CSS Cascade Layers.

cssLayerName

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

Anger namnet på CSS-lagret som det interna lagret ska matas ut till (kan vara ett underlager t.ex. "mylayer.mysublayer").

Om undefined returneras används det interna lagernamnet som CSS-lagernamn. Om null returneras matas inte det interna lagret ut till ett CSS-lager.

sortLayers

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

Anpassad funktion för att sortera lager.

presets

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

Fördefinierade konfigurationer för vanliga användningsfall.

transformers

• Typ: SourceCodeTransformer[]

Anpassade transformatorer för källkoden.

blocklist

• Typ: BlocklistRule[]

Regler för att exkludera selektorer för ditt designsystem (för att begränsa möjligheterna). Att kombinera med warnExcluded-alternativ kan också hjälpa dig att identifiera felaktig användning.

safelist

• Typ: string[]

Verktyg som alltid inkluderas.

preprocess

• Typ: Arrayable<Preprocessor>

Förbehandla de inkommande verktygen, returnera falskt värde för att exkludera.

postprocess

• Typ: Arrayable<Postprocessor>

Efterbehandla det genererade verktygsobjektet.

separators

• Typ: Arrayable<string>
• Standard: [':', '-']

Variant-separator.

extractorDefault

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

Standardextraherare som alltid tillämpas. Som standard delar den upp källkoden efter blanksteg och citattecken.

Den kan ersättas av preset eller användarkonfiguration, endast en standardextraherare kan finnas, senare kommer att ersätta den tidigare.

Skicka null eller false för att inaktivera standardextraheraren.

autocomplete

Ytterligare alternativ för auto-komplettering.

templates

• Typ: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Anpassade funktioner/mallar för att tillhandahålla autocomplete-förslag.

extractors

• Typ: Arrayable<AutoCompleteExtractor>

Anpassade extraherare för att plocka upp möjliga klasser och transformera class-name-stil förslag till korrekt format.

shorthands

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

Anpassade genvägar för att tillhandahålla autocomplete-förslag. Om värden är en array kommer de att sammanfogas med | och slås in med ().

content

Alternativ för källor som ska extraheras som verktygsanvändningar.

Källor som stöds:

• filesystem - extrahera från filsystemet
• inline - extrahera från vanlig inline-text
• pipeline - extrahera från byggverktygs transformeringspipeline, såsom Vite och Webpack

Användningen extraherad från varje källa kommer att slås samman.

filesystem

• Typ: string[]
• Standard: []

Glob-mönster för att extrahera från filsystemet, utöver andra innehållskällor.

I dev-läge kommer filerna att övervakas och utlösa HMR.

inline

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

Inline-text som ska extraheras.

pipeline

Filter för att bestämma om vissa moduler ska extraheras från byggverktygens transformeringspipeline.

Fungerar för närvarande endast för Vite och Webpack-integration.

Ställ in false för att inaktivera.

include

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

Mönster som filtrerar filer som extraheras. Stöder reguljära uttryck och picomatch glob-mönster.

Som standard extraheras INTE .ts och .js filer.

exclude

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

Mönster som filtrerar filer som INTE extraheras. Stöder reguljära uttryck och picomatch glob-mönster.

Som standard extraheras även node_modules och dist.

configResolved

• Typ: (config: ResolvedConfig) => void

Hook för att modifiera den lösta konfigurationen.

Först körs presets och sedan användarkonfigurationen.

configFile

• Typ: string | false

Ladda från konfigurationsfiler.

Ställ in false för att inaktivera.

configDeps

• Typ: string[]

Lista över filer som också kommer att utlösa konfigurationsomladdningar.

cli

UnoCSS CLI-alternativ.

entry

• Typ: Arrayable<CliEntryItem>

UnoCSS cli-ingångspunkter.

patterns

• Typ: string[]

Glob-mönster för att extrahera från filsystemet.

outFile

• Typ: string

Utdatafilens sökväg.

shortcutsLayer

• Typ: string
• Standard: 'shortcuts'

Layernamn för genvägar.

envMode

• Typ: 'dev' | 'build'
• Standard: 'build'

Miljöläge.

details

• Typ: boolean

Exponera interna detaljer för felsökning/inspektion.

warn

• Typ: boolean
• Standard: true

Emit varning när matchade selektorer presenteras i blocklist.