Preset Legacy Compat

Collections d'utilitaires de compatibilité legacy.

Ce preset n'inclut aucune règle, il applique un post-traitement au CSS généré par d'autres presets.

Par défaut, aucune option n'est activée, vous devez activer chacune explicitement.

Code Source

Installation

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

Options

commaStyleColorFunction

• Type: boolean
• Défaut: false

Convertit les fonctions de couleur (rgb() et hsl()) de séparées par espaces à séparées par virgules, pour une meilleure compatibilité avec les navigateurs legacy. Restaure l'ancien comportement avant UnoCSS v0.57.0 qui a été changé en séparé par espaces dans #3221 pour s'aligner avec Tailwind CSS.

Exemples :

• 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

• Type: boolean
• Défaut: false

Supprime les mots-clés d'espace de couleur comme in oklch et in oklab des styles générés. C'est utile pour assurer la compatibilité avec les navigateurs legacy qui ne supportent pas ces espaces de couleur modernes.

Pour activer cette fonctionnalité, définissez l'option legacyColorSpace à true.