Webpack postcss loader, what's its purpose?

Question

I am trying to find out, what the postcss-loader is good for.

On the github page

https://github.com/postcss/postcss-loader

it says:

Loader for webpack to process CSS with PostCSS

I dont't get that: So, PostCSS is a a WP-Loader to process CSS with PostCSS?

IMHO, that's a circular definition.

So what is PostCSS, is it a CSSLoader? Or, since it's called Post CSS is it a loader to run after some other CSS-loader?

Glyptograph

Answer 1

So, PostCSS is a a WP-Loader to process CSS with PostCSS?

No.

PostCSS-loader is a WP-Loader so you can process CSS with PostCSS inside Webpack.

i.e. It loads PostCSS into Webpack.

IMHO, that's a circular definition

It isn't because PostCSS and PostCSS-loader are different things.

So what is PostCSS, is it a CSSLoader?

No. PostCSS is:

a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Dalston

Answer 2

Actually, it isn't a direct plugin for PostCSS, it works inside Webpack. if you use Webpack in your project for module bundling, then for using PostCSS as CSS Preprocessor you must use postcss-loader and add configs of it.

For example, you can see THIS REPO, in webpack folder, there is two configuration file for development and production environment, open one of them, no different, and search the postcss-loader word in it, see a complete example of this usage.

Rally

the repo can't be reached via "Access denied" – Ringmaster

@AmirhosseinEbrahimi, this repo is public, but your IP in under USA sanctions, so use a VPN to pass the sanction. – Rally

Answer 3

PostCSS: use JavaScript plugin to transform CSS.

PostCSS Loader: process CSS with PostCSS inside Webpack

Example 1

/* Before */
.example {
  display: flex;
}

/* After */
.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Example 2:

/* Before */
:root {
  --green: #00ff00;
}

.example {
  color: var(--green);
}

/* After */
h1 {
  color: #00ff00;
}

Cornia