Legacy Compat Preset

Sammlung von Legacy-Kompatibilitäts-Utilities.

Dieses Preset enthält keine Regeln, es wendet Postprocessing auf das generierte CSS von anderen Presets an.

Standardmäßig sind keine Optionen aktiviert, Sie müssen jede davon explizit aktivieren.

Quellcode

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: [
    // ...andere Presets
    presetLegacyCompat({
      // Optionen
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Optionen

commaStyleColorFunction

• Typ: boolean
• Standard: false

Konvertiert Farbfunktionen (rgb() und hsl()) von leerzeichengetrennt zu kommagetrennt, für bessere Kompatibilität mit Legacy-Browsern. Bringt das alte Verhalten vor UnoCSS v0.57.0 zurück, das in #3221 zu leerzeichengetrennt geändert wurde, um mit Tailwind CSS übereinzustimmen.

Beispiele:

• 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

• Typ: boolean
• Standard: false

Entfernt Farbraum-Schlüsselwörter wie in oklch und in oklab aus den generierten Styles. Dies ist nützlich, um die Kompatibilität mit Legacy-Browsern sicherzustellen, die diese modernen Farbräume nicht unterstützen.

Um diese Funktion zu aktivieren, setzen Sie die Option legacyColorSpace auf true.