pantoken / flatten-property

flatten-property

ベータ

@pantoken/plugin-flatten-property — @property の at-rule をプレーンなカスタムプロパティ 宣言に変換します。

@property の at-rule は、syntax、inherits、および initial-value のディスクリプタで型付きの CSS カスタムプロパティを登録します。これらは大きなバイトオーバーヘッドを伴います — 各プロパティにつき約 60 バイトの定型コード — かつスタイルシートが自己完結したバンドルで型登録がランタイムでの利点をもたらさない場合は不要です。このプラグインは各 @property ブロックを選択したセレクタ内の 単純な --name: value 宣言に置き換え、これらのオーバーヘッドを回収します。

意味論に関する注意: @property を削除すると CSS の型登録が失われます。型付きのトランジション／アニメーション、 @starting-style、および CSS Typed OM はこれに依存します。これらの意味論が必要ないバンドルにのみ適用してください。

例

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

インターフェース

• FlattenPropertyOptions

変数

• flattenProperty