UnoCSS Config

Configuratie

Configuraties zijn wat UnoCSS krachtig maakt.

• Regels - Definieer atomaire CSS utilities
• Shortcuts - Combineer meerdere regels in een enkele shorthand.
• Thema - Definieer thema variabelen.
• Varianten - Pas aangepaste conventies toe op regels.
• Extractors - Definieer waar en hoe het gebruik van utilities wordt geëxtraheerd.
• Preflights - Definieer globale ruwe CSS.
• Lagen - Definieer de volgorde van elke utility laag.
• Presets - Vooraf gedefinieerde configuraties voor veelvoorkomende use cases.
• Transformers - Code transformers om broncode te converteren om conventies te ondersteunen.
• Autocomplete - Definieer aangepaste autocomplete suggesties.

Opties

rules

• Type: Rule<Theme>[]

Regels om CSS utilities te genereren. Latere vermeldingen hebben hogere prioriteit.

shortcuts

• Type: UserShortcuts<Theme>

Vergelijkbaar met Windi CSS's shortcuts, stelt je in staat om nieuwe utilities te maken door bestaande te combineren. Latere vermeldingen hebben hogere prioriteit.

theme

• Type: Theme

Thema object voor gedeelde configuratie tussen regels.

extendTheme

• Type: Arrayable<ThemeExtender<Theme>> Aangepaste functies die het thema object muteren.

Het is ook mogelijk om een nieuw thema object te retourneren om het originele volledig te vervangen.

varianten

• Type: Variant<Theme>[]

Varianten die de selectors voorverwerken, met de mogelijkheid om het CSS object te herschrijven.

extractors

• Type: Extractor[]

Extractors om het bronbestand te verwerken en mogelijke classes/selectors uit te voeren. Kan taalbewust zijn.

preflights

• Type: Preflight<Theme>[]

Ruwe CSS injecties.

layers

• Type: Record<string, number>

Laagvolgorde. Standaard ingesteld op 0.

outputToCssLayers

• Type: boolean | UseCssLayersOptions
• Standaard: false

Voert de lagen uit naar CSS Cascade Layers.

cssLayerName

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

Specificeert de naam van de CSS laag waarnaar de interne laag moet worden uitgevoerd (kan een sublaag zijn bijv. "mylayer.mysublayer").

Als undefined wordt geretourneerd, wordt de interne laagnaam gebruikt als de CSS laagnaam. Als null wordt geretourneerd, wordt de interne laag niet uitgevoerd naar een CSS laag.

sortLayers

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

Aangepaste functie om lagen te sorteren.

presets

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

Vooraf gedefinieerde configuraties voor veelvoorkomende use cases.

transformers

• Type: SourceCodeTransformer[]

Aangepaste transformers naar de broncode.

blocklist

• Type: BlocklistRule[]

Regels om de selectors voor uw ontwerpsysteem uit te sluiten (om de mogelijkheden te beperken). Het combineren van warnExcluded opties kan u ook helpen om verkeerd gebruik te identificeren.

safelist

• Type: string[]

Utilities die altijd worden opgenomen.

preprocess

• Type: Arrayable<Preprocessor>

Preprocess de binnenkomende utilities, retourneer een falsy waarde om uit te sluiten.

postprocess

• Type: Arrayable<Postprocessor>

Postprocess het gegenereerde utils object.

separators

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

Variant scheidingsteken.

extractorDefault

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

Standaard extractor die altijd wordt toegepast. Standaard splitst het de broncode door witruimte en aanhalingstekens.

Het kan worden vervangen door preset of gebruiker config, slechts één standaard extractor kan aanwezig zijn, latere zal de vorige overschrijven.

Geef null of false door om de standaard extractor uit te schakelen.

autocomplete

Aanvullende opties voor auto aanvullen.

templates

• Type: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Aangepaste functies / templates om autocomplete suggesties te bieden.

extractors

• Type: Arrayable<AutoCompleteExtractor>

Aangepaste extractors om mogelijke classes op te pikken en class-name stijl suggesties te transformeren naar het juiste formaat.

shorthands

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

Aangepaste shorthands om autocomplete suggesties te bieden. als waarde een array is, wordt het samengevoegd met | en gewrapped met ().

content

Opties voor bronnen om te worden geëxtraheerd als utilities gebruik.

Ondersteunde bronnen:

• filesystem - extraheer uit bestandssysteem
• inline - extraheer uit platte inline tekst
• pipeline - extraheer uit transformatie pipeline van build tools, zoals Vite en Webpack

Het gebruik dat uit elke bron wordt geëxtraheerd wordt samengevoegd samen.

filesystem

• Type: string[]
• Standaard: []

