• PostCSS — What It Is And What It Can Do
  • The Nuggets translation Project
  • Translator: Zheaoli
  • Proofread by: aidistan, JolsonZhu

PostCSS started in September 2013 and has since grown to be used by many developers at work. If you haven’t worked with PostCSS yet, this article is for you.

PostCSS is a tool for converting CSS using JavaScript plug-ins.

PostCSS itself is small, containing only a CSS parser, an API for manipulating the CSS node tree, a source map, and a node tree string tool. All dark magic is achieved through the use of plug-ins.

So far, PostCSS has over 100 plug-ins in its ecosystem. These plugins can do a lot of things, such as lint, adding vendor prefixes, etc. Add browser kernel prefixes to use browser-specific features), allow you to use the latest CSS features, provide statistics in your CSS, or allow you to use CSS preprocessors like Sass, Less, or Stylus.

Let’s take a look at the following 10 plug-ins

Autoprefixer

Resolve the CSS and add Vendor Prefixes (Note 2 above) based on the user’s usage scenario.

PostCSS Focus

A PostCSS plugin that uses keyboard manipulation to add a :focus selector for each: Hover.

PreCSS

A plugin that allows you to use sass-like markup in your code.

Stylelint

A powerful, advanced CSS linter tool that allows you to maintain consistency and avoid errors in CSS styles.

PostCSS CSS Variables

A plug-in that transforms user – defined CSS variables into static styles.

PostCSS Flexbugs Fixes

A plugin for fixing flexbug bugs.

PostCSS CSSnext

A plugin that lets you use the latest CSS features. It does this by taking the latest CSS features and making them compatible with current browsers, so you don’t have to wait for browsers to support a particular new feature.

PostCSS CSS Stats

A plug-in that supports CSSStats. This plugin will return a CSSStatus object that you can use for CSS analysis.

PostCSS SVGO

Optimize inline SVG in PostCSS.

PostCSS Style Guide

A plug-in that automatically generates style guidance. CSS comments will be generated in Markdown and displayed in the generated HTML document.

If you are writing your own Plugin and want to contribute it to the community, make sure you read the guidelines and the official PostCSS Plugin Boilerplate first.

Use it in your workPostCSS

PostCSS is written in JavaScript, which makes it easy to use in common front-end building tools like Grunt, Gulp, or Webpack.

Here is an example of how we used the Autoprefixer plug-in.

npm install autoprefixer --save-dev

Gulp If you use Gulp, then 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'));
});Copy the code

Grunt If you use 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']);

};Copy the code

Webpack If you use Webpack, then 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]; }}Copy the code

You can get help integrating PostCSS from the PostCSS repo here.

The last sincere amway

There are times when it is wise to use and observe new technologies, tools, and frameworks as they are released. PostCSS has now reached a fairly mature stage, and I strongly recommend that you use it in your work. Because it is now widely used in engineering, and it will not change much in the future.