pantoken / flatten-property

flatten-property ​

Beta

@pantoken/plugin-flatten-property — converter @property at-rules em declarações simples de propriedade personalizada.

@property at-rules registram propriedades CSS personalizadas tipadas com descritores syntax, inherits e initial-value. Eles acarretam uma sobrecarga de bytes significativa — ~60 bytes de boilerplate por propriedade — e são desnecessários quando a folha de estilos é um bundle autocontido em que o registro de tipos não traz benefício em tempo de execução. Este plugin substitui cada bloco @property por uma simples declaração --name: value dentro de um seletor escolhido, recuperando toda essa sobrecarga.

Observação semântica: remover @property faz com que o registro de tipos do CSS seja perdido. Transições/animações tipadas, @starting-style e o CSS Typed OM dependem disso. Aplicar somente a bundles onde essas semânticas não são necessárias.

Exemplo ​

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

Interfaces ​

Variáveis ​