pomelott/postcss-px2vw-pv

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

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.

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

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 !

postcss-px2vw-pv's Issues

Not Found

npm i postcss-px2vm-pv -D not found
完整log 如下
0 verbose cli [
0 verbose cli 'C:\Program Files\nodejs\node.exe',
0 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
0 verbose cli 'i',
0 verbose cli 'postcss-px2vm-pv',
0 verbose cli '-D'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Users\asus-pc\Desktop\my.npmrc Completed in 1ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\asus-pc.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:C:\Program Files\nodejs\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 0ms
18 timing config:load Completed in 6ms
19 timing npm:load:configload Completed in 6ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 2ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 13ms
27 timing arborist:ctor Completed in 0ms
28 timing idealTree:init Completed in 95ms
29 timing idealTree:userRequests Completed in 1ms
30 silly idealTree buildDeps
31 silly fetch manifest postcss-px2vm-pv@*
32 timing arborist:ctor Completed in 0ms
33 http fetch GET 404 https://registry.npmjs.org/postcss-px2vm-pv 1117ms (cache skip)
34 http fetch GET 404 https://registry.npmjs.org/postcss-px2vm-pv 355ms (cache skip)
35 silly placeDep ROOT postcss-px2vm-pv@ OK for: [email protected] want: *
36 timing idealTree:#root Completed in 1478ms
37 timing idealTree:node_modules/postcss-px2vm-pv Completed in 0ms
38 timing idealTree:buildDeps Completed in 1479ms
39 timing idealTree:fixDepFlags Completed in 1ms
40 timing idealTree Completed in 1577ms
41 timing command:install Completed in 1601ms
42 verbose stack HttpErrorGeneral: 404 Not Found - GET https://registry.npmjs.org/postcss-px2vm-pv - Not found
42 verbose stack at C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\node_modules\npm-registry-fetch\check-response.js:95:15
42 verbose stack at processTicksAndRejections (node:internal/process/task_queues:96:5)
42 verbose stack at async Arborist.[nodeFromEdge] (C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:997:19)
42 verbose stack at async Arborist.[buildDepStep] (C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:877:11)
42 verbose stack at async Arborist.buildIdealTree (C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\build-ideal-tree.js:206:7)
42 verbose stack at async Promise.all (index 1)
42 verbose stack at async Arborist.reify (C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\node_modules@npmcli\arborist\lib\arborist\reify.js:147:5)
42 verbose stack at async Install.install (C:\Users\asus-pc\AppData\Roaming\nvm\v16.9.1\node_modules\npm\lib\install.js:150:5)
43 verbose statusCode 404
44 verbose pkgid postcss-px2vm-pv@*
45 verbose cwd C:\Users\asus-pc\Desktop\my
46 verbose Windows_NT 10.0.19042
47 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i" "postcss-px2vm-pv" "-D"
48 verbose node v16.9.1
49 verbose npm v7.21.1
50 error code E404
51 error 404 Not Found - GET https://registry.npmjs.org/postcss-px2vm-pv - Not found
52 error 404
53 error 404 'postcss-px2vm-pv@*' is not in the npm registry.
54 error 404 You should bug the author to publish it (or use the name yourself!)
55 error 404 Note that you can also install from a
56 error 404 tarball, folder, http url, or git url.
57 verbose exit 1