Postcss-px2vw-pv NPM

postcss-px2vw-pv

PostCSS plugin which transfer px to vw when use pv unit directly.

if like this, could you please ⭐️star⭐ on github

Features

more flexible and more convenient than traditional transform style
be compatible with lower version browsers (need to config options)
migrate from rem to viewport

Install

    npm i postcss-px2vm-pv -D

    yarn add postcss-px2vw-pv --dev

Options

It's up to you that when and where to use pv、px or other units. Without configuring remMigration, the plugin will only intelligently convert pv to vw，so there is no need to config a complex filter file with exclude or include. so, this plugin makes work more flexible and convenient.

option	type	default	description
width	number	750	the px-width of design draft
decimal	number	4	number of reserved decimal places
rem	boolean	false	When using pv to convert px to vw, whether to use rem for compatibility with lower version browsers
remMigration	boolean	false	whether to migrate from rem to pv

Fast use

first to add the plugin to postcss.

    module.exports = {
        plugins: [
            require('postcss-px2vw-pv')
        ]
    }

then set the options of your design draft or use default.
when the width/height of a div is '500px', then use '500pv' to replace it.

Samples

with a design draft of 750

    @keyframes ani {
        from {
            transform: translateY(-20pv);
        }
        to {
            transform: translateY(20pv);
        }
    }
    .box {
        width: 500pv;
        height: 500pv;
        border: 1px solid #ff0;
        border-radius: 10px;
        transform: translateX(10pv);
    }

the sample above will be transferred into:

    @keyframes ani {
        from {
            transform: translateY(-2.6667vw);
        }
        to {
            transform: translateY(2.6667vw);
        }
    }
    .box {
        width: 66.6667vw;
        height: 66.6667vw;
        border: 1px solid #ff0;
        border-radius: 10px;
        transform: translateX(1.3333vw);
    }