Preset Legacy Compat

Coleção de utilitários de compatibilidade legada.

Este preset não inclui nenhuma regra, ele aplica pós-processamento ao CSS gerado por outros presets.

Por padrão, nenhuma das opções está habilitada, você precisa optar explicitamente por cada uma delas.

Código Fonte

Instalação

pnpm

pnpm add -D @unocss/preset-legacy-compat

yarn

yarn add -D @unocss/preset-legacy-compat

npm

npm install -D @unocss/preset-legacy-compat

bun

bun add -D @unocss/preset-legacy-compat

import presetLegacyCompat from '@unocss/preset-legacy-compat'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    // ...other presets
    presetLegacyCompat({
      // options
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Opções

commaStyleColorFunction

• Tipo: boolean
• Padrão: false

Converte funções de cor (rgb() e hsl()) de separadas por espaço para separadas por vírgula, para melhor compatibilidade com navegadores legados. Restaura o comportamento antigo antes do UnoCSS v0.57.0 que foi alterado para separado por espaço em #3221 para alinhar com o Tailwind CSS.

Por exemplo:

• rgb(255 0 0) -> rgb(255, 0, 0)
• rgb(255 0 0 / 50%) -> rgba(255, 0, 0, 50%)
• hsl(0 100% 50% / 50%) -> hsla(0, 100%, 50%, 50%)

legacyColorSpace

• Tipo: boolean
• Padrão: false

Remove palavras-chave de espaço de cor como in oklch e in oklab dos estilos gerados. Isso é útil para garantir compatibilidade com navegadores legados que não suportam esses espaços de cor modernos.

Para habilitar este recurso, defina a opção legacyColorSpace como true.