PostCSS - The Next Cool Thing

What is post CSS?

Is PostCSS one of Sass/Less kind things?
The one-word answer is: NO
In more than one word -
postCss it is lot of plugins under same parent node plugin clalled: postcss , which have same target - to do various things on CSS.

Which things for example?

First of all take a look on postCSS README at github page and then here to get the impression of kind of various plugin some good guys made for us... (writing this post I was inspired by this grate tutorial)

Challenge

The challenge is to play a little with postCSS and use it in react-first-steps repo, from previous posts
To make use of variables mixins and sass like postcss-nested plugins

webpack.config

First you need to install all the plugins

npm i postcss-loader postcss-import postcss-mixins postcss-nested postcss-simple-vars  --save-dev

to add postcss.config file to the project

var postCSSConfig = [
/* autoprefix for different browser vendors */
require('autoprefixer'),
/* reset inherited rules */
require('postcss-initial')({
  reset: 'inherited' // reset only inherited rules
}),
/* enable css @imports like Sass/Less */
require('postcss-import'),
/* enable mixins like Sass/Less */
require('postcss-mixins')({
  mixins: require('./src/mixins')
}),
/* enable nested css selectors like Sass/Less */
require('postcss-nested'),
/* require global variables */
require('postcss-simple-vars')({
  variables: function variables() {
    return require('./src/variables')
  },
  unknown: function unknown(node, name, result) {
    node.warn(result, 'Unknown variable ' + name)
  }
}),
/* PostCSS plugin for making calculations with math.js  */
require('postcss-math'),
/* transform W3C CSS color function to more compatible CSS. */
require('postcss-color-function')
]

// Export the PostCSS Config for usage in webpack
module.exports = postCSSConfig;

To update webpack.config file

         {
            test: /\.css$/,
            include: srcPath,
            loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&camelCase!postcss'          
         }]

for view the full code look at this repo