レガシー互換プリセット

レガシーブラウザとの互換性を確保するためのユーティリティ集です。

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

uno.config.ts

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

export default defineConfig({
  presets: [
    // ...other presets
    presetLegacyCompat({
      // options
      commaStyleColorFunction: true,
    }),
  ],
})

オプション

commaStyleColorFunction

• **タイプ:** boolean
• **デフォルト:** false

レガシーブラウザとの互換性を向上させるために、色関数（rgb() と hsl()）をスペース区切りからカンマ区切りに変換します。UnoCSS v0.57.0 より前の古い動作を復活させます。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%)