- Original Article: PostCSS – What It Is And What It Can Do
PostCSS originated in September 2013 and has been widely used by developers in their work. If you haven't encountered PostCSS yet, this article is perfect for you.
PostCSS is a tool that uses JavaScript plugins to transform CSS.
PostCSS itself is small, containing only a CSS parser, an API for manipulating CSS node trees, a resource generator (source map), and a node tree stringifier. All the magic is achieved through the use of plugins.
Currently, the PostCSS ecosystem has over 100 plugins. These plugins can do many things, such as linting, adding vendor prefixes, providing statistics in your CSS, or allowing you to use Sass, Less, or Stylus as CSS preprocessors.
Let's take a look at ten plugins#
Parses CSS based on user scenarios and adds vendor prefixes.
A PostCSS plugin that adds selectors to each using keyboard operations.
A plugin that allows you to use Sass-like syntax in your code.
A powerful and advanced CSS linter that helps you maintain consistency and avoid errors in your CSS styles.
A plugin that converts user-defined CSS variables into static styles.
A plugin for fixing flexbox bugs.
A plugin that allows you to use the latest CSS features. It transforms the latest CSS features into compatible ones for current browsers, so you don't have to wait for browser support for specific new features.
A plugin that supports cssstats. This plugin returns a cssstats object that you can use for CSS analysis.
Optimizes inline SVG in PostCSS.
A plugin that automatically generates style guides. It generates CSS comments in Markdown and displays them in the generated HTML document.
If you want to write your own plugin and contribute it to the community, make sure you read the guidelines and the PostCSS Plugin Boilerplate official documentation.
Using PostCSS in Your Work#
Since PostCSS is written in JavaScript, it is very convenient to use it in common front-end build tools such as Grunt, Gulp, or Webpack.
Here is an example of using the Autoprefixer plugin.
npm install autoprefixer --save-dev
Gulp
If you are using Gulp, you need to install gulp-postcss.
npm install --save-dev gulp-postcss
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('./dest'));
});
Grunt
If you are using Grunt, you need to install grunt-postcss.
npm install grunt-postcss --save-dev
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'css/*.css'
}
}
});
grunt.registerTask('default', ['postcss:dist']);
};
Webpack
If you are using Webpack, you need to install postcss-loader.
npm install postcss-loader --save-dev
var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer];
}
}
For help on integrating PostCSS, you can refer to the PostCSS repo.
Final Thoughts~#
Sometimes, it is wise to use and observe the development trends of new technologies, tools, and frameworks. PostCSS has now reached a fairly mature stage of development, and I strongly recommend using it in your work. It is widely used in projects and is not expected to undergo significant changes in the near future.