pantoken / flatten-property

flatten-property

Beta

@pantoken/plugin-flatten-property — chuyển @property at-rules thành khai báo custom-property thuần túy. declarations.

@property at-rules đăng ký các custom property kiểu hóa CSS bằng các mô tả syntax, inherits, và initial-value. Chúng mang theo chi phí byte đáng kể — khoảng ~60 byte mã boilerplate cho mỗi thuộc tính — và là không cần thiết khi stylesheet là một bundle tự chứa, nơi việc đăng ký kiểu không mang lại lợi ích thời chạy. Plugin này thay thế mỗi khối @property bằng một khai báo --name: value đơn giản bên trong selector được chọn, thu hồi toàn bộ chi phí đó.

Lưu ý ngữ nghĩa: việc loại bỏ @property sẽ mất đăng ký kiểu CSS. Các transition/animation kiểu hóa, @starting-style, và CSS Typed OM phụ thuộc vào điều này. Chỉ áp dụng cho các bundle nơi những ngữ nghĩa đó không cần thiết.

Ví dụ

import postcss from "postcss";
import { flattenProperty } from "@pantoken/plugin-flatten-property";
const out = postcss([flattenProperty()]).process(css, { from: undefined }).css;

Giao diện

• FlattenPropertyOptions

Biến

• flattenProperty