postcss-px2vwvh

English | 中文

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.

Support PostCSS 8.0

Demo

If your project involves a fixed width, this script will help to convert pixels into viewport units.

$3

``css
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}

.class2 {
padding-top: 10px; / px-to-viewport-ignore /
/ px-to-viewport-ignore-next /
padding-bottom: 10px;
/ Any other comment /
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}

@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
`

$3


`css
.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 {
padding-top: 10px;
padding-bottom: 10px;
/ Any other comment /
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

$3


Add via npm
`
$ npm install postcss-px2vwvh --save-dev
`
or yarn
`
$ yarn add -D postcss-px2vwvh
`

$3

Default Options:
`js
{
unitToConvert: 'px',
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
propList: ['*'],
reversePropLis: [],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
landscapeHeight: 320,
}
`
- unitToConvert (String) unit to convert, by default, it is px.
- viewportWidth (Number) The width of the viewport.
- viewportHeight (Number) The height 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']
- reversePropLis (Array) List of attributes that can be converted to vh
- 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 match body but not .body
- 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 (Regexp or Array of 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.
- include (Regexp or Array of Regexp) If include is set, only matching files will be converted,
for example, only files under src/mobile/ (include: /\/src\/mobile\//)
- If the value is regexp, the matching file will be included, otherwise it will be excluded.
- If value is array, the elements of the array are regexp.
- landscape (Boolean) Adds @media (orientation: landscape) with values converted via landscapeWidth.
- landscapeUnit (String) Expected unit for landscape option
- landscapeWidth (Number) Viewport width for landscape orientation.
- landscapeHeight (Number) Viewport height for landscape orientation.

> exclude and include can be set together, and the intersection of the two rules will be taken.

#### Ignoring

You can use special comments for ignore conversion of single lines:
- / px-to-viewport-ignore-next / — on a separate line, prevents conversion on the next line.
- / px-to-viewport-ignore / — after the property on the right, prevents conversion on the same line.

Example:
`css
/ example input: /
.class {
/ px-to-viewport-ignore-next /
width: 10px;
padding: 10px;
height: 10px; / px-to-viewport-ignore /
border: solid 2px #000; / px-to-viewport-ignore /
}

/ example output: /
.class {
width: 10px;
padding: 3.125vw;
height: 10px;
border: solid 2px #000;
}
`

There are several more reasons why your pixels may not convert, the following options may affect this:
propList, selectorBlackList, minPixelValue, mediaQuery, exclude, include.

#### Use with PostCss configuration file

add to your postcss.config.js
`js
module.exports = {
plugins: {
// ...
'postcss-px2vwvh': {
// options
}
}
}
`

#### Use with gulp-postcss

add to your gulpfile.js:
`js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px2vwvh');

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

forked from

* evrone/postcss-px-to-viewport