Why we need PostCSS if we have Webpack o_O?

[uMaxmaxmaximus]

Why we need PostCSS if we have Webpack o_O? Really, i not understand. PostCSS is like Webpack, but only for css files? Then why is it needed? This is not a trolling, this is a question.

[ai]

webpack is a tool to pack all your ode into a bundles (including CSS).

PostCSS is a framework to create CSS tools.

webpack uses PostCSS inside (in css-loader) to work with CSS.

So webpack is a pack of transforms tools (including PostCSS) to make JS/CSS/images bundles.

But webpack contains only few CSS tools. Of course, you need more tools. You need Autoprefixer and here you will use PostCSS (by postcss-loader). You need to inline SVG with colors (and you will use PostCSS). You need to lint your CSS (and you will use Stylelint based on PostCSS). You may need some CSS4 polyfills (and again you will use cssnext from PostCSS).

So if you want to do something with CSS, you takes PostCSS and on top of this framework you create a better tool. This is why webpack uses PostCSS too to work with CSS.

[ai]

Not sure, that I answer to all your questions :). Feel free to sub other questions.

[uMaxmaxmaximus]

But webpack contains only few CSS tools. Of course, you need more tools. You need Autoprefixer and here you will use PostCSS (by postcss-loader). You need to inline SVG with colors (and you will use PostCSS). You need to lint your CSS (and you will use Stylelint based on PostCSS). You may need some CSS4 polyfills (and again you will use cssnext from PostCSS).

@ai That's what you call the PostCSS plug-in, is Webpask loaders, example:

'**/*.styl': 'style!css!css-min!autoprefixer!stylys'

We miss the contents of the file through a conveyor loaders:

1. Stylus preprocessor
2. autoprefixer add webdor prefixes
3. css-min minidy css
4. css convert to css
5. style include style in html head

But unlike PostCSS, webpack received files still somehow be combined intelligently, and automatically add to the generated html file. That is a standard conveyor processing of files in Webpack. In PostCSS the same, only css, but not for other types of files. Why does PostCSS need, if all he can do, Webpack can do, and even more?

[ai]

autoprefixer-loader uses PostCSS inside too ;).

Stylus didn’t use PostCSS. But you can use PostCSS based SugarSS and PreCSS and you will get faster build.

Webpack build-in CSS minifier is PostCSS based too (cssnano).

[ai]

When you need to do something with CSS, you need to:

1. Parse CSS string into AST objects.
2. Do something with this AST objects by API.
3. Generate new CSS string for change AST.
4. Generate source maps.

So, if you write some CSS tool, you need do have some parser to do 1, 3 and 4 steps. PostCSS is one of the best parser. Of course, webpack didn’t have anything to parse CSS.

So you need PostCSS to write this webpack loaders.

[ai]

So, anyway with style!css!css-min!autoprefixer!stylys you use PostCSS in many steps. But this PostCSS is hidden inside (in autoprefixer-loader and css-loader).

Second question: why you should use postcss-loader and not some loader wraps for PostCSS plugins (like autoprefixer-loader is just a wrap on top of PostCSS and PostCSS’s Autoprefixer):

Right now you re-parse source on every step:

1. Stylus parse .styl file from string to AST, than change AST and then convert AST back to string.
2. css-loader again parse CSS from Stylus output CSS string (by PostCSS), convert it and generate new string.
3. css-min parse CSS by own privtae CSS parser, remove spaces and generate new CSS string.
4. autoprefixer-loader again use PostCSS to parse CSS to AST.

Parsing is the longest step in processors. So most time of build you spend in unnecessary parsing.

If you will use postcss-loader with sugarss, precss and autoprefixer plugin, you will parse input source only once. PostCSS can share AST objects between all plugins. So your built perfomance will be increased in 2-5 times.

[uMaxmaxmaximus]

Parse CSS string into AST objects.
Do something with this AST objects by API.
Generate new CSS string for change AST.
Generate source maps.

Ooh i understand! PostCSS is a tool for creating tools for transform css code?? Oooh, PostCSS is lower than the level of Webpack, I suppose? =)

That is basically a tool for building tools?

[ai]

Sure, PostCSS is low-level tool to work with CSS. This is why webpack use PostCSS inside.

[uMaxmaxmaximus]

But as a bonus, PostCSS allows you to skip the file via conveyor of plugins, similar to a chain loaders Webpack? Suddenly a man have no Webpack. =) yes?

PostCSS this is epic!! Why no one says what the hell this thing is doing) ?? Why everywhere it is written only that "it revolution" and "it's cool" but nowhere written that it allows you to build CSS AST and easy to work with him ??? =)

[ai]

=^_^=

Yes, PostCSS could have own chain of plugins. But it is better than loaders chain in webpack. Loaders with with string input. So they need to parse file again and again.

In PostCSS chain all plugins will work with already parsed CSS, so it will be much faster.

[uMaxmaxmaximus]

Loaders with with string input. So they need to parse file again and again.

You mean that one loader can not transfer to another loader their parsed and modified AST, and is forced to pass a string? о_О

[ai]

Yeap, they didn’t do it (technically they can, but non of your loaders do it).

[uMaxmaxmaximus]

hmm, what distinguishes PostCSS, from dozens of ordinary CSS parsers? =_= convenience? and popularity?

[ai]

Sure, PostCSS is technically very close to other CSS parsers. Main difference is not so big:

1. PostCSS is very fast. The faster from parsers, which save spaces.
2. PostCSS save all symbols (including spaces and comments) to AST. So PosTCSS can be used in linting tools like Stylint.
3. PostCSS generates source map.
4. AST API is very rich in PostCSS, there are many methods to work with nodes (like HTML DOM API).
5. Also PostCSS has many custom parsers, which generate same AST API. So you could use PostCSS plugins to work with SCSS, Less or SugarSS source

[uMaxmaxmaximus]

It's phenomenal! And why some people compare it to the LESS and SASS? They think that PostCSS is a preprocessor, but not a utility for writing preprocessors? In all the articles I read today about PostCSS it is compared with the preprocessor. It's all meaningless, because it is completely different levels of abstraction. PostCSS lower level than the preprocessor. And it serves only as a UTILITY to create a preprocessor. I'm right? =)

If so, I will write on the http://habrahabr.ru (popular russian site 20kk people per month) lesson on working with PostCSS. finally normal language what it is and why you need. And at the Russian community there are no normal articles about PostCSS.

[ai]

Sure. PostCSS is not a preprocessor/postprocessor but a tool to write them.

[uMaxmaxmaximus]

@ai Oh, my God, you have opened my eyes. I'm going to write a lesson on working with PostCSS. Thank you, bye =)

[ai]

Sure. I think I should post this talk to Twitter, you asked good questions.

[uMaxmaxmaximus]

@ai Please, get your twitter

[HeikoMamerow]

Hey, I appreciate your conversation. This was very instructive for me. CПАСИБО ;-)

[uMaxmaxmaximus]

Все мы тут русские, просто притворяемся =)

[ai]

@uMaxmaxmaximus зато жители других стран могут прочитать 😊. Жалко, что Эсперанто не пошёл.

[uMaxmaxmaximus]

@ai обратная совместимость, все дела 😊