postcss-px-to-viewprot-fix
English | 中文
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
Demo
If your project involves a fixed width, this script will help to convert pixels into viewport units.
Input
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
Output
.class {
margin: -3.125vw .5vh;
padding: 5vmin 2.96875vw 1px;
border: 0.9375vw solid black;
border-bottom-width: 1px;
font-size: 4.375vw;
line-height: 6.25vw;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 6.25vw;
line-height: 9.375vw;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
Getting Started
Installation
Add via npm
$ npm install postcss-px-to-viewport-fix --save-dev
or yarn
$ yarn add -D postcss-px-to-viewport-fix -D
Usage
Default Options:
{
unitToConvert: 'px',
viewportWidth: 320,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
-
unitToConvert
(String) unit to convert, by default, it is px. -
viewportWidth
(Number) The width of the viewport. -
unitPrecision
(Number) The decimal numbers to allow the vw units to grow to. -
propList
(Array) The properties that can change from px to vw.- Values need to be exact matches.
- Use wildcard * to enable all properties. Example: ['*']
- Use * at the start or end of a word. (['position'] will match background-position-y)
- Use ! to not match a property. Example: ['*', '!letter-spacing']
- Combine the "not" prefix with the other prefixes. Example: ['', '!font']
-
viewportUnit
(String) Expected units. -
fontViewportUnit
(String) Expected units for font. -
selectorBlackList
(Array) The selectors to ignore and leave as px.- If value is string, it checks to see if selector contains the string.
-
['body']
will match.body-class
-
- If value is regexp, it checks to see if the selector matches the regexp.
-
[/^body$/]
will matchbody
but not.body
-
- If value is string, it checks to see if selector contains the string.
-
minPixelValue
(Number) Set the minimum pixel value to replace. -
mediaQuery
(Boolean) Allow px to be converted in media queries. -
replace
(Boolean) replaces rules containing vw instead of adding fallbacks. -
exclude
(Array or Regexp) Ignore some files like 'node_modules'- If value is regexp, will ignore the matches files.
- If value is array, the elements of the array are regexp.
-
landscape
(Boolean) Adds@media (orientation: landscape)
with values converted vialandscapeWidth
. -
landscapeUnit
(String) Expected unit forlandscape
option -
landscapeWidth
(Number) Viewport width for landscape orientation.
Use with gulp-postcss
add to your gulpfile.js
:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport-fix');
gulp.task('css', function () {
var processors = [
pxtoviewport({
viewportWidth: 320,
viewportUnit: 'vmin'
})
];
return gulp.src(['build/css/**/*.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('build/css'));
});
Use with PostCss configuration file
add to your postcss.config.js
module.exports = {
plugins: {
...
'postcss-px-to-viewport-fix': {
// options
}
}
}
Running the tests
In order to run tests, you need to install jasmine-node
globally:
$ npm install jasmine-node -g
Then run the tests via npm script:
$ npm run test