New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why we need PostCSS if we have Webpack o_O? #861

Closed
uMaxmaxmaximus opened this Issue Aug 4, 2016 · 23 comments

Comments

Projects
None yet
3 participants
@uMaxmaxmaximus

uMaxmaxmaximus commented Aug 4, 2016

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.

image

@ai

This comment has been minimized.

Member

ai commented Aug 4, 2016

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 ai closed this Aug 4, 2016

@ai

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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?

image

@ai

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

=^_^=

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

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

@ai

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 4, 2016

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

@ai

This comment has been minimized.

Member

ai commented Aug 4, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 5, 2016

@ai Please, get your twitter

@HeikoMamerow

This comment has been minimized.

HeikoMamerow commented Aug 6, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 7, 2016

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

@ai

This comment has been minimized.

Member

ai commented Aug 7, 2016

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

@uMaxmaxmaximus

This comment has been minimized.

uMaxmaxmaximus commented Aug 7, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment