After css precompiler, PostCSS_html/css_WEB-ITnose

When it comes to css preprocessor, you may think of Sass, Less and Stylus. The PostCSS to be introduced in this article is exactly such a tool: it can also do what the CSS precompiler can do.

"I understand everything you said, so why use it?"

Suit and single piece

If precompilers such as Sass define a new template language and then convert it into css, PostCSS is a more pure conversion of css itself.

Recall how you learned to use the css precompiler: you learned that there is such a language that can be converted into css. It has many features, variables, nesting, inheritance, etc., each feature All are implemented through certain syntax. It's probably like handing you a packaged toolbox (mass production type?), and you can find useful things in it.

What about PostCSS? PostCSS is like handing you a box, but telling you that you can take the tools you want from the display cabinet next to it and put them in the box to take away. If you feel like the ones in the showcase aren’t good enough, PostCSS can help you build your own tools. So, with PostCSS, you can get only what you need.

This is the modular (modular) style of PostCSS. As a CSS conversion tool, it is very small. All its conversion functions are plug-ins, so they can be customized.

The brief principle of PostCSS

PostCSS itself only includes a css analyzer, css node tree API, source map generator and css node tree splicer.

The component unit of css is a style rule (rule), and each style rule contains the definition of one or more attributes & values. Therefore, the execution process of PostCSS is: first, the css analyzer reads the css character content and obtains a complete node tree. Next, a series of conversion operations are performed on the node tree (plug-ins based on the node tree API). Finally, the css The node tree splicer reassembles the converted node tree into css characters. During this period, a source map can be generated to show the character correspondence before and after conversion:

What’s more interesting is that PostCSS plug-ins are actually JavaScript functions. They use PostCSS’s node tree API to manipulate css nodes. The tree undergoes different transformations.

Plug-in preview

All plug-ins can be found on the PostCSS homepage. Here, only a small part is selected for illustration.

Autoprefixer

The most famous plug-in for PostCSS is Autoprefixer. As the name suggests, it can automatically add browser-private prefixes for you. Its added value will refer to Can I Use and the browser support range you set, so it is quite reliable. Here is an example (based on the browser support range I set):

.container{    display: flex;}

After compilation:

.container{    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;}

postcss-nested&postcss-mixins

Just now When I started using PostCSS, I thought about using PostCSS to implement the features I use most in Sass. So, I found postcss-nested and postcss-mixins. After combining them, you can do this:

@define-mixin clearfix{    &:after{        display: table;        clear: both;        content: " ";    }}.column-container{    color: #333;    @mixin clearfix;}

After compilation:

.column-container{    color: #333;}.column-container:after{    display: table;    clear: both;    content: " ";}

At this point, if you already have "precompiler can do it" What about the feeling that you can do it too?”

How to use PostCSS

I personally recommend using it in conjunction with Gulp. This article only introduces the usage of gulp-postcss.

gulp-postcss and plug-ins are both npm. First, use npm install to install them into the project directory (it will be located in node_modules). Then, edit glupfile.js to register PostCSS as a task for Gulp. The following is an example of using four plug-ins, Autoprefixer, postcss-simple-vars, postcss-mixins, and postcss-nested, to generate a source map file:

var gulp = require("gulp");var postcss = require("gulp-postcss");var autoprefixer = require('autoprefixer-core');var postcssSimpleVars = require("postcss-simple-vars");var postcssMixins = require("postcss-mixins");var postcssNested = require("postcss-nested");var sourcemaps = require("gulp-sourcemaps");// Css process.gulp.task("postcss", function(){    var processors = [        postcssMixins,        postcssSimpleVars,        postcssNested,        autoprefixer({            browsers: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 10"]        })];    return gulp.src(["./stylesheets/src/*.css"])        .pipe(sourcemaps.init())        .pipe(postcss(processors))        .pipe(sourcemaps.write("."))        .pipe(gulp.dest("./stylesheets/dest"));});

In the above code, processors are An array defining the PostCSS plugins used. PostCSS will execute plugins one after another in the order they are defined, so when using multiple plugins in combination, please pay attention to their placement.

Custom transformations

Additionally, you can easily create your own transformations (remember what I said earlier about PostCSS plugins being JavaScript functions?). For example, below is a custom conversion method that changes the value with rem units in the css code to a px value.

var custom = function(css, opts){    css.eachDecl(function(decl){        decl.value = decl.value.replace(/\d+rem/, function(str){            return 16 * parseFloat(str) + "px";        });    });};

Then, you add this method directly to processors (just like postcssMixins) to use. If the original value is 3rem, it will become 48px.

The above is just a simple conversion. If you want to officially make a plug-in, please refer to the PostCSS plug-in guide.

Performance

PostCSS claims that PostCSS written in JavaScript is faster than libsass written in C (Sass was originally written in Ruby, but later came out with a C engine, libsass, which is faster) Even 3 times faster. I don’t think you need to care too much about the specific numbers here. It’s enough to feel that “PostCSS runs very fast”.

It actually runs like this:

Do more

Based on PostCSS, you can do many things that existing css precompilers cannot do things to arrive. For example, the plug-in series cssnext allows you to use CSS4 syntax (adding variables and many other features), and it will help you convert it to currently available CSS3.

A little problem

One problem with PostCSS is that it is fragmented, so I couldn't find an editor that could correctly parse and highlight css code that was prepared to use PostCSS. For example, in WebStorm, I treat it as an ordinary css file, and as a result, I will receive a lot of red error messages.

So, are css precompilers obsolete?

Of course not. Just like other popular frameworks and tools, the CSS precompiler is a proven tool that we can choose according to our needs.

Css precompilers such as Sass are mature and reliable. On the one hand, they are already popular template languages, have complete documentation and peripheral support, are relatively stable, and can be easily understood by new people joining the team. On the other hand, the integrated style has its conveniences, like you might be too lazy to assemble a model, but you can find a professional to do it for you.

PostCSS is characterized by modularity. In the long run, PostCSS can do more types of css transformations. The customizable style is very suitable for people who pursue individuality (it is faster, and you can make interesting plug-ins by yourself).

Additionally, the CSS precompiler and PostCSS can be used together. A popular usage is to compile Sass and then connect it to PostCSS's Autoprefixer (after all, this is PostCSS's signature plug-in).

Conclusion

The style of PostCSS can be said to be creating an ecosystem that changes the way CSS is developed. So when it comes to the future, I’m quite looking forward to it.

(Re-edit my blog, original address: http://acgtofe.com/posts/2015/05/modular-transforming-with-postcss/)