What the hell is a postcss?

The recent desert predecessors in the group sent about POSTCSS series of articles, but the mouse sister said to see a little foggy feeling, so this article will be a thinking of the angle to understand what postcss is exactly a thing.

　　

I do not understand the place

Many times the first time in the online query postcss concept, we all explain the concept of a post-processor, in fact, personally feel that these concepts are not important, more important has the following points:

What is it, essentially, a thing?

What can it do to solve our problems?

How does it solve our problems?

It solves our problem is why?

How to achieve the same functions as SASS, less, and Stylus (because they are often compared)

What does it consist of?

Since the program can be used, then its API?

Q: At this point, you should ask: Why put the composition and API at the end?

A: That's because when we get to know something that's not quite clear, the first time is definitely an intuitive idea: what's the use of it? Instead of saying, one goes deep into it. But the essence here is to say first, leave an impression.

Two, each break

1. What is it essentially?

Postcss can be intuitively understood as: it is a platform, platform, platform, important things to three times more cool, haha!

Why is it a platform? Because we use it directly, we don't feel capable of doing anything, but if we let some plug-ins run on it, it will be very powerful.

POSTCSS provides a parser that can parse CSS into an abstract syntax tree (AST).

After reading the above two, we can understand the model below.

　　

So, postcss it needs a plug-in system to work. We can pass the AST through the "plugin" and then convert the AST into a string and then output it to the target file. Of course, here is the API can be used, here do not speak, lest faint.

2. What can it do to solve our problems? How does it solve our problems?

The picture above is very clear, but I still do not know what is a thing! So be gentle and get a sense of the senses directly from the code level.

It provides additional functionality to the CSS;

By postcss This platform, we are able to develop some plugins to handle our CSS, such as the popular: autoprefixer

We can use JavaScript to develop plugins (this is important for the front end)

Well, see a familiar word: autoprefixer, let's make it a chestnut here, it might be easier to understand.

First of all, we need to do some preparation to install the necessary things.

POSTCSS command-line tools

sudo npm install-g postcss-cli

Autoprefixer Plug-in

sudo npm install-g autoprefixer

The first time with the command line can make you more intuitive to understand it, so please have a toss heart.

1. Let's take a look at the parameters of this command.

Postcss--help

Usage:/usr/local/bin/postcss-use plugin [--config|-c Config.json] [--output|-o

OUTPUT.CSS] [INPUT.CSS]

Options:

-C,--config JSON file with plugin configuration

-U,--use postcss plugin name (can be used multiple times)

-O,--output output file (stdout if not provided)

-D,--dir Output directory

-R,--replace replace input file (s) with generated output [Boolean]

-S,--syntax alternative input Syntax parser

-P,--parser alternative CSS parser

-T,--stringifier alternative output stringifier

-W,--watch auto-recompile when detecting source changes

-V,--version display version number [Boolean]

-H,--help display Help information [Boolean]

Example:

Postcss--use autoprefixer-c use autoprefixer as a postcss plugin

Options.json-o Screen.css Screen.css

Postcss--use autoprefixer Pass plugin parameters in

--autoprefixer.browsers "> 5%"-O plugin.option notation

Screen.css Screen.css

Postcss-u postcss-cachify-u use multiple plugins and multiple

autoprefixer-d Build *.css input files

Specify at least one plugin name.

PS: I posted it is convenient for everyone to look at the time without the computer ... ^_^

Well, first look at the file directory, here I just say a better way to write, is to configure some parameters to the configuration file.

　　

Config.json: All Configurations

P.json: Only autoprefixer plug-in configuration

Config.json's Content

{

"Use": ["Autoprefixer"],

"Input": "Src/index.css",

"Output": "Index.css",

"Autoprefixer": {

"Browsers": "> 5%"

}

}

P.json's Content

{

"Autoprefixer": {

"Browsers": "> 5%"

}

}

Next we enter in the terminal:

