PostCSS不是类似Less，Sass，Stylus那样的CSS预处理器，而是一种允许用JS插件来转变样式的工具。看官网的截图：A tool for transforming CSS with JavaScript
PostCSS的插件很多，本篇先介绍3个常用插件：
- pre-css
- autoprefixer
- css-next
pre-css
pre-css插件是一款css预处理器。语法和主流的sass，stylus，less极其相似，例如同样用嵌套来表示层级，同样用&来表示父选择器等。也支持mixin，extends，条件@if，循环@each等。
具体语法请看github上的例子，如果有css预处理器开发经验，很容易上手，就不多介绍了。
autoprefixer
autoprefixer插件会给根据CanIUse的兼容性去检查你的CSS代码，然后自动为你的CSS代码加上浏览器厂商的私有前缀，一图胜千言：
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.loading-circle {
animation: rotate .4s linear infinite;
}
经autoprefixer插件处理后会，CSS代码里自动被添加了浏览器厂商的私有前缀：
@keyframes rotate {
from {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.loading-circle {
-webkit-animation: rotate .4s linear infinite;
animation: rotate .4s linear infinite;
}
这样程序猿可以专心写自己的代码了，按作者的说法就是可以：Write pPure CSS。
该插件也可以用browserlist来指定需要支持的浏览器和版本。不在browserlist列表里的浏览器和版本不会自动添加私有前缀。在package.json里添加browserlist列表：
{
...
"browserslist": [
"> 1%", //全球有超过1%的人使用的浏览器
"ie 9-10" //虽然使用者低于1%，但仍旧支持一下
]
}
browserlist插件会查询CanIUse上的数据，返回支持的浏览器和版本。autoprefixer插件会给这些浏览器和版本加上私有前缀。例如上例中，ie8及以下就会被华丽地无视。（最后根据browserlist的一个小Demo，真心期待IE9也能早点退出历史舞台）
因为autoprefixer插件被集成进了css-next里，因此我们直接用css-next即可。（browserlist如有需求，还是要手动在package.json里配一下的）
css-next
css-next插件让能让你用上未来的css语法。这牛不是我吹的，见官网标语，有图有真相：
我所能理解的优秀的技术或工具，应该能解决现有条件下某些无法解决的痛点。但我能力有限，项目中尝鲜下来，暂时未发现css-next解决了什么其他预处理器如sass，less无法解决的痛点。感觉最大的好处是集成了autoprefixer插件。
webpack集成
将postcss用webpack集成进项目中：
const precss = require('precss');
const cssnext = require('postcss-cssnext');
module.exports = {
...
postcss: [
precss,
cssnext
],
module: {
loaders: [
...
{
test: /\.[p]?css$/,
loader: 'style!css!postcss'
}
]
},
...
};
由于css-next里自带autoprefixer插件，因此不必再手动配autoprefixer了。（而且试下来手动单独配autoprefixer的话，webpack会有重复配置的警告）