Пресет Legacy Compat

Коллекции утилит для обратной совместимости.

Этот пресет не содержит никаких правил, он применяет постобработку (postprocess) к сгенерированному CSS из других пресетов.

По умолчанию ни одна из опций не включена, вам нужно явно включить каждую из них.

Исходный код

Установка

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

uno.config.ts

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

export default defineConfig({
  presets: [
    // ...другие пресеты
    presetLegacyCompat({
      // параметры
      commaStyleColorFunction: true,
      legacyColorSpace: true
    }),
  ],
})

Опции

commaStyleColorFunction

• Тип: boolean
• По умолчанию: false

Конвертирует цветовые функции (rgb() и hsl()) из разделённых пробелами в разделённые запятыми, для лучшей совместимости с устаревшими браузерами. Возвращает старое поведение до версии UnoCSS v0.57.0, которое было изменено на разделение пробелами в #3221 для соответствия Tailwind CSS.

Примеры:

• 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

• Тип: boolean
• По умолчанию: false

Удаляет ключевые слова цветового пространства, такие как in oklch и in oklab, из сгенерированных стилей. Это полезно для обеспечения совместимости с устаревшими браузерами, которые не поддерживают современные цветовые пространства.

Чтобы включить эту функцию, установите опцию legacyColorSpace в true.