PostCSS原理解析

寫在前面的話

前端工程化日益成熟今天，咱們對於工具愈來愈深的封裝。無論是從vue-cli的3.0版本起，仍是umi、bigfish 等前端腳手架，對於webpack都封裝在內，對於工程化無疑是高效的，但也在必定程度上讓新手們者失去了從零配置一個項目的機會，因此不少時候仍是但願能透過大神們的框架，研究一下底層結構。

簡介

PostCSS是一個經過JS插件轉換樣式表的工具，它自己並非一門新的CSS語言，而是一個平臺或者是生態心態，提供插件擴展服務即JS API，開發者能夠根據這些接口，定製開發插件，目前比較流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

工做流

大體步驟：

• 將CSS解析成抽象語法樹(AST樹)
• 將AST樹」傳遞」給任意數量的插件處理
• 將處理完畢的AST樹從新轉換成字符串

在PostCSS中有幾個關鍵的處理機制：

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

將源css字符串進行分詞

舉個例子：

.className { color: #FFF; }

經過Tokenizer後結果以下：

[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

以word類型爲例，參數以下：

const token = [
     // token 的類型，如word、space、comment
    'word',

    // 匹配到的詞名稱
    '.className',

    // 表明該詞開始位置的row以及column，但像 type爲`space`的屬性沒有該值
    1, 1,

    // 表明該詞結束位置的row以及column，
    1, 10
]

Parser

通過Tokenizer以後，須要Parser將結果初始化爲AST

this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

Processor

通過AST以後，PostCSS提供了大量JS API給插件用

Stringifier

插件處理後，好比加瀏覽器前綴，會被從新Stringifier.stringify爲通常CSS。

結語

PostCSS更多的是提供平臺能力，賦能js的處理。