postcss-convertpx

forked from postcss-px-to-viewport.

requirement

Must set this plugin after postcss-nested.

Usage

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

Input/Output

// input

div {
	width: 20px;
	height: 30px;
	color: red;
	font-size: 18px;
	font: bold 75px/7.5px;
	line-height: 20px;
	border: 1px solid #000;
}
div::before {
	content: "75px";
}
@media (max-width: 320px) {
	div {
		width: 40px;
		font-size: 20px;
		color: blue;
	}
}

// output

div {
	width: 2.66667vw;
	height: 4vw;
	color: red;
	font-size: 18px;
	font: bold 75px/1vw;
	line-height: 2.66667vw;
	border: 1px solid #000;
}
div::before {
	content: "75px";
}
@media (max-width: 320px) {
	div {
		width: 5.33333vw;
		font-size: 20px;
		color: blue;
	}
}

Example

'use strict';
const postcss = require('postcss');
const p2v = require('postcss-convertpx');
const fs = require('fs');

const css = fs.readFileSync('./example/demo.css', 'utf8');

postcss(p2v({
    exclude(file) {
		return /node_modules/.test(file);
    }
})).process(css, {
	from: './example/demo.css'
}).then(rst => {
	console.log(rst.css);
});

Options

Default:

{
	viewportWidth: 750,
	unitPrecision: 5,
	viewportUnit: 'vw',
	convertFont: false,
	minPixelValue: 1,
	mediaQuery: false,
	convertLineHeight: true,
	declarationBlackList: undefined,
	scale: undefined,
	exclude: undefined
}

• viewportWidth (Number) The width of the viewport.
• unitPrecision (Number) The decimal numbers to allow the REM units to grow to.
• viewportUnit (String) Expected units.
• convertFont (Boolean) Allow px to be converted in font/font-size.
• minPixelValue (Number) Set the minimum pixel value to replace.
• mediaQuery (Boolean) Allow px to be converted in media queries.
• convertLineHeight (Boolean) Allow px to be converted in font/line-height.
• declarationBlackList (string[]) The declarations to ignore and leave as px. Note, if use short-hand like font will only ignore font not font-size, so if you want ignore font and font-size, you should specify both like this declarationBlackList: ['font', 'font-size'].
• scale (Number) for vw will calculate automatic according to viewportWidth. for other unit such as rem, you can specify scale like scale: 75, then 1rem = 75px.
• exclude(filepath) (Function) You can exclude some file by specify this option, which returns a boolean, if true will be excluded.

Skip a declaration

input

div {
	width: 20px;/* skip-p2v */
	height: 30px;
	color: red;
	font-size: 18px;
	line-height: 20px;
}
@media (max-width: 320px) {
	div {
		width: 40px;
		font-size: 20px;
		color: blue;
	}
}

output

div {
	width: 20px;/* skip-p2v */
	height: 4vw;
	color: red;
	font-size: 18px;
	line-height: 2.66667vw;
}
@media (max-width: 320px) {
	div {
		width: 5.33333vw;
		font-size: 20px;
		color: blue;
	}
}

width will be ignored.

Skip a rule

input

/* skip-p2v */
div {
	width: 20px;
	height: 30px;
	color: red;
	font-size: 18px;
	line-height: 20px;
}
@media (max-width: 320px) {
	div {
		width: 40px;
		font-size: 20px;
		color: blue;
	}
}

output

/* skip-p2v */
div {
	width: 20px;
	height: 30px;
	color: red;
	font-size: 18px;
	line-height: 20px;
}
@media (max-width: 320px) {
	div {
		width: 5.33333vw;
		font-size: 20px;
		color: blue;
	}
}

The rule div will be ignored.

Skip a media query condition

input

div {
	width: 20px;
	height: 30px;
	color: red;
	font-size: 18px;
	line-height: 20px;
}
/* skip-p2v */
@media (max-width: 320px) {
	div {
		width: 40px;
		font-size: 20px;
		color: blue;
	}
}

output

div {
	width: 2.66667vw;
	height: 4vw;
	color: red;
	font-size: 18px;
	line-height: 2.66667vw;
}
/* skip-p2v */
@media (max-width: 320px) {
	div {
		width: 5.33333vw;
		font-size: 20px;
		color: blue;
	}
}

By default, will not convert media query condition, but if you specify mediaQuery: true, this comment would be useful.