端的には下記のようになります。
postcss([
cssnext({
features: {
rem: false
}
})
])
(例示コードは Gulp での利用を想定しています)
cssnext の話なので、まずは cssnext のドキュメントをあたるのがよいです。
browsers
オプションの利用が推奨されていますが、これを使うにはまず Browserslist について理解する必要がありますから、今回は features
を指定する方法を示します。
cssnext をカスタマイズなしに使う場合は通常、require('postcss-cssnext')
の戻り値をそのまま postcss
に渡しますが、これは呼び出し可能な関数になっており、オプションを指定するオブジェクトを渡して呼び出す事で、カスタマイズされたプロセッサが作られます。
const cssnext = require('postcss-cssnext');
const cssnextWithoutRem = cssnext({
features: {
rem: false,
},
});
冗長ですが上のように書くと、変数 cssnextWithoutRem
に rem
の機能が無効化されたプロセッサが代入されます。
素の cssnext
の代りに、このプロセッサを postcss
に渡すプラグインとして使います。
上の冗長な書き方に従い gulpfile.js
を記述すると、例えば下記のようになります。
// gulpfile.js
// src -> dest
const gulp = require("gulp");
const postcss = require('gulp-postcss');
const cssnext = require('postcss-cssnext');
const cssnextWithoutRem = cssnext({
features: {
rem: false,
},
});
const cssPlugins = [
cssnextWithoutRem,
];
gulp.task("css", function(){
gulp.src('./src/**/*.css')
.pipe(postcss(cssPlugins))
.pipe(gulp.dest('./dest/'));
});
gulp.task("default", ["css"]);