PostCSS: PxToRem plugin

Question

I'm very new to using Node.js and using post processors for CSS. After reading several articles, I managed to install the following:

1. Node.js (which included npm)
2. Gulp
3. PostCSS
4. Pxtorem (a PostCSS plugin for Gulp)

What I would like to do is have the 'pxtorem' plugin convert my px units to rems for the following CSS properties: font-size, margin, padding, border, width, height etc. and out output the results in a new CSS stylesheet.

Question: What exactly do I need to have typed inside my gulpfile.js to make this work?

To reiterate, I'm brand new when it comes to typing variables and requirements and have been following video and blog examples, none of which specifically have the correct formula for converting pixels to rems (since there are many plugins for PostCSS).

This is what I currently have in my current gulpfile.js:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');

gulp.task('css', function() {
gulp.src('./css-1/*.css')
    .pipe(pxtorem())
    .pipe(gulp.dest('./dest'));
});

What the above is essentially doing is grabbing my "styles-1.css" stylesheet file located within my "css-1" folder and making a duplicate of it inside my "dest" folder. I typed this code in compliance with an article I was reading to get an idea of how PostCSS worked, but it obviously isn't the correct code for converting pixels to rem.

P.S. I'm currently using a Windows 10 O/S.

Answer 1

Based on the documentation for gulp-pxtorem, it states:

Options

Pass in two option objects. The first one for postcss-pxtorem options...

After visiting the documentation for postcss-pxtorem, I found that the options block looks like this:

{
    rootValue: 16,
    unitPrecision: 5,
    propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
}

Which is pretty self explanatory, but you can read more in the docs if you need to know what every option does. The option you want is propWhiteList.

So, in your gulpfile:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');

gulp.task('css', function() {
    var opts = {
        propWhiteList: [
          'font-size',
          'margin',
          'padding',
          'border',
          'width',
          'height',
          ...etc
        ] 
    };
    gulp.src('./css-1/*.css')
        .pipe(pxtorem(opts))
        .pipe(gulp.dest('./dest'));
});

I don't believe you need to use the second option to achieve your desired result.

Good luck, and happy coding!