postcss-px2vw-pv

Doc ZH-CN 🇨🇳

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.

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);
    }

Test

• to get example please view example/, more examples will be published later !

• run test command

  npm run test

Contributor

• wanna contribute to this repository or further to be a contributor, issus or pull request !
• don't forget to contribute your star !