Skip to content

Legacy Compat Preset

Collections of legacy compatibility utilities.

This preset does not include any rules, it's applying postprocess to the generated CSS from other presets.

By default none of the options are enabled, you need to opt-in each of them explicitly.

Source Code

Installation

bash
pnpm add -D @unocss/preset-legacy-compat
bash
yarn add -D @unocss/preset-legacy-compat
bash
npm install -D @unocss/preset-legacy-compat
uno.config.ts
ts
import presetLegacyCompat from '@unocss/preset-legacy-compat'
import { defineConfig } from 'unocss'

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

Options

commaStyleColorFunction

  • Type: boolean
  • Default: false

Convert color functions (rgb() and hsl()) from space-separated to comma-separated, for better compatibility with legacy browsers. Bring back the old behavior before UnoCSS v0.57.0 that was changed to space-separated in #3221 to align with Tailwind CSS.

For examples:

  • 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%)

Released under the MIT License.