開發一個psotcss插件

git地址：開發一個psotcss插件

節點類型

postcss會將咱們的css生成ast，而後會去遍歷它，在遍歷的過程當中會傳給咱們一些不一樣類型的節點對象，咱們主要須要瞭解的幾個類型：

• css ast主要有3種父類型

  • AtRule: @xxx的這種類型，如@screen
  • Comment: 註釋
  • Rule: 普通的css規則

• 還有幾個個比較重要的子類型：

  • decl： 指的是每條具體的css規則
  • rule：做用於某個選擇器上的css規則集合

這是test的地方的，不熟悉ast的能夠先了解一下:css ast結構

postCss操做方法

postCss爲咱們提供了一些方便的操做方法
遍歷

• walk: 遍歷全部節點信息，不管是atRule、rule、comment的父類型，仍是rule、 decl的子類型
• walkAtRules：遍歷全部的atRule
• walkComments：遍歷全部的註釋節點
• walkDecls：遍歷因此的屬性

• walkRules：遍歷全部的css代碼塊

  root.walkDecls(decl => {
      decl.prop = decl.prop.split('').reverse().join('');
  });

postcss在遍歷的過程當中，會將當前遍歷的對象的cell傳給回調函數，該參數是對應的rule，decl或者comment等Constructor等構造函數的實例，根據遍歷的節點不一樣，該實例可能會有以下屬性：

• nodes: css規則的節點信息集合

  • decl: 每條css規則的節點信息

    • prop: 樣式名，如width
    • value: 樣式值， 如10px
• type: 類型
• source: 包括start和end的位置信息，start和end裏都有line和* column表示行和列
• selector: type爲rule時的選擇器
• name: type爲atRule時@緊接rule名，譬如@import 'xxx.css'中的import
• params: type爲atRule時@緊接rule名後的值，譬如@import 'xxx.css'中的xxx.css
• text: type爲comment時的註釋內容

一樣還有繼承的一些方法，給我操做css的， 好比操做每條具體css屬性的declaration：

after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn

postcss plugin

postcss插件如同babel插件同樣，有固定的格式

export default postcss.plugin('postcss-plugin-name', function (opts) {
  opts = opts || {};
  return function (root, result) {
    // 處理邏輯
  };
});

註冊個插件名，並獲取插件配置參數opts

返回值是個函數，這個函數主體是你的處理邏輯，有2個參數，一個是root，css ast的根節點。另外一個是result，返回結果對象，譬如result.css，得到處理結果的css字符串，result.message包含組件裏建立的warnings和自定義信息，result.warn()創造一個warning實例並將其加入到result.message中，result.warnings()得到全部建立過的warning。

注意組件的異常信息處理，不要直接console，由於一些 postcss 處理器會過濾掉console的輸出致使異常信息丟失，用node.warn或者node.error創造CssSyntaxError 實例，會自動帶上源碼中的位置信息幫助debug，加到異常信息隊列裏。

直接調用postcss下的方法

能夠用postcss.parse來處理一段css文本，拿到css ast，而後進行處理，再經過調用toResult().css拿處處理後的css輸出，在一些簡單的處理中能夠用這種方法。

寫在最後：

• 想寫一下的能夠按照這裏的指引，很詳細https://github.com/postcss/postcss-plugin-boilerplate
• 這是我寫的一個將px轉爲vw的插件vw-by-px

參考：

• http://api.postcss.org
• postcss-pixel-to-viewport