Legacy Compat Preset

レガシー互換ユーティリティのコレクションです。

このプリセット自体にはルールは含まれておらず、他のプリセットで生成された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

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以前の動作（Tailwind CSSに合わせて#3221でスペース区切りに変更）を復活させます。

例：

• 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に設定してください。