摘要：的定位屬于預(yù)處理器嗎還是屬于后置處理器都不是，因?yàn)榫唧w做的事取決于開(kāi)發(fā)者使用了什么插件。這里做一個(gè)我覺(jué)得比較恰當(dāng)?shù)念?lèi)比，中的相當(dāng)于的中的，，等預(yù)處理器相當(dāng)于，雖然不是完全合理，但是還是比較恰當(dāng)。

原諒我取這樣的標(biāo)題，我知道 postCss 對(duì)于大多數(shù)前端開(kāi)發(fā)者來(lái)說(shuō)早已經(jīng)很熟悉了，但是樓主作為一個(gè)初出茅廬的前端er，還有好多的工具和技術(shù)沒(méi)接觸過(guò)，說(shuō)來(lái)慚愧。雖然平時(shí)也喜歡使用css預(yù)處理器比如 sass、less、stylus，但是關(guān)于css的其他工具確實(shí)接觸的少，postCss就是一個(gè)例子，于是今天就對(duì)它了解了一番。如果你對(duì)postCss也不是很了解，那么希望這篇博客可以幫助到你。

postCss 不是什么新玩意，而是一個(gè)幾年前就被廣泛使用的工具。我們通常說(shuō)的 postCss 一般指兩個(gè)方面：

postCss 本身。

postCss 衍生的生態(tài)系統(tǒng)，比如各種插件。

postCss 本身是一個(gè)JavaScript 模塊，它會(huì)讀取我們的css代碼，然后將它們轉(zhuǎn)化為一個(gè) 抽象語(yǔ)法樹(shù) （abstract syntax tree）。它還是一個(gè)插件系統(tǒng)，它提供了一些api，開(kāi)發(fā)者可以基于這些 api 開(kāi)發(fā)插件。

postCss 將我們的css代碼轉(zhuǎn)為抽象語(yǔ)法樹(shù)后，我們可以使用各種的插件去實(shí)現(xiàn)各種的功能，最后會(huì)轉(zhuǎn)化為字符串輸出到一個(gè)文件中。這里的插件可以是已存在的插件，也可以是按自己需要自己定制的插件。

postCss 屬于 預(yù)處理器 (preprocessor) 嗎？還是屬于 后置處理器 (postprocessor) ？都不是，因?yàn)?postCss 具體做的事取決于開(kāi)發(fā)者使用了什么插件。它可以通過(guò)相應(yīng)的插件去實(shí)現(xiàn)類(lèi)似 sass 等預(yù)處理器的功能，如： precss；也可以通過(guò)相應(yīng)的插件執(zhí)行后置處理器的工作，如：autoprefixer。

這里做一個(gè)我覺(jué)得比較恰當(dāng)?shù)念?lèi)比，css 中的 postCss 相當(dāng)于 JavaScript 的 babel；css 中的 sass，less，stylus 等預(yù)處理器相當(dāng)于 Typescript，雖然不是完全合理，但是還是比較恰當(dāng)。

其實(shí)我們很多時(shí)候都無(wú)意的使用到了 postCss，autoprefixer 就是一個(gè)例子，這個(gè)插件的功能就是自動(dòng)的為我們的css代碼加上對(duì)應(yīng)的前綴，以便兼容更多的瀏覽器，很多腳手架都會(huì)使用到這個(gè)插件。postCss 如何使用呢？使用方法 總的來(lái)說(shuō)就是根據(jù)自己的構(gòu)建工具或生產(chǎn)環(huán)境進(jìn)行對(duì)應(yīng)的配置。以 webpack 為例：

// 使用postcss-loader
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      }
    ]
  }
}

// 建立對(duì)應(yīng)的配置文件 postcss.config.js，使用對(duì)應(yīng)的插件實(shí)現(xiàn)對(duì)應(yīng)的功能。
module.exports = {
  plugins: [
    require("precss"),
    require("autoprefixer")
  ]
}

雖然現(xiàn)在postCss的插件已經(jīng)非常豐富了，但是有時(shí)候還是需要自己寫(xiě)一個(gè)插件來(lái)滿(mǎn)足自己的需求，下面來(lái)逐步說(shuō)一下如何自己定制一個(gè)postCss插件。

