pantoken / flatten-property

flatten-property ​

เบต้า

@pantoken/plugin-flatten-property — แปลง @property at-rules ให้เป็นประกาศ custom-property แบบปกติ.

@property at-rules ลงทะเบียน typed CSS custom properties ด้วยตัวพรรณา syntax, inherits, และ initial-value. พวกมันมีค่าเฮดเดอร์เพิ่มขึ้นอย่างมีนัยสำคัญ — ประมาณ 60 ไบต์ของ boilerplate ต่อ property — และไม่จำเป็นเมื่อ stylesheet เป็น bundle ที่รวมตัวเองอยู่ซึ่งการลงทะเบียนประเภทไม่ให้ประโยชน์เวลา runtime ปลั๊กอินนี้จะแทนที่แต่ละบล็อก @property ด้วย ประกาศ --name: value ธรรมดาภายใน selector ที่เลือกไว้ เพื่อเรียกคืนพื้นที่ค่าเฮดเดอร์ทั้งหมดนั้น

หมายเหตุเชิงความหมาย: การเอาออก @property จะทำให้สูญเสียการลงทะเบียนประเภทของ CSS. Typed transitions/animations, @starting-style, และ CSS Typed OM ขึ้นอยู่กับมัน. ให้ใช้เฉพาะกับ bundles ที่ไม่ต้องการความหมายเชิงนี้เท่านั้น.

ตัวอย่าง ​

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

อินเทอร์เฟซ ​

ตัวแปร ​