postcss-preserve-px-fontsize

preserve px font-size from postcss-px-to-viewport, only for vw unit.

Requirement

Must set this plugin after postcss-px-to-viewport.

Usage

const postcss = require('postcss');
const preserveFontSize = require('../src/index');
const fs = require('fs');
 
const css = fs.readFileSync('./example/test.css', 'utf8');
 
postcss([preserveFontSize({
    viewportWidth: 750,
    lineHeight: true
})]).process(css).then(rst => {
    console.log(rst.css);
});

input

div {
    font-size: 50vw;
    /* 375px */
    font: bold 4.267vw/50vw "Microsoft Yahei"; 
    /* 32px */
    color: red;
    line-height: 4.267vw;
}

output

div {
    font-size: 375px;
    /* 375px */
    font: bold 32px/375px "Microsoft Yahei"; 
    /* 32px */
    color: red;
    line-height: 32px;
}

Options

• viewportWidth same as postcss-px-to-viewport
• lineHeight boolean, should preserve px unit for line-height

Skip a declaration

Maybe you want to use vw for a specified declaration, you can add a comment /* skipvw */ after the declaration.

div {
    font-size: 50vw; /* skipvw */
    /* 375px */
    font: bold 4.267vw/50vw "Microsoft Yahei"; 
    /* 32px */
    color: red;
    line-height: 4.267vw;
}

This will preserve vw for font-size.

output

div {
    font-size: 50vw; /* skipvw */
    /* 375px */
    font: bold 32px/375px "Microsoft Yahei"; 
    /* 32px */
    color: red;
    line-height: 32px;
}