postcss-pixel-to-viewport
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
Usage
If your project involves a fixed width, this script will help to convert pixels into viewport units.
Input/Output
// input
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;/*off*/
}
.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: -1.33333vmin .5vh;
padding: 5vmin 1.26667vmin 1px;
border: 0.4vmin solid black;
border-bottom-width: 1px;
font-size: 1.86667vmin;
line-height: 20px;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 2.66667vmin;
line-height: 4vmin;
}
@media (min-width: 750px) {
.class3 {
font-size: 2.13333vmin;
line-height: 2.93333vmin;
}
}
Example
'use strict';
var fs = require('fs');
var postcss = require('postcss');
var px2viewport = require('..');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
propList: ['font-size']
};
var processedCss = postcss(px2viewport(options)).process(css).css;
fs.writeFile('main-viewport.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('File with viewport units written.');
});
Options
Default:
{
unitToConvert: 'px',
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw', // vmin is more suitable.
selectorBlackList: [],
propList: ['*'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
mediaMinWidth: 767.98,
disableConvertComment: 'off',
}
-
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. -
disableConvertComment
(String) content of comment for disable convert px unit before the declaration.
Use comment to enable/disable convert px value for single declaration
-
font-size: 14px;/*off*/
comment before the declaration will not convert px unit.
Use with gulp-postcss
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2viewport = require('postcss-pixel-to-viewport');
gulp.task('css', function () {
var processors = [
px2viewport({
viewportWidth: 750
})
];
return gulp.src(['build/css/**/*.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('build/css'));
});