@luego/postcss-position

Plugin PostCSS 8 que expande o shorthand position: <type> <offsets> em position + top/right/bottom/left.

Port para a API do PostCSS 8 do postcss-position 1.1.0 (MIT), abandonado na API antiga (postcss.plugin, que gera warning de deprecação no PostCSS 8).

Instalação

npm i -D @luego/postcss-position postcss
# ou
yarn add -D @luego/postcss-position postcss

postcss >= 8 é peer dependency.

Uso

const postcssPosition = require('@luego/postcss-position');

postcss([postcssPosition()]).process(css);

Sintaxe

Os offsets seguem a ordem do shorthand de margin/padding (top right bottom left):

/* entrada */
.overlay { position: absolute 0; }
.modal   { position: fixed 10px 20px; }
.pin     { position: absolute 0 null null 0; }

/* saída */
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.modal   { position: fixed; top: 10px; right: 20px; bottom: 10px; left: 20px; }
.pin     { position: absolute; top: 0; left: 0; }

• null / false / undefined pulam o offset correspondente
• auto, calc(), % e todas as unidades de comprimento são suportados
• position: absolute sem offsets passa intacto

Teste

npm test