Configuration d'UnoCSS

Configuration

Les configurations sont ce qui rend UnoCSS puissant.

• Règles - Définir les utilitaires CSS atomiques
• Raccourcis - Combiner plusieurs règles en un seul raccourci.
• Thème - Définir les variables de thème.
• Variantes - Appliquer des conventions personnalisées aux règles.
• Extracteurs - Définir où et comment l'utilisation des utilitaires est extraite.
• Preflights - Définir le CSS brut global.
• Couches - Définir l'ordre de chaque couche d'utilitaires.
• Presets - Configurations prédéfinies pour les cas d'usage courants.
• Transformateurs - Transformateurs de code pour les sources utilisateur afin de supporter les conventions.
• Autocomplétion - Définir des suggestions d'autocomplétion personnalisées.

Options

rules

• Type: Rule<Theme>[]

Règles pour générer les utilitaires CSS. Les entrées ultérieures ont une priorité plus élevée.

shortcuts

• Type: UserShortcuts<Theme>

Similaire aux raccourcis de Windi CSS, permet de créer de nouveaux utilitaires en combinant ceux existants. Les entrées ultérieures ont une priorité plus élevée.

theme

• Type: Theme

Objet de thème pour la configuration partagée entre les règles.

extendTheme

• Type: Arrayable<ThemeExtender<Theme>> Fonctions personnalisées qui modifient l'objet de thème.

Il est également possible de retourner un nouvel objet de thème pour remplacer complètement l'original.

variants

• Type: Variant<Theme>[]

Variantes qui prétraitent les sélecteurs, ayant la capacité de réécrire l'objet CSS.

extractors

• Type: Extractor[]

Extracteurs pour gérer le fichier source et sortir les classes/sélecteurs possibles. Peut être conscient du langage.

preflights

• Type: Preflight<Theme>[]

Injections CSS brutes.

layers

• Type: Record<string, number>

Ordre des couches. Par défaut à 0.

outputToCssLayers

• Type: boolean | UseCssLayersOptions
• Défaut: false

Sort les couches vers les couches CSS Cascade.

cssLayerName

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

Spécifie le nom de la couche CSS vers laquelle la couche interne doit être sortie (peut être une sous-couche, par exemple "mylayer.mysublayer").

Si undefined est retourné, le nom de la couche interne sera utilisé comme nom de la couche CSS. Si null est retourné, la couche interne ne sera pas sortie vers une couche CSS.

sortLayers

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

Fonction personnalisée pour trier les couches.

presets

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

Configurations prédéfinies pour les cas d'usage courants.

transformers

• Type: SourceCodeTransformer[]

Transformateurs personnalisés pour le code source.

blocklist

• Type: BlocklistRule[]

Règles pour exclure les sélecteurs de votre système de design (pour réduire les possibilités). Combiner avec les options warnExcluded peut aussi vous aider à identifier les mauvaises utilisations.

safelist

• Type: string[]

Utilitaires qui sont toujours inclus.

preprocess

• Type: Arrayable<Preprocessor>

Prétraiter les utilitaires entrants, retourner une valeur falsy pour exclure.

postprocess

• Type: Arrayable<Postprocessor>

Post-traiter l'objet utils généré.

separators

• Type: Arrayable<string>
• Défaut: [':', '-']

Séparateur de variante.

extractorDefault

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

Extracteur par défaut qui est toujours appliqué. Par défaut, il divise le code source par les espaces et les guillemets.

Il peut être remplacé par un preset ou une config utilisateur, un seul extracteur par défaut peut être présenté, le dernier remplacera le précédent.

Passez null ou false pour désactiver l'extracteur par défaut.

autocomplete

Options supplémentaires pour l'autocomplétion.

templates

• Type: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Fonctions/templates personnalisés pour fournir des suggestions d'autocomplétion.

extractors

• Type: Arrayable<AutoCompleteExtractor>

Extracteurs personnalisés pour récupérer les classes possibles et transformer les suggestions de style de nom de classe au format correct.

shorthands

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

Raccourcis personnalisés pour fournir des suggestions d'autocomplétion. Si les valeurs sont un tableau, elles seront jointes avec | et enveloppées avec ().

content

Options pour les sources à extraire comme utilisations d'utilitaires.

Sources supportées :

• filesystem - extraire depuis le système de fichiers
• inline - extraire depuis du texte brut en ligne
• pipeline - extraire depuis le pipeline de transformation des outils de build, comme Vite et Webpack

L'utilisation extraite de chaque source sera fusionnée ensemble.

filesystem

• Type: string[]
• Défaut: []

Patterns glob pour extraire depuis le système de fichiers, en plus des autres sources de contenu.

En mode dev, les fichiers seront surveillés et déclencheront le HMR.

inline

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

Texte en ligne à extraire.

pipeline

Filtres pour déterminer s'il faut extraire certains modules du pipeline de transformation des outils de build.

Ne fonctionne actuellement que pour l'intégration Vite et Webpack.

Définir false pour désactiver.

include

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

Patterns qui filtrent les fichiers en cours d'extraction. Supporte les expressions régulières et les patterns glob picomatch.

Par défaut, les fichiers .ts et .js ne sont PAS extraits.

exclude

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

Patterns qui filtrent les fichiers NON extraits. Supporte les expressions régulières et les patterns glob picomatch.

Par défaut, node_modules et dist sont aussi extraits.

configResolved

• Type: (config: ResolvedConfig) => void

Hook pour modifier la config résolue.

Les premiers presets s'exécutent en premier et la config utilisateur.

configFile

• Type: string | false

Charger depuis les fichiers de config.

Définir false pour désactiver.

configDeps

• Type: string[]

Liste des fichiers qui déclencheront aussi les rechargements de config.

cli

Options CLI UnoCSS.

entry

• Type: Arrayable<CliEntryItem>

Points d'entrée CLI UnoCSS.

patterns

• Type: string[]

Patterns glob pour extraire depuis le système de fichiers.

outFile

• Type: string

Chemin du fichier de sortie.

shortcutsLayer

• Type: string
• Défaut: 'shortcuts'

Nom de couche des raccourcis.

envMode

• Type: 'dev' | 'build'
• Défaut: 'build'

Mode d'environnement.

details

• Type: boolean

Exposer les détails internes pour le débogage/inspection.

warn

• Type: boolean
• Défaut: true

Émettre un avertissement quand les sélecteurs correspondants sont présents dans la blocklist.