處理前：

div {
    color: mycolor
}

處理后：

div {
    color: crimson
}

這個(gè)插件的功能就是將我們 css 文件中的 mycolor 變量替換為 赤紅色 crimson。

假設(shè)我們用的構(gòu)建工具是 webpack。先簡(jiǎn)單的搭建一個(gè)webpack的工作環(huán)境：webpack 起步

// 新建文件夾 webpackStarterProject 然后運(yùn)行
npm init -y
npm install --save-dev webpack webpack-cli
npm install --save-dev style-loader css-loader postcss-loader

文件目錄

// webpackStarterProject root path
node_modules
index.js
style.css
index.html
package.json
webpack.config.js

然后 webpack.config.js 的配置與上面的配置基本一致。

const path = require("path")
// 使用postcss-loader
module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      }
    ]
  }
}

index.js 文件加入以下代碼：

// index.js 
import "./style.css";

style.css 文件加入以下代碼：

div {
  color: mycolor
}

index.html 文件加入以下代碼：

  
  
  
  


  

    what is my color ?
  
  

到這里我們的工作環(huán)境搭建完畢，開(kāi)始編寫(xiě)自己的postCss插件。

通常情況下，我們使用第三方插件的時(shí)候，都是通過(guò)npm將第三方插件包下載到項(xiàng)目的node_modules中來(lái)使用，這里因?yàn)槲覀兪亲约壕帉?xiě)插件，所以直接在 node_modules 中加入自己要編寫(xiě)的插件。在 node_modules 中新建文件夾 postcss-myplugin 來(lái)編寫(xiě)我們的插件。

// webpackStarterProject root path
node_modules
  |--- postcss-myplugin
index.js
style.css
index.html
package.json
webpack.config.js

進(jìn)入postcss-myplugin 文件夾，運(yùn)行以下命令：

npm init -y
npm install --save postcss

在 postcss-myplugin 文件夾中新建一個(gè) index.js，并加入一下代碼：

const postcss = require("postcss");
// 使用 postcss.plugin 方法創(chuàng)建一個(gè)插件
module.exports = postcss.plugin("myplugin", function myplugin() {
 
    return function (css) {
    // 此插件的功能將在這里添加。
 
    }
 
});

然后在 webpackStarterProject 根目錄下添加postcss配置文件 postcss.config.js：

module.exports = {
  plugins: [
  // 引用我們的插件
    require("postcss-myplugin")
  ]
}

當(dāng)前主要文件結(jié)構(gòu)為：

// webpackStarterProject root path
node_modules
   |--- postcss-myplugin
          |---node_modules
          |---index.js
index.js
style.css
index.html
package.json
webpack.config.js
postcss.config.js

接下來(lái)我們就可以繼續(xù)去實(shí)現(xiàn)自己插件的功能了，postCss提供了一系列的 api 方便我們開(kāi)發(fā)插件 PostCss Api。
給插件添加功能：

const postcss = require("postcss");

module.exports = postcss.plugin("myplugin", function myplugin() {

    return function (css) {
      css.walkRules(rule => {
      // 遍歷規(guī)則節(jié)點(diǎn)
        rule.walkDecls((decl) => {
          // 遍歷聲明節(jié)點(diǎn)
          let value = decl.value;
          if (value.indexOf("mycolor") != -1) {
          // 將 mycolor 變量替換為 crimson
            decl.value = value.replace("mycolor", "crimson")
          }
        })
      })
    }
 
});

大功告成！最后在package.json的script字段中添加以下命令：

"start": "webpack --config webpack.config.js"

運(yùn)行命令打包代碼，在瀏覽器中查看效果：

npm start

最后插件也可以再處理一下然后發(fā)布到npm上開(kāi)源出去。

postCss 本身是一個(gè)nodejs module，用于轉(zhuǎn)換css代碼成一個(gè)抽象語(yǔ)法樹(shù)，然后我們可以利用各種插件實(shí)現(xiàn)對(duì)css的各種操作。

postCss 既不是預(yù)處理器也不是后置處理器，而是類(lèi)似于babel的角色，做什么事情取決于使用了什么插件。

可以定制自己的插件，實(shí)現(xiàn)自己想要的功能。