摘要：的定位屬于預處理器嗎還是屬于后置處理器都不是，因為具體做的事取決于開發者使用了什么插件。這里做一個我覺得比較恰當的類比，中的相當于的中的，，等預處理器相當于，雖然不是完全合理，但是還是比較恰當。

原諒我取這樣的標題，我知道 postCss 對于大多數前端開發者來說早已經很熟悉了，但是樓主作為一個初出茅廬的前端er，還有好多的工具和技術沒接觸過，說來慚愧。雖然平時也喜歡使用css預處理器比如 sass、less、stylus，但是關于css的其他工具確實接觸的少，postCss就是一個例子，于是今天就對它了解了一番。如果你對postCss也不是很了解，那么希望這篇博客可以幫助到你。

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

postCss 本身。

postCss 衍生的生態系統，比如各種插件。

postCss 本身是一個JavaScript 模塊，它會讀取我們的css代碼，然后將它們轉化為一個 抽象語法樹 （abstract syntax tree）。它還是一個插件系統，它提供了一些api，開發者可以基于這些 api 開發插件。

postCss 將我們的css代碼轉為抽象語法樹后，我們可以使用各種的插件去實現各種的功能，最后會轉化為字符串輸出到一個文件中。這里的插件可以是已存在的插件，也可以是按自己需要自己定制的插件。

postCss 屬于 預處理器 (preprocessor) 嗎？還是屬于 后置處理器 (postprocessor) ？都不是，因為 postCss 具體做的事取決于開發者使用了什么插件。它可以通過相應的插件去實現類似 sass 等預處理器的功能，如： precss；也可以通過相應的插件執行后置處理器的工作，如：autoprefixer。

這里做一個我覺得比較恰當的類比，css 中的 postCss 相當于 JavaScript 的 babel；css 中的 sass，less，stylus 等預處理器相當于 Typescript，雖然不是完全合理，但是還是比較恰當。

其實我們很多時候都無意的使用到了 postCss，autoprefixer 就是一個例子，這個插件的功能就是自動的為我們的css代碼加上對應的前綴，以便兼容更多的瀏覽器，很多腳手架都會使用到這個插件。postCss 如何使用呢？使用方法 總的來說就是根據自己的構建工具或生產環境進行對應的配置。以 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"
          }
        ]
      }
    ]
  }
}

// 建立對應的配置文件 postcss.config.js，使用對應的插件實現對應的功能。
module.exports = {
  plugins: [
    require("precss"),
    require("autoprefixer")
  ]
}

雖然現在postCss的插件已經非常豐富了，但是有時候還是需要自己寫一個插件來滿足自己的需求，下面來逐步說一下如何自己定制一個postCss插件。

處理前：

div {
    color: mycolor
}

處理后：

div {
    color: crimson
}

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

假設我們用的構建工具是 webpack。先簡單的搭建一個webpack的工作環境：webpack 起步

// 新建文件夾 webpackStarterProject 然后運行
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 ?
  
  

到這里我們的工作環境搭建完畢，開始編寫自己的postCss插件。

通常情況下，我們使用第三方插件的時候，都是通過npm將第三方插件包下載到項目的node_modules中來使用，這里因為我們是自己編寫插件，所以直接在 node_modules 中加入自己要編寫的插件。在 node_modules 中新建文件夾 postcss-myplugin 來編寫我們的插件。

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

進入postcss-myplugin 文件夾，運行以下命令：

npm init -y
npm install --save postcss

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

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

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

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

當前主要文件結構為：

// 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

接下來我們就可以繼續去實現自己插件的功能了，postCss提供了一系列的 api 方便我們開發插件 PostCss Api。
給插件添加功能：

const postcss = require("postcss");

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

    return function (css) {
      css.walkRules(rule => {
      // 遍歷規則節點
        rule.walkDecls((decl) => {
          // 遍歷聲明節點
          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"

運行命令打包代碼，在瀏覽器中查看效果：

npm start

最后插件也可以再處理一下然后發布到npm上開源出去。

postCss 本身是一個nodejs module，用于轉換css代碼成一個抽象語法樹，然后我們可以利用各種插件實現對css的各種操作。

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

可以定制自己的插件，實現自己想要的功能。