Preset de Compatibilidad Legacy

Colecciones de utilidades de compatibilidad legacy.

Este preset no incluye ninguna regla, está aplicando postprocesamiento al CSS generado por otros presets.

Por defecto ninguna de las opciones está habilitada, necesitas activar cada una de ellas explícitamente.

Código Fuente

Instalación

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: [
    // ...otros presets
    presetLegacyCompat({
      // opciones
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Opciones

commaStyleColorFunction

• Tipo: boolean
• Predeterminado: false

Convierte funciones de color (rgb() y hsl()) de separadas por espacios a separadas por comas, para mejor compatibilidad con navegadores legacy. Restaura el comportamiento anterior a UnoCSS v0.57.0 que fue cambiado a separado por espacios en #3221 para alinearse con Tailwind CSS.

Por ejemplo:

• 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
• Predeterminado: false

Elimina palabras clave de espacio de color como in oklch e in oklab de los estilos generados. Esto es útil para asegurar compatibilidad con navegadores legacy que no soportan estos espacios de color modernos.

Para habilitar esta función, establece la opción legacyColorSpace a true.