PostCSS不是類似Less，Sass，Stylus那樣的CSS預(yù)處理器，而是一種允許用JS插件來轉(zhuǎn)變樣式的工具。看官網(wǎng)的截圖：A tool for transforming CSS with JavaScript

PostCSS的插件很多，本篇先介紹3個(gè)常用插件：

• pre-css
• autoprefixer
• css-next

pre-css

pre-css插件是一款css預(yù)處理器。語法和主流的sass，stylus，less極其相似，例如同樣用嵌套來表示層級(jí)，同樣用&來表示父選擇器等。也支持mixin，extends，條件@if，循環(huán)@each等。

具體語法請(qǐng)看github上的例子，如果有css預(yù)處理器開發(fā)經(jīng)驗(yàn)，很容易上手，就不多介紹了。

autoprefixer

autoprefixer插件會(huì)給根據(jù)CanIUse的兼容性去檢查你的CSS代碼，然后自動(dòng)為你的CSS代碼加上瀏覽器廠商的私有前綴，一圖勝千言：

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.loading-circle {
  animation: rotate .4s linear infinite;
}

經(jīng)autoprefixer插件處理后會(huì)，CSS代碼里自動(dòng)被添加了瀏覽器廠商的私有前綴：

@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列表里的瀏覽器和版本不會(huì)自動(dòng)添加私有前綴。在package.json里添加browserlist列表：

{
  ...
  "browserslist": [
    "> 1%",     //全球有超過1%的人使用的瀏覽器
    "ie 9-10"   //雖然使用者低于1%，但仍舊支持一下
  ]
}

browserlist插件會(huì)查詢CanIUse上的數(shù)據(jù)，返回支持的瀏覽器和版本。autoprefixer插件會(huì)給這些瀏覽器和版本加上私有前綴。例如上例中，ie8及以下就會(huì)被華麗地?zé)o視。（最后根據(jù)browserlist的一個(gè)小Demo，真心期待IE9也能早點(diǎn)退出歷史舞臺(tái)）

因?yàn)閍utoprefixer插件被集成進(jìn)了css-next里，因此我們直接用css-next即可。（browserlist如有需求，還是要手動(dòng)在package.json里配一下的）

css-next

css-next插件讓能讓你用上未來的css語法。這牛不是我吹的，見官網(wǎng)標(biāo)語，有圖有真相：

我所能理解的優(yōu)秀的技術(shù)或工具，應(yīng)該能解決現(xiàn)有條件下某些無法解決的痛點(diǎn)。但我能力有限，項(xiàng)目中嘗鮮下來，暫時(shí)未發(fā)現(xiàn)css-next解決了什么其他預(yù)處理器如sass，less無法解決的痛點(diǎn)。感覺最大的好處是集成了autoprefixer插件。

webpack集成

將postcss用webpack集成進(jìn)項(xiàng)目中：

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插件，因此不必再手動(dòng)配autoprefixer了。（而且試下來手動(dòng)單獨(dú)配autoprefixer的話，webpack會(huì)有重復(fù)配置的警告）