English | 简体中文

postcss-unit-transforms

A plugin for PostCSS that generates rpx units from pixel units, it also can generate units which you want.

Install

$ npm install postcss-unit-transforms --save-dev

Usage

Input/Output

With the default settings, we will get this output.

1/* input */
2p {
3  margin: 0 0 20px;
4  font-size: 32px;
5  line-height: 1.2;
6  letter-spacing: 1px; /* no */
7}
8
9/* output */
10p {
11  margin: 0 0 20rpx;
12  font-size: 32rpx;
13  line-height: 1.2;
14  letter-spacing: 1px;
15}

Example

1var fs = require('fs');
2var postcss = require('postcss');
3var pxtorem = require('postcss-pxtorem');
4var css = fs.readFileSync('main.css', 'utf8');
5var options = {
6    replace: false
7};
8var processedCss = postcss(pxtorem(options)).process(css).css;
9
10fs.writeFile('main-rem.css', processedCss, function (err) {
11  if (err) {
12    throw err;
13  }
14  console.log('Rem file written.');
15});

options

Type: Object | Null

Default:

1{
2  divisor: 1,
3  multiple: 1,
4  decimalPlaces: 2,
5  comment: 'no',
6  targetUnits: 'rpx'
7}

Detail:

• divisor(Number): divisor, replace pixel value with pixel / divisor.
• multiple(Number | (fileName) => Number): multiple, replace pixel value with pixel * multiple.
• decimalPlaces(Number): the number of decimal places. For example, the css code is width: 100px, we will get the vaule is Number(100 / divisor * multiple).toFixed(decimalPlaces).
• comment(String): default value is 'no'. For example, if you set it 'not replace', the css code width: 100px; /* not replace */ will be translated to width: 100px;
• targetUnits(String): The units will replace pixel units, you can set it 'rem'.

Use with gulp-postcss

1var gulp = require('gulp');
2var postcss = require('gulp-postcss');
3var pxtounits = require('postcss-pxtounits');
4
5gulp.task('css', function () {
6  return gulp.src('./test/src/css/**/*.css')
7    .pipe(postcss([pxtounits()]))
8    .pipe(gulp.dest('./test/dist/css'));
9});

Tips

If you want to use it in WePY, please use wepy-plugin-px2units.