摘要：本期主要介紹以下幾個插件和幾個坑和坑這個就不用多說了，必裝插件之一。看似寫法沒有任何問題。編譯后的結(jié)果那么這樣就沒有問題了。

繼上一次PostCSS學(xué)習(xí)指南（一）后，漸漸開始在項目中應(yīng)用。

這次決定主要講解一些個人認為非常有幫助的PostCSS插件。

本期主要介紹以下幾個插件和幾個坑

autoprefixer
postcss-partial-import
postcss-advanced-variables
cssnano
postcss-px2rem
precss

postcss-nesting和postcss-nested

坑( ??? )?

這個就不用多說了，必裝插件之一。方便的寫規(guī)范的css，它會為你提供非常完整的hack兼容方案的。當(dāng)然這里需要了解一下的是，它的大部分兼容數(shù)據(jù)來源Can I Use，另外一個稍微需要了解的插件配置參數(shù)就是browsers，比如這樣寫：

module.exports = {
  plugins: [
    require("autoprefixer")({ browsers: "last 2 versions" })
  ]
}

關(guān)于這個參數(shù)的詳細介紹可以看看Browserslist Queries，文中說了，強烈建議將查詢寫入package.json（后面會告訴你為何要寫在這里），而非配置postcss.config.js中autoprefixer的browsers參數(shù)。所以此處建議寫法如下：

postcss.config.js

module.exports = {
  plugins: [
    require("autoprefixer");
  ]
}

package.json內(nèi)增加如下示例

"browserslist": [
  "> 1%",
  "last 2 versions"
]

這里我對著官方文檔簡單說一下數(shù)組內(nèi)的值對應(yīng)的含義：

last 2 versions: 每個瀏覽器中最新的兩個版本。

> 5% or >= 5%: 全球瀏覽器使用率大于5%或大于等于5%（上例中則是1%）。

其他的一些參數(shù)簡單介紹：

ie 6-8: 選擇包含ie6-8的版本。

Firefox > 20: 火狐版本號大于20。

還有很多不一一列舉，這里的配置還是很詳細的，一般來說最省事的就是不加參數(shù)，按照默認即可。

需要配置的話，就在package.json里面添加browserslist參數(shù)，這樣其他插件也能夠從中獲取到項目將要兼容的版本，目前包含以下幾個插件會讀取改配置：

Autoprefixer

babel-preset-env (no config support, only tool option)

eslint-plugin-compat

stylelint-no-unsupported-browser-features

postcss-normalize

關(guān)于autoprefixer的介紹差不多就這些了~

這個沒啥好說的，也是很容易理解的插件，就是讓你的css文件支持@import，支持W3C的寫法也支持SASS那種寫法，這里就不多說啦。

同樣的，像SASS那樣可以自定義變量并進行引用，用法也十分簡單，相信大家一定不用點開官方文檔也會用的~（你肯定還是點開了哈哈哈~你這叫胡開鏈接綜合癥，生怕錯過了啥內(nèi)容。）

很顯然這個插件作者比較高調(diào)，github的cssnano上面是沒有什么說明和介紹的，當(dāng)然官方也寫得很詳細了。這個插件給我的感覺就是css代碼壓縮工具（實際上它集成了很多強化的功能，表面上看起來是壓縮實際上進行了相當(dāng)多處理，可以看看這個表格Optimisations），他的配置建議采用默認配置，除非你知道你在做什么。

當(dāng)然我在測試使用中遇到了一點點問題，關(guān)于cssnano和autoprefixer結(jié)合使用，或者說是postcss.config.js插件引入順序有關(guān)的造成輸出不同的問題？我暫時還在研究，先看代碼：

testcssnano.css

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
}

postcss.config.js（第一種）

module.exports = {
  plugins: [
    require("cssnano")({
      preset: "default",
    }),
    require("autoprefixer")
  ]
}

輸出結(jié)果：

.test{border-radius:10px;display:flex}

postcss.config.js（第二種）

module.exports = {
  plugins: [
    require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    })
  ]
}

輸出結(jié)果：

.test{border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex}

問題一，如果手寫-moz-，cssnano會清除，可見示例，當(dāng)然或許這個屬性在火狐已經(jīng)支持不需前綴所以，就被去掉了。

