@liuwenkiii/postcss-px2vw
v0.0.2
Published
PostCSS plugin convert px to viewport
Downloads
3
Maintainers
Readme
PostCSS Px2vw
NOTE: The project is in the testing stage, if you need more stable functionality, see postcss-px-to-viewport
PostCSS plugin convert px to viewport.
.foo {
width: 100px;
}
.foo {
/* viewport width = 1080px */
width: 9.259259vw;
}
Usage
Step 1: Install plugin:
npm install --save-dev postcss postcss-px2vw
Step 2: Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss"
section in package.json
or postcss
in bundle config.
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Step 3: Add the plugin to plugins list:
module.exports = {
plugins: [
+ require('postcss-px2vw'),
require('autoprefixer')
]
}
Options
// These are the default options
{
viewportWidth: 1080,
precision: 6,
minPixelValue: 1,
excludeProp: [],
excludeFile: [],
specific: [],
}
viewportWidth
(Number) The width of the viewport.precision
(Number) The decimal numbers to allow the vw units to grow to.minPixelValue
(Number) Set the minimum pixel value to replace.excludeProp
(Array of String) Expected css props.excludeFile
(Array of Regexp) Expected files.specific
(Array) A list that allows you to use regular expressions to match file paths to set a special viewport width.