Configurando UnoCSS

Configuração

Configurações são o que tornam o UnoCSS poderoso.

• Regras - Definir utilitários de CSS atômico
• Atalhos - Combinar múltiplas regras em um único atalho.
• Tema - Definir variáveis de tema.
• Variantes - Aplicar convenções personalizadas às regras.
• Extratores - Definir onde e como os usos de utilitários são extraídos.
• Preflights - Definir CSS global bruto.
• Camadas - Definir a ordem de cada camada de utilitários.
• Predefinições - Configurações predefinidas para casos de uso comuns.
• Transformadores - Transformadores de código para código-fonte do usuário para suportar convenções.
• Autocompletar - Definir sugestões de autocompletar personalizadas.

Opções

rules

• Tipo: Rule<Theme>[]

Regras para gerar utilitários CSS. Entradas posteriores têm maior prioridade.

shortcuts

• Tipo: UserShortcuts<Theme>

Semelhante aos atalhos do Windi CSS, permite criar novos utilitários combinando os existentes. Entradas posteriores têm maior prioridade.

theme

• Tipo: Theme

Objeto de tema para configuração compartilhada entre regras.

extendTheme

• Tipo: Arrayable<ThemeExtender<Theme>> Funções personalizadas que mutam o objeto de tema.

Também é possível retornar um novo objeto de tema para substituir completamente o original.

variants

• Tipo: Variant<Theme>[]

Variantes que pré-processam os seletores, com a capacidade de reescrever o objeto CSS.

extractors

• Tipo: Extractor[]

Extratores para lidar com o arquivo de origem e gerar classes/seletores possíveis. Pode ser consciente de linguagem.

preflights

• Tipo: Preflight<Theme>[]

Injeções de CSS bruto.

layers

• Tipo: Record<string, number>

Ordens de camadas. Padrão para 0.

outputToCssLayers

• Tipo: boolean | UseCssLayersOptions
• Padrão: false

Gera camadas para Camadas em Cascata CSS.

cssLayerName

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

Especifica o nome da camada CSS para a qual a camada interna deve ser gerada (pode ser uma subcamada, por exemplo, "mylayer.mysublayer").

Se undefined for retornado, o nome da camada interna será usado como o nome da camada CSS. Se null for retornado, a camada interna não será gerada em uma camada CSS.

sortLayers

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

Função personalizada para classificar camadas.

presets

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

Configurações predefinidas para casos de uso comuns.

transformers

• Tipo: SourceCodeTransformer[]

Transformadores personalizados para o código-fonte.

blocklist

• Tipo: BlocklistRule[]

Regras para excluir seletores do seu sistema de design (para reduzir as possibilidades). Combinar com opções warnExcluded também pode ajudar a identificar usos incorretos.

safelist

• Tipo: string[]

Utilitários que são sempre incluídos.

preprocess

• Tipo: Arrayable<Preprocessor>

Pré-processar os utilitários de entrada, retornar valor falso para excluir.

postprocess

• Tipo: Arrayable<Postprocessor>

Pós-processar o objeto de utilitários gerado.

separators

• Tipo: Arrayable<string>
• Padrão: [':', '-']

Separador de variantes.

extractorDefault

• Tipo: Extractor | null | false
• Padrão: import('@unocss/core').defaultExtractor

Extrator padrão que é sempre aplicado. Por padrão, divide o código-fonte por espaço em branco e aspas.

Pode ser substituído por predefinição ou configuração do usuário, apenas um extrator padrão pode estar presente, o último substituirá o anterior.

Passe null ou false para desabilitar o extrator padrão.

autocomplete

Opções adicionais para autocompletar.

templates

• Tipo: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Funções personalizadas / modelos para fornecer sugestões de autocompletar.

extractors

• Tipo: Arrayable<AutoCompleteExtractor>

Extratores personalizados para capturar possíveis classes e transformar sugestões de estilo de nome de classe no formato correto.

shorthands

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

Atalhos personalizados para fornecer sugestões de autocompletar. Se os valores forem uma matriz, serão unidos com | e envolvidos com ().

content

Opções para fontes a serem extraídas como usos de utilitários.

Fontes suportadas:

• filesystem - extrair do sistema de arquivos
• inline - extrair de texto embutido simples
• pipeline - extrair do pipeline de transformação de ferramentas de construção, como Vite e Webpack

Os usos extraídos de cada fonte serão mesclados juntos.

filesystem

• Tipo: string[]
• Padrão: []

Padrões glob para extrair do sistema de arquivos, além de outras fontes de conteúdo.

No modo de desenvolvimento, os arquivos serão observados e acionarão HMR.

inline

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

Texto embutido a ser extraído.

pipeline

Filtros para determinar se deve extrair certos módulos do pipeline de transformação das ferramentas de construção.

Atualmente funciona apenas para integração Vite e Webpack.

Defina como false para desabilitar.

include

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

Padrões que filtram os arquivos sendo extraídos. Suporta expressões regulares e padrões glob picomatch.

Por padrão, arquivos .ts e .js NÃO são extraídos.

exclude

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

Padrões que filtram os arquivos NÃO sendo extraídos. Suporta expressões regulares e padrões glob picomatch.

Por padrão, node_modules e dist também são extraídos.

configResolved

• Tipo: (config: ResolvedConfig) => void

Gancho para modificar a configuração resolvida.

Primeiro as predefinições são executadas e depois a configuração do usuário.

configFile

• Tipo: string | false

Carregar de arquivos de configuração.

Defina como false para desabilitar.

configDeps

• Tipo: string[]

Lista de arquivos que também acionarão recarregamentos de configuração.

cli

Opções da CLI do UnoCSS.

entry

• Tipo: Arrayable<CliEntryItem>

Ponto de entrada da CLI do UnoCSS.

patterns

• Tipo: string[]

Padrões glob para extrair do sistema de arquivos.

outFile

• Tipo: string

Caminho do arquivo de saída.

shortcutsLayer

• Tipo: string
• Padrão: 'shortcuts'

Nome do layout de atalhos.

envMode

• Tipo: 'dev' | 'build'
• Padrão: 'build'

Modo de ambiente.

details

• Tipo: boolean

Expor detalhes internos para depuração / inspeção.

warn

• Tipo: boolean
• Padrão: true

Emitir aviso quando seletores correspondentes forem apresentados na blocklist.