問題二，如果在配置文件中，cssnano在autoprefixer之前引用，假設(shè)根據(jù)webpack的loader執(zhí)行順序規(guī)則相同的話，大概postcss.config.js中的插件也是這樣由下而上依次執(zhí)行，因此，在第一種例子中，css代碼先被autoprefixer處理，然后再執(zhí)行cssnano清除了那些多余的前綴代碼？大致可分解為：

第一步autoprefixer處理結(jié)果：

.test {
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
}

第二步cssnano處理結(jié)果：

.test{border-radius:10px;display:flex}

可是我要遺憾的告訴大家。。。這個可能是錯誤的結(jié)論！！！

因為我將第一步的結(jié)果作為初始css，將postcss.config.js中僅引用一個cssnano插件來執(zhí)行的結(jié)果如下：

.test{border-radius:10px;display:flex;display:-webkit-box;display:-ms-flexbox}

因此，這個問題就來了。。。cssnano確實將-moz-去掉，但是他并沒有處理其他的關(guān)于display的兼容代碼。

于是我再做了一個測試：

我將css代碼改為：

.test {
  -webkit-transform: scale(.5) translate(10, 20);
  -moz-transform: scale(.5) translate(10, 20);
  -ms-transform: scale(.5) translate(10, 20);
  -o-transform: scale(.5) translate(10, 20);
  transform: scale(.5) translate(10, 20);
}

而postcss.config.js還是同時引入cssnano和autoprefixer，經(jīng)過測試，無論誰先誰后輸出結(jié)果均為：

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

如果css代碼改為：

.test {
  transform: scale(.5) translate(10, 20);
}

postcss.config.js同時引入cssnano和autoprefixer，

第一種cssnano在前結(jié)果：

.test{transform:scale(.5) translate(10,20)}

第二種autoprefixer在前結(jié)果：

.test{-webkit-transform:scale(.5) translate(10,20);transform:scale(.5) translate(10,20)}

結(jié)果又不一樣，不知道看到這里大家暈了沒有。

根據(jù)觀察，postcss.config.js的插件執(zhí)行順序是有要求的，至少在同時使用cssnano和autoprefixer的時候，cssnano一定要在autoprefixer之后，否則autoprefixer可能會失效！

另外cssnano和autoprefixer都會對很舊的兼容寫法進行精簡，例如上文有一段有很多個transform屬性的css代碼，autoprefixer會（根據(jù)browserslist）剔除其他的。

至于順序問題，我后面繼續(xù)進行研究！

做移動端，適配是個頭疼的問題，不過我目前還是使用想對穩(wěn)定的方案flexible，那么就需要用rem來做主要的單位，這里不說適配問題只說這個插件，一般移動端，設(shè)計師給的設(shè)計稿都是750px寬，你只需要下面這樣設(shè)置，就可以直接在代碼里面寫你在PSD量的像素值了，這真是太令人激動了！

require("postcss-px2rem")({
  remUnit: 75,
  threeVersion: true
})

因為這個postcss-px2rem又是來源于px2rem的，所以詳細的說明見px2rem，我這里寫了兩個參數(shù)，一個remUnit，這個對應(yīng)的是每rem對應(yīng)的px值，既然750px，就寫75啦，不知道這樣理解對不對。另一個threeVersion則對應(yīng)三個不同dpr下的大小，這個比較少用，需要注意的是處理這些參數(shù)，是否轉(zhuǎn)換rem都和注釋有關(guān)，這里就不細說了，看看文檔就好~當(dāng)然這里也埋下一個坑，等下會提到。

這就是個大雜燴，主要是為了滿足SASS開發(fā)者的習(xí)慣，繼承了很多插件，本篇前后文都有提及precss內(nèi)的部分插件，如果并不是全部用到，我建議還是一個個手動安裝所需插件來進行配置，這東西，配好了以后也就不會經(jīng)常改動了，而且個人認為用大雜燴很容易出現(xiàn)一些坑，又很難排查，例如下面兩個插件，大家仔細看看。

另外還有幾個插件，建議安裝（當(dāng)然如果你完全不知道干啥的可以忽略）：

