@luego/postcss-responsive-type

Plugin PostCSS 8 de tipografia fluida: transforma font-size: responsive <min> <max> (e line-height/letter-spacing) em calc() proporcional ao viewport, com media queries de clamp nos extremos.

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

Instalação

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

postcss >= 8 é peer dependency.

Uso

const postcssResponsiveType = require('@luego/postcss-responsive-type');

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

Sintaxe

/* entrada */
.title {
    font-size: responsive 14px 24px;
    font-range: 420px 1280px; /* viewport range (opcional, esse é o default) */
}

/* saída */
.title {
    font-size: calc(14px + 10 * ((100vw - 420px) / 860));
}
@media screen and (min-width: 1280px) {
    .title { font-size: 24px; }
}
@media screen and (max-width: 420px) {
    .title { font-size: 14px; }
}

Também aceita as propriedades expandidas:

.title {
    font-size: responsive;
    min-font-size: 14px;
    max-font-size: 24px;
    lower-font-range: 420px;
    upper-font-range: 1280px;
}

• Funciona com font-size, line-height (line-height-range) e letter-spacing (letter-spacing-range)
• Unidades: px, rem, em (com rem, o range em px é convertido usando o font-size do html)
• Valores sem unidade lançam erro

Teste

npm test