Configurando UnoCSS

Configuración

Las configuraciones son lo que hace poderoso a UnoCSS.

• Reglas - Define utilidades CSS atómicas
• Atajos - Combina múltiples reglas en una sola abreviatura.
• Tema - Define variables de tema.
• Variantes - Aplica convenciones personalizadas a las reglas.
• Extractores - Define dónde y cómo se extrae el uso de utilidades.
• Preflights - Define CSS sin procesar global.
• Capas - Define el orden de cada capa de utilidades.
• Presets - Configuraciones predefinidas para casos de uso comunes.
• Transformadores - Transformadores de código para el código fuente del usuario para soportar convenciones.
• Autocompletado - Define sugerencias de autocompletado personalizadas.

Opciones

rules

• Tipo: Rule<Theme>[]

Reglas para generar utilidades CSS. Las entradas posteriores tienen mayor prioridad.

shortcuts

• Tipo: UserShortcuts<Theme>

Similar a los atajos de Windi CSS, te permite crear nuevas utilidades combinando las existentes. Las entradas posteriores tienen mayor prioridad.

theme

• Tipo: Theme

Objeto de tema para configuración compartida entre reglas.

extendTheme

• Tipo: Arrayable<ThemeExtender<Theme>> Las funciones personalizadas mutan el objeto de tema.

También es posible devolver un nuevo objeto de tema para reemplazar completamente el original.

variants

• Tipo: Variant<Theme>[]

Variantes que preprocesan los selectores, teniendo la capacidad de reescribir el objeto CSS.

extractors

• Tipo: Extractor[]

Extractores para manejar el archivo fuente y generar posibles clases/selectores. Pueden ser conscientes del lenguaje.

preflights

• Tipo: Preflight<Theme>[]

Inyecciones de CSS sin procesar.

layers

• Tipo: Record<string, number>

Órdenes de capas. Por defecto 0.

outputToCssLayers

• Tipo: boolean | UseCssLayersOptions
• Por defecto: false

Genera las capas a Capas CSS Cascade.

cssLayerName

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

Especifica el nombre de la capa CSS a la que se debe generar la capa interna (puede ser una subcapa ej. "mylayer.mysublayer").

Si se devuelve undefined, se usará el nombre de la capa interna como el nombre de la capa CSS. Si se devuelve null, la capa interna no se generará a una capa CSS.

sortLayers

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

Función personalizada para ordenar capas.

presets

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

Configuraciones predefinidas para casos de uso comunes.

transformers

• Tipo: SourceCodeTransformer[]

Transformadores personalizados al código fuente.

blocklist

• Tipo: BlocklistRule[]

Reglas para excluir los selectores para tu sistema de diseño (para reducir las posibilidades). Combinar opciones warnExcluded también puede ayudarte a identificar usos incorrectos.

safelist

• Tipo: string[]

Utilidades que siempre se incluyen.

preprocess

• Tipo: Arrayable<Preprocessor>

Preprocesa las utilidades entrantes, devuelve valor falso para excluir.

postprocess

• Tipo: Arrayable<Postprocessor>

Postprocesa el objeto de utilidades generado.

separators

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

Separador de variantes.

extractorDefault

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

Extractor por defecto que siempre se aplica. Por defecto divide el código fuente por espacios en blanco y comillas.

Puede ser reemplazado por preset o configuración de usuario, solo un extractor por defecto puede estar presente, el posterior sobrescribirá el anterior.

Pasa null o false para deshabilitar el extractor por defecto.

autocomplete

Opciones adicionales para autocompletado.

templates

• Tipo: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Funciones / plantillas personalizadas para proporcionar sugerencias de autocompletado.

extractors

• Tipo: Arrayable<AutoCompleteExtractor>

Extractores personalizados para recoger posibles clases y transformar sugerencias de estilo de nombre de clase al formato correcto.

shorthands

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

Abreviaturas personalizadas para proporcionar sugerencias de autocompletado. si los valores son un array, se unirán con | y se envolverán con ().

content

Opciones para fuentes que se extraerán como usos de utilidades.

Fuentes soportadas:

• filesystem - extraer del sistema de archivos
• inline - extraer de texto en línea plano
• pipeline - extraer de la tubería de transformación de herramientas de construcción, como Vite y Webpack

El uso extraído de cada fuente se fusionará junto.

filesystem

• Tipo: string[]
• Por defecto: []

Patrones glob para extraer del sistema de archivos, además de otras fuentes de contenido.

En modo dev, los archivos serán observados y activarán HMR.

inline

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

Texto en línea para extraer.

pipeline

Filtros para determinar si extraer ciertos módulos de la tubería de transformación de herramientas de construcción.

Actualmente solo funciona para integración de Vite y Webpack.

Establece false para deshabilitar.

include

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

Patrones que filtran los archivos que se están extrayendo. Soporta expresiones regulares y patrones glob picomatch.

Por defecto, los archivos .ts y .js NO se extraen.

exclude

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

Patrones que filtran los archivos que NO se extraen. Soporta expresiones regulares y patrones glob picomatch.

Por defecto, node_modules y dist también se extraen.

configResolved

• Tipo: (config: ResolvedConfig) => void

Hook para modificar la configuración resuelta.

Primero se ejecutan los presets y luego la configuración del usuario.

configFile

• Tipo: string | false

Cargar desde archivos de configuración.

Establece false para deshabilitar.

configDeps

• Tipo: string[]

Lista de archivos que también activarán recargas de configuración.

cli

Opciones de CLI de UnoCSS.

entry

• Tipo: Arrayable<CliEntryItem>

Puntos de entrada CLI de UnoCSS.

patterns

• Tipo: string[]

Patrones glob para extraer del sistema de archivos.

outFile

• Tipo: string

Ruta del archivo de salida.

shortcutsLayer

• Tipo: string
• Por defecto: 'shortcuts'

Nombre de capa de atajos.

envMode

• Tipo: 'dev' | 'build'
• Por defecto: 'build'

Modo de entorno.

details

• Tipo: boolean

Exponer detalles internos para depuración / inspección.

warn

• Tipo: boolean
• Por defecto: true

Emitir advertencia cuando los selectores coincidentes están presentes en la lista de bloqueo.