The most concise way

Postcss-c Config.json

A little more complicated way, here to use the-I parameter, help inside No, I was from the Config.json inside the configuration guessed out, the official that writing out not to

Postcss-u autoprefixer-c p.json-i Src/index.css-o index.css

The most complex way

Or not write better ...

The same effect as you usually think:

The source code in SRC/INDEX.CSS

`* {

Transition:all. 1s;

}`

After the converted code INDEX.CSS

`* {

-webkit-transition:all. 1s;

Transition:all. 1s;

}`

OK, now certainly to POSTCSS have a sense of understanding, next is the need to use their own cssnext this plug-in ~ See what will happen, here do not write, but also very useful, but it should still be the draft state.

We're not going to be able to use the command line, so let's go through the code writing and then use node to execute the file. Go directly to the code.

1. Install the required libraries first

NPM Install Postcss--save-dev

NPM Install Autoprefixer--save-dev

2. In fact, we should look at Postcss's Package.json file, to see what is included, to leave an impression

3. Code in the P.js

var postcss = require (' postcss ');

var autoprefixer = require (' autoprefixer ');

var fs = require (' FS ');

var css = ' * {transition:all. 1s;} ';

POSTCSS ([autoprefixer])

. Process (CSS)

. then (function (Result) {

This is what you need to learn, and see what the object contains.

Console.log (result);

if (RESULT.CSS) {

Fs.writefilesync (' Index.css ', result.css);

}

if (Result.map) {

Fs.writefilesync (' Index.css.map ', result.map);

}

});

4. Executive P.js

Node P

Well, the final result is the same as in the previous command line, except that the process is different. This should have more feelings for postcss. Not yet, don't panic ~ We also need to ask a question, I have SASS and other pre-processor, but also take it to the front end of the chaos? Because there are so many things in 2 years ~

Remember a word: existence is reasonable

Since it's reasonable, then we'll see what advantage it has.

3. It solves our problem why? What is the advantage?

For example, we use SASS to handle box-shadow prefixes, which we need to write:

/* CSS3 Box-shadow */

@mixin Box-shadow ($top, $left, $blur, $size, $color, $inset: false) {

@if $inset {

-webkit-box-shadow:inset $top $left $blur $size $color;

Box-shadow:inset $top $left $blur $size $color;

} @else {

-webkit-box-shadow: $top $left $blur $size $color;

Box-shadow: $top $left $blur $size $color;

}

}

Using POSTCSS we just have to write to the standard CSS, because the last autoprefixer will help us to add this thing ~

box-shadow:0 0 3px 5px rgba (222, 222, 222,. 3);

So, there's a problem that we often say about future coding. In fact, POSTCSS change is a development pattern.

SASS Tools: Source code, production environment CSS

POSTCSS: Production environment CSS--standard CSS, source code

This can appreciate the advantages, but at present we are SASS + postcss such a development model, in fact, I think is good, learn from each other, of course, in the POSTCSS platform can be done, but the current transition period, so better, more engineering. Next I will introduce some methods to purely use POSTCSS.

4. How to achieve the same functions as SASS, less, Stylus

In fact, I do not need to write this section of the ~ list plug-ins on the line, because the plug-in is the implementation, POSTCSS just provide a platform.

Actually can go to official look: plug-in system

Here are a few easy-to-understand plugins

Postcss-each

Postcss-for

Postcss-mixins

Postcss-extend

From the name you can see it ~ should be well understood.

5. What does it consist of?

In fact, from the official introduction, it only contains the following content:

CSS Parser

CSS node Tree API

SOURCE Map Generator

Build node Tree string

English is not very good = =, the 4 part of it, from the first figure can actually be seen.

Where do i I/O manifest itself? Well, it's easy to think, it's mainly reflected in:

Input: Plugin and CSS Parser

Output: Build node tree string

CSS Parser can be understood as an internal process, and the plug-in program is mainly embodied in:

POSTCSS ([autoprefixer])

The resulting node tree string is shown in the following:

POSTCSS (). Process (). Then (function (Result) {

This is it.

Console.log (RESULT.CSS);

});

Now I'm going to post an output of the result object above

Here I have introduced a Cssnano plug-in

Change the code on this point, in order to see the result more fully

var opts = {

From: ' Src/index.css ',

To: ' Index.css ',

Configure map

Map: {Inline:false}

};

Postcss ([Autoprefixer, Cssnano ()]). Process (CSS, opts)

Result {

Processor:processor {

Version number of the processor

Version: ' 5.0.10 ',

Load a bunch of plugins

Plugins: [

[Object], [object], [object], [object], [object],

[Object], [object], [object], [object], [object],

[Object], [object], [object], [object], [object],

[Object], [object], [object], [object], [object],

[Object], [object], [object], [object], [object],

[Object], [object]

]

},

Messages: [],

Root:root {

Raws: {

Semicolon:false,

After: '

},

Type: ' Root ',

Nodes: [

[Object]

],

Source: {

Input: [Object],

Start: [Object]

},

_autoprefixerdisabled:false,

_autoprefixerprefix:false,

Rawcache: {

Colon: ': ',

Indent: ",

BEFOREDECL: ",

Beforerule: ",

Beforeopen: ",

BeforeClose: ",

Beforecomment: ",

After: ',

Emptybody: ",

Commentleft: ",

Commentright: "

}

},

We configure the opts variable in our code

OPTs: {

From: ' Src/index.css ',

To: ' Index.css '

},

This is the regenerated node tree string.

Here are the effects of auto-complete and efficient compression

CSS: ' *{-webkit-transition:all. 1s;transition:all. 1s} ',

The configuration of the map file

Map

Sourcemapgenerator {

_file: ' Index.css ',

_sourceroot:null,

_skipvalidation:false,

_sources:arrayset {_array: [object], _set: [Object]},

_names:arrayset {_array: [], _set: {}},

_mappings:mappinglist {_array: [object], _sorted:true, _last: [Object]},

_sourcescontents: {' $src/index.css ': ' * {transition:all. 1s;} '},

This should be a chain to use it, for the moment do not delve into

Lastplugin: {

[Function]

Postcssplugin: ' Cssnano-reset-stylecache ',

Postcssversion: ' 5.0.10 '

}

}

In fact, this is a bit abstract, or to see the familiar API bar.

The sourcemap here shows that the conversion function in POSTCSS is a must, but the prerequisite does not mean that the source code and the target code cannot be exactly the same.

Here's the sourcemap of Chrome, a piece of crap! Let's look at the effect in Firefox.

　　

Here in Firefox automatically map the source files, very good!

6. Since the program can be used, then its API?

In fact, the official API has a detailed explanation, I looked at, a look on the understanding, no longer take the time to introduce, we can go to see, so you will know, so ~

PS: We can first look at node Common and node related, and then look at plugin

Official API

Here to see a DEMO, mainly do REM and PX units between the interchange, add processors can be used, very convenient:

var custom = function (CSS, opts) {

Css.eachdecl (function (decl) {

Decl.value = Decl.value.replace (/\d+rem/, function (str) {

return * parsefloat (str) + "px";

});

});

};

Development plugin can look at the official plugin guide

More meticulous place, then have time to write and write ^_^ a technology can not stop it ~

How do I apply it in engineering? Well, using Gulp, Grunt, webpack are OK, I think all understand postcss, use these is very simple, a look up information, copy a configuration can start using ~ so it, next time combine react To introduce a call: Postcss-js plug-in, it looks good, not in-depth use, when used to share it.

In fact, I am also a beginner, just use their own learning methods to comb into the article, the following are the articles I have read, part is quoted. Here is not all examples, look at the article a bit more ...

What the hell is a postcss?