postcss-mixins 一個和SASS的mixins用法相同的插件

postcss-atroot 讓你的嵌套css處于根部，官方有個bar.css的@import的例子很棒，可以看看舉一反三

postcss-extend 有相同結(jié)構(gòu)卻有那么一點點不同的區(qū)別，用這個可以方便的統(tǒng)一管理相同部分樣式代碼

其他的一些我個人覺得不常用或者說實用意義不大所以就沒有寫出來了。

這兩個也是從precss里面拿出來的，就是仿SASS的嵌套css寫法用。為啥把這兩個放一起寫，因為他們長的太像了。只看名字鬼知道他們的區(qū)別，然而他們都被加入到precss里面去了。據(jù)precss介紹，他們兩個的區(qū)別是：

postcss-nesting: W3C nested selectors

postcss-nested: Sass-like nested selectors

光看這兩行我是看不懂到底是個啥玩意，難道第一個是符合W3C規(guī)范的嵌套選擇？粗略看了下兩個插件的說明文檔，沒看出沒啥區(qū)別。行，那手動寫代碼來一個個試試。先安裝postcss-nesting，編譯試試，嘩嚓一片紅。。。咋回事，我們先看看代碼片段。

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

看似SASS寫法沒有任何問題。可是它提示的報錯信息讓人看不大懂

ERROR in ./src/style/index.css
Module build failed: ModuleBuildError: Module build failed: Error: undefined:783:6: property missing ":"
    at error (D:webProjectsmobileweb
ode_modulescsslibparseindex.js:62:15)
    at declaration (D:webProjectsmobileweb
ode_modulescsslibparseindex.js:223:33)
    at declarations (D:webProjectsmobileweb
ode_modulescsslibparseindex.js:252:19)

啥玩意missing了個冒號嘛。。。改來改去都不對。索性拿來官方的實例。才看清楚。原來每個嵌套的樣式前面都需要一個&（注意符號后面有個空格），實際上應(yīng)該如下才對：

.catis-list {
  padding: 0 50px;
  overflow: hidden;
  & li {
    list-style: none;
    float: left;
    margin-top: 38px;
    width: 113px;
    &:not(:nth-child(4n)) {
      margin-right: 66px;
    }
    & .iconfont {
      font-size: 100px;
      line-height: 100px;
      color: #506071;
      display: block;
      text-align: center;
    }
    & .cati-name {
      font-size: 28px;
      line-height: 40px;
      display: block;
      color: #999;
      text-align: center;
    }
  }
}

這里面有一段用到偽類其中&符號后面是沒有空格的，是正確的。編譯后的結(jié)果：

.catis-list {
  padding: 0 0.666667rem;
  overflow: hidden;
}

.catis-list li {
  list-style: none;
  float: left;
  margin-top: 0.506667rem;
  width: 1.506667rem;
}

.catis-list li:not(:nth-child(4n)) {
  margin-right: 0.88rem;
}

.catis-list li .iconfont {
  font-size: 1.333333rem;
  line-height: 1.333333rem;
  color: #506071;
  display: block;
  text-align: center;
}

.catis-list li .cati-name {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  display: block;
  color: #999;
  text-align: center;
}

那么這樣就沒有問題了。和官方的說明的是一樣的，但是另一方面，如果每次都要寫&加空格，那豈不是很麻煩，習(xí)慣寫SASS的兄弟們肯定不愿意這樣做啦。

那么我要說的就是另一個插件postcss-nested，如precss所述，這個的確是SASS-LIKE了。當(dāng)然我暫時還不太明白為何precss要收入兩個nest插件（為了滿足不同開發(fā)人員的習(xí)慣？）。我們修改postcss.config.js使用postcss-nested，并重新修改樣式代碼之前第一段，再次編譯執(zhí)行，一切OK，那么結(jié)論就是，如果僅習(xí)慣于SASS的嵌套寫法，安裝postcss-nested插件即可~

