pantoken / flatten-property

flatten-property ​

Βήτα

@pantoken/plugin-flatten-property — μετατρέψτε τα @property at-rules σε απλές δηλώσεις custom-property declarations.

@property at-rules καταχωρούν τυποποιημένες CSS custom properties με τους descriptors syntax, inherits και initial-value. Φέρουν σημαντικό byte overhead — περίπου 60 bytes boilerplate ανά property — και είναι περιττά όταν το stylesheet είναι ένα αυτοτελές bundle όπου η καταχώριση τύπων δεν προσφέρει κανένα runtime όφελος. Αυτό το plugin αντικαθιστά κάθε μπλοκ @property με μια απλή δήλωση --name: value μέσα σε έναν επιλεγμένο selector, ανακτώντας όλο αυτό το overhead.

Σημείωση σημασιολογίας: η αφαίρεση του @property αφαιρεί την καταχώριση τύπων CSS. Τyped 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;

Διεπαφές ​

Μεταβλητές ​