gulp-postcss
Advanced tools
gulp-postcss is a Gulp plugin to pipe CSS through several PostCSS plugins, allowing you to transform styles with JS plugins. It is highly flexible and can be used for a variety of CSS processing tasks such as autoprefixing, minification, and linting.
Autoprefixing
This feature allows you to automatically add vendor prefixes to your CSS rules using the autoprefixer PostCSS plugin. This ensures compatibility with different browsers.
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
gulp.task('css', function () {
return gulp.src('src/*.css')
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('dest'));
});CSS Minification
This feature allows you to minify your CSS files using the cssnano PostCSS plugin, which helps in reducing the file size and improving load times.
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
gulp.task('minify-css', function () {
return gulp.src('src/*.css')
.pipe(postcss([cssnano()]))
.pipe(gulp.dest('dest'));
});Linting CSS
This feature allows you to lint your CSS files using the stylelint PostCSS plugin, which helps in maintaining code quality and consistency.
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const stylelint = require('stylelint');
const reporter = require('postcss-reporter');
gulp.task('lint-css', function () {
return gulp.src('src/*.css')
.pipe(postcss([
stylelint(),
reporter({ clearReportedMessages: true })
]));
});gulp-sass is a Gulp plugin for compiling Sass to CSS. While gulp-postcss focuses on transforming CSS with various plugins, gulp-sass is specifically designed for compiling Sass files. It is often used in conjunction with gulp-postcss for a complete CSS processing workflow.
gulp-less is a Gulp plugin for compiling Less to CSS. Similar to gulp-sass, it is focused on compiling Less files rather than transforming CSS with plugins. It can be used alongside gulp-postcss for additional CSS transformations.
gulp-clean-css is a Gulp plugin for minifying CSS files. While gulp-postcss can achieve minification through plugins like cssnano, gulp-clean-css is a dedicated tool for this purpose and may offer more specialized options for minification.
PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.
$ npm install --save-dev postcss gulp-postcss
Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.
The configuration is loaded automatically from postcss.config.js
as described here,
so you don't have to specify any options.
var postcss = require('gulp-postcss');
var gulp = require('gulp');
gulp.task('css', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
autoprefixer({browsers: ['last 1 version']}),
cssnano()
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
For using gulp-postcss to have input files in .pcss format and get .css output need additional library like gulp-rename.
var postcss = require('gulp-postcss');
var gulp = require('gulp');
const rename = require('gulp-rename');
gulp.task('css', function () {
return gulp.src('./src/*.pcss')
.pipe(postcss())
.pipe(rename({
extname: '.css'
}))
.pipe(gulp.dest('./dest'));
});
This is done for more explicit transformation. According to gulp plugin guidelines
Your plugin should only do one thing, and do it well.
The second optional argument to gulp-postcss is passed to PostCSS.
This, for instance, may be used to enable custom parser:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
var sugarss = require('sugarss');
gulp.task('default', function () {
var plugins = [nested];
return gulp.src('in.sss')
.pipe(postcss(plugins, { parser: sugarss }))
.pipe(gulp.dest('out'));
});
If you are using a postcss.config.js file, you can pass PostCSS options as the first argument to gulp-postcss.
This, for instance, will let PostCSS know what the final file destination path is, since it will be unaware of the path given to gulp.dest():
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('default', function () {
return gulp.src('in.scss')
.pipe(postcss({ to: 'out/in.css' }))
.pipe(gulp.dest('out'));
});
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var opacity = function (css, opts) {
css.walkDecls(function(decl) {
if (decl.prop === 'opacity') {
decl.parent.insertAfter(decl, {
prop: '-ms-filter',
value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"'
});
}
});
};
gulp.task('css', function () {
var plugins = [
cssnext({browsers: ['last 1 version']}),
opacity
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
Source map is disabled by default, to extract map use together with gulp-sourcemaps.
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
If you want to configure postcss on per-file-basis, you can pass a callback
that receives vinyl file object and returns
{ plugins: plugins, options: options }. For example, when you need to
parse different extensions differntly:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
function callback(file) {
return {
plugins: [
require('postcss-import')({ root: file.dirname }),
require('postcss-modules')
],
options: {
parser: file.extname === '.sss' ? require('sugarss') : false
}
}
}
return gulp.src('./src/*.css')
.pipe(postcss(callback))
.pipe(gulp.dest('./dest'));
});
The same result may be achieved with
postcss-load-config,
because it receives ctx with the context options and the vinyl file.
var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task('css', function () {
var contextOptions = { modules: true };
return gulp.src('./src/*.css')
.pipe(postcss(contextOptions))
.pipe(gulp.dest('./dest'));
});
// postcss.config.js or .postcssrc.js
module.exports = function (ctx) {
var file = ctx.file;
var options = ctx;
return {
parser: file.extname === '.sss' ? : 'sugarss' : false,
plugins: {
'postcss-import': { root: file.dirname }
'postcss-modules': options.modules ? {} : false
}
}
};
10.0.0
9.1.0 deprecated, because it breaks semver by dropping support for node <18
nix develop9.0.1
9.0.0
8.0.0
7.0.1
7.0.0
6.4.0
PluginError object6.3.0
6.2.0
6.1.1
6.1.0
null files6.0.1
syntax option)6.0.0
5.1.10
5.1.9
5.1.8
5.1.7
5.1.6
CssSyntaxError check5.1.4
5.1.3 Updated travis banner
5.1.2 Transferred repo into postcss org on github
5.1.1
to option5.1.0 PostCSS Runner Guidelines
from and to processing optionsCssSyntaxErrorresult.warnings() content5.0.1
5.0.0
4.0.3
4.0.2
4.0.1
4.0.0
3.0.0
2.0.1
2.0.0
1.0.2
1.0.1
1.0.0
FAQs
PostCSS gulp plugin
We found that gulp-postcss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.