pantoken / flatten-property

flatten-property ​

Beta

@pantoken/plugin-flatten-property — converte as at-rules @property em declarações simples de custom-property.

@property at-rules registram propriedades CSS tipadas com descritores syntax, inherits e initial-value. Elas acarretam uma sobrecarga de bytes significativa — ~60 bytes de boilerplate por propriedade — e são desnecessárias quando a folha de estilos é um bundle autocontido onde 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 elimina o registro de tipos CSS. Transições/animações tipadas, @starting-style e a 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 ​