Legacy Compat Preset

레거시 호환성 유틸리티 모음.

이 preset은 규칙을 포함하지 않으며, 다른 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: [
    // ...other presets
    presetLegacyCompat({
      // options
      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로 설정하세요.