Legacy Compat Preset

Bộ sưu tập các tiện ích tương thích kế thừa.

Preset này không bao gồm bất kỳ quy tắc nào, nó áp dụng postprocess cho CSS được tạo từ các preset khác.

Theo mặc định, không có tùy chọn nào được bật, bạn cần chọn tham gia từng tùy chọn một cách rõ ràng.

Mã nguồn

Cài đặt

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
    }),
  ],
})

Tùy chọn

commaStyleColorFunction

• Kiểu: boolean
• Mặc định: false

Chuyển đổi hàm màu (rgb() và hsl()) từ phân cách bằng khoảng trắng thành phân cách bằng dấu phẩy, để tương thích tốt hơn với các trình duyệt kế thừa. Mang lại hành vi cũ trước UnoCSS v0.57.0 đã được thay đổi thành phân cách bằng khoảng trắng trong #3221 để căn chỉnh với Tailwind CSS.

Ví dụ:

• 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

• Kiểu: boolean
• Mặc định: false

Xóa các từ khóa không gian màu như in oklch và in oklab khỏi các kiểu được tạo. Điều này hữu ích để đảm bảo tương thích với các trình duyệt kế thừa không hỗ trợ các không gian màu hiện đại này.

Để bật tính năng này, đặt tùy chọn legacyColorSpace thành true.