A more convenient way to handle CSS-postcss

A more convenient way to handle CSS-postcss

In general, the introduction of a thing is to be from what, how to use the order of speaking. I feel that it is easy for everyone to lose interest, first look at Postcss can do something, interested in the words to look down, otherwise may not be patient to see down. Let's get started.

What POSTCSS can do to complement CSS Property browser prefixes

The handwritten code can be like this:

.div{    display: flex;}

Postcss can be converted into this:

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

Check CSS Syntax

    body{    color: #f0;    }

The following tips will be available:

src/er.css 2:12  ?  Unexpected invalid hex color "#f0"   color-no-invalid-hex[18:27:28] ‘css-lint‘ errored after 98 ms[18:27:28] Error in plugin ‘gulp-stylelint‘Message:    Failed with 1 error

Embrace the next version of the specification CSS is CSS4

For the next specification of CSS, variables, methods and other functions will be added, you can define a variable:

:root{     --red:#d33;  }  {       color: var(--red);  }

Of course it doesn't work directly on the existing browser, just as es2015 just started, we need a converter to convert it to the current available specification. POSTCSS plug-ins can do it.

a{    color:#d33}

In addition to the above, there are many other features that POSTCSS and its plugins can provide.

What is Postcss

Now let's go back to the basic question of what POSTCSS is.
Invoking the definition of the official website, a tool that uses JS to convert CSS (A-tool for transforming-CSS with JavaScript). In fact, more often than not, we refer to postcss as having two meanings:

1. Postcss itself, which is the installation part of our NPM install
   
2. Rich plug-in system based on POSTCSS.
   The above features are all based on the functionality provided by the POSTCSS plugin.

Postcss itself is not directly used for processing styles, only with its plug-in to complete the relevant compilation work.

Postcss is not a substitute for precompiled languages

I think you've been reproducing two nouns in your head, Less/sass, and I think postcss, like both, is a CSS precompiled language or a language that acts like that. POSTCSS is not to replace which, more is to provide a supplement, can completely be complementary concept.
As a tool that uses JS to convert the CSS into an AST and then process it, it is not a substitute for the preprocessing language, POSTCSS must be a CSS file, so it can be combined with the precompiled language and then processed using the precompiled language after it is converted to CSS.
I have always believed that the two are not mutually exclusive relationships and can be used in complementary ways.

Why do I need postcss

There may be a doubt that since the two are not in conflict with each other, I am currently using Less/sass to meet my needs and why use new things. I think the main reason is that it provides a rich plug-in function, can work more simplistic, convenient, in a word, you just need to write basic CSS, and other functions to give postcss just fine. A simple contrast may be clearer.

Implements the ability to add browser prefixes to CSS properties

Compare the implementations of less and POSTCSS:

1, for less, must be written a method

.flex-block{    display: -ms-flexbox;    display: -webkit-flex;    display: flex;}.test{    .flex-block()}

2. Using Postcss

.test{    display: flex;}

Only need to compile the time to use autoprefixer processing is good.
Perhaps the effect of a property is not particularly obvious, if there are many attributes to be processed?

.flex-block{    display: -ms-flexbox;    display: -webkit-flex;    display: flex;}.transform(){    //仅仅是举例子}.ccc(){}.test{    .flex-block()    .transform()    .ccc()}

At this time postcss still only need to be as follows:

.test{    display: flex;    transform:rotate(7deg);}

At this point I can see the convenience of postcss, I have always thought that can be abstract public things completely unnecessary to repeat the manual development.

POSTCSS Working principle

POSTCSS itself is a node module that parses a CSS file into an abstract syntax tree (AST), passes the tree over multiple plug-in methods, and then converts the AST to a string return, which can be exported to the destination file. The plugin can choose whether to change the syntax tree during the transfer process, and the change of appeal can be recorded by Sourcemap. As shown in the following process (borrow a picture of W3cplus):

In fact, here we should be related to Babel, look at the function:

• The conversion of future specifications into the current specification of the escape device
• Implementation is the same, the source files are resolved to AST and then processed through the plugin.
• A wide range of plugins to meet different needs
• Support for custom plugin development

Introducing Postcss in the current workflow

You may have this idea and it's a new tool, and I'm not going to make a big move in my current development framework. In fact, this worry is not necessary. Postcss is very easy to introduce in the current workflow. Whether it is webpack or gulp, there is a more convenient way. The official introduction of the document is detailed

Conclusion

Originally very early saw Postcss, was too young to think is less of a substitute, so has not been to pay attention. After understanding the feeling is really good, as to how to use here does not go to the demo, interested can see my simple example of the hope that more people to use.

Reference articles

http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/

A more convenient way to handle CSS-postcss