Glob patronen om te extraheren uit het bestandssysteem, naast andere content bronnen.

In dev mode, worden de bestanden bekeken en trigger HMR.

inline

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

Inline tekst die moet worden geëxtraheerd.

pipeline

• Type: boolean | PipelineFilter
• Standaard: true

Probeer automatisch te detecteren of het project in een ondersteunde pipeline is. Als alternatief kunt u een filterfunctie doorgeven om te bepalen of de huidige pipeline moet worden gebruikt.

Stel in als false om de pipeline extractie uit te schakelen, zelfs als deze wordt gedetecteerd.

include

• Type: string[]
• Standaard: []

Aanvullende bronnen om op te nemen, naast de standaard bronnen.

exclude

• Type: string[]
• Standaard: []

Glob patronen om uit te sluiten van extractie.

transform

• Type: (code: string, id: string) => Awaitable<string>

Functie om de code te transformeren voordat deze wordt geëxtraheerd.

reset

• Type: Symbol | false
• Standaard: Symbol('reset')

Reset factory voor thema. Stel in als false om uit te schakelen.

inspectors

• Type: Inspector[]

Inspectors om gegenereerde CSS te debuggen.

watch

• Type: AsyncGenerator | false

Aangepaste generator om bestandswijzigingen te detecteren.

presetPrefix

• Type: string
• Standaard: 'uno-'

Voorvoegsel voor preset namen.

theme

U kunt het thema uitbreiden met behulp van extendTheme.

export default defineConfig({
  theme: {
    colors: {
      myColor: 'blue',
    },
  },
  extendTheme: (theme) => {
    theme.colors.myColor // 'blue'
    return theme
  },
})

Configuratie Laden

Configuratiebestand

UnoCSS zal automatisch zoeken naar configuratiebestanden in de wortel van uw project met de volgende namen:

• unocss.config.ts
• unocss.config.js
• unocss.config.mjs
• unocss.config.mts
• uno.config.ts
• uno.config.js
• uno.config.mjs
• uno.config.mts

U kunt ook een specifiek pad opgeven met de --config / -c vlag:

unocss --config ./my/config.ts

Configuratie in Package

Het is ook mogelijk om uw configuratie te definiëren in package.json onder de unocss sleutel:

{
  "unocss": {
    "rules": [
      ["m-1", { "margin": "1px" }]
    ]
  }
}

Programmatische Configuratie

U kunt de defineConfig helper gebruiken om typeveiligheid te krijgen:

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

Asynchrone Configuratie

Async config wordt ondersteund:

import { defineConfig } from 'unocss'

export default defineConfig(async () => {
  const remotelyFetchedRules = await fetch('...')
  return {
    rules: remotelyFetchedRules
  }
})

Configuratie Valideren

Als de configuratie ongeldig is, zal UnoCSS een informative foutmelding geven om u te helpen de fout op te sporen:

Error: Invalid configuration

> Unexpected key 'ruls' in uno.config.ts

  Did you mean 'rules'?

Modulaire Configuratie

U kunt uw configuratie opsplitsen in modules en deze importeren in uw hoofdbestand:

// uno.config.ts
import { defineConfig } from 'unocss'
import shortcut from './shortcuts.config'
import preset from './presets.config'

export default defineConfig({
  shortcuts,
  presets: [
    preset(),
  ],
})

U kunt ook presets van npm packages importeren:

import { defineConfig } from 'unocss'
import PresetUno from '@unocss/preset-mini'
import PresetWebFonts from '@unocss/preset-web-fonts'

export default defineConfig({
  presets: [
    PresetUno(),
    PresetWebFonts(),
  ],
})

Modus

Configuratie Modus

Standaard werkt UnoCSS in de "configuratie" modus. In deze modus definieert u uw utilities, shortcuts, thema's en presets in het configuratiebestand.

Runtime Modus

UnoCSS ondersteunt ook de "runtime" modus, waarbij u utilities dynamisch kunt genereren tijdens het renderen van de pagina. Dit is handig wanneer u geen build-time generatie wilt, maar wel wilt profiteren van UnoCSS's arbritary value support.

Zie de runtime integratie voor meer informatie.

Gedeelde Configuratie

Als u gedeelde configuratie tussen uw projecten wilt hergebruiken, kunt u een npm package maken met uw aangepaste preset.

// packages/my-preset/src/index.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['my-text', { color: 'red' }],
  ],
})

En publiceer naar npm. Gebruik het dan in uw project:

// uno.config.ts
import { defineConfig } from 'unocss'
import presetMy from 'my-unocss-preset'

export default defineConfig({
  presets: [
    presetMy(),
  ],
})