最后來說說我遇到的坑，除了剛才說的cssnano和autoprefixer同時使用需要注意順序問題。還有另一個順序研究，就是確定好將要使用的插件后，在postcss.config.js中配置插件require順序還是有講究的，這里我個人觀察的確還是從上往下的（至于是不是每個插件輪流處理完文件后挨個執(zhí)行我尚不確定），比如說，postcss-partial-import這個理應(yīng)是第一個引入的，你若是把它放在最后面，而css代碼中第一行就用了@import那肯定會報錯！所以，建議根據(jù)css代碼的寫法來決定你的執(zhí)行順序。

postcss-nested插件是大部分SASS開發(fā)者所喜愛的，但是你在css文件中用sass寫法會遇到以下幾個問題：

csslint，css文件不支持嵌套，變量等寫法，如果你將文件模式改為sass，注釋的方式會變成//，而非/* comments */，當(dāng)然你可以手寫/* ... */這樣的注釋，但是用快捷鍵進行注釋會很痛苦。

這里有個小技巧，讓項目所有css文件均為sass模式下編輯，在項目settings.json添加：

"files.associations": {
  "*.css": "scss"
}

當(dāng)然你若是想要支持//注釋也是可以的，請再安裝postcss-scss插件，我這里不多說這個了，因為我已經(jīng)決定手寫注釋了?

你手寫注釋沒有問題，然而編譯出來的東西會出問題，你樣式中最后一行如果將注釋寫在花括號內(nèi)部，它轉(zhuǎn)換出來的代碼，注釋會在外部，這是個大坑，因為在使用postcss-px2rem的時候，那注釋來控制是否轉(zhuǎn)換的功能就失效了。我文字描述可能讓人迷糊，所以看看代碼：

例如CSS部分代碼：

.test {
  color:#999;
  border:1px solid #ffffd; /* no */
  .inner {
    color:#333;
  }
}

轉(zhuǎn)換后：

.test {
  color:#999;
  border:0.13333rem solid #ffffd;
}
/* no */
.test .inner {
  color:#333;
}

而不是我想要的：

.test {
  color:#999;
  border:1px solid #ffffd;
}
.test .inner {
  color:#333;
}

理論上是應(yīng)該輸出我想要的結(jié)果，卻沒有輸出正確，錯誤的將1px的border轉(zhuǎn)成rem，原因就是先執(zhí)行的postcss-nested將注釋弄在外部后，postcss-px2rem無法識別到它的規(guī)則了。

我一開始也是裝了precss后發(fā)現(xiàn)該問題，后來查了很久才發(fā)現(xiàn)是這個插件的問題。同時也發(fā)現(xiàn)了這個人其實已經(jīng)提過issue了Wrong location of comment of the last declaration in a nested rule definition只是沒人解決。

而我臨時處理的方法就是只好將要注釋的那段代碼不要寫在最后一行了。如下：

.test {
  border:1px solid #ffffd; /* no */
  color:#999;
  .inner {
    color:#333;
  }
}

可能有時候并不會有兩個樣式給border墊底，如果只有一行border的樣式，就只能這樣：

.test {
  .inner {
    color:#333;
  }
  border:1px solid #ffffd; /* no */
}

這樣倒是可以了，不過看起來很奇怪，所以如果你使用和我相同的處理方式時，務(wù)必注意此點（寫完本文時我似乎發(fā)現(xiàn)了更好的解決方案，等確認了沒有問題后，放在下一期來寫~）。

（我記得好像還有坑的，硬是想了半天想不起來了。。。那就先這樣吧）

最后如果你還想探索更多好玩的好用的插件，你可以看看這里PostCSS Plugins List還有這個可以搜索的分類插件列表，如果你發(fā)現(xiàn)了更棒的插件，也歡迎留言喔~
另外上面的例子如果我沒有寫的很明白，或者你只是想直接拿來快速測試使用的話，可以看看這個mobileweb

（關(guān)于第三期PostCSS的內(nèi)容還在考慮。。。可能是對第二期的補充和填坑~敬請期待?）

關(guān)于我個人的PostCSS一系列學(xué)習(xí), 介紹及總結(jié), 有興趣可以參閱:

PostCSS自學(xué)筆記（一）【安裝使用篇】

PostCSS自學(xué)筆記（二）【插件篇】

PostCSS自學(xué)筆記（二）【番外篇一】

PostCSS自學(xué)筆記（二）【番外篇二】