1-1. PostCSS執行原理

概念1. PostCSS 只提供一個產出plugin的環境

PostCSS 本身不會對CSS檔案進行修改，只提供一個產出plugin的環境

概念2. PostCSS對CSS檔案的修改都是基於外掛來實現的

1. PostCSS將CSS檔案轉化為抽象語法樹（AST）
2. 外掛(Plugin)對語法樹(AST)進行處理
3. 最後，由PostCSS將AST還原為普通CSS

PostCSS Playground
https://sneakertack.github.io/postcss-playground/

概念3 PostCSS 操縱 CSS 流程

1. PostCSS的核心是一個 parser(語法剖析器)
2. PostCSS Plugin透過操作AST ，改變CSS

PostCSS 會分析CSS 為抽象語法樹 (AST)
PostCSS Plugin API都是在操作AST
因此，要更深入了解PostCss，要先了解一下PostCSS AST

1-2. PostCSS AST

1-2-1. AST (Abstract Syntax Tree)

1. AST (Abstract Syntax Tree)，中文大多翻作抽象語法樹
2. 主要是將我們 人類 所寫的程式語法，轉換成 程式 比較容易閱讀的語法結構，並以樹的資料結構來儲存

1-2-2. PostCSS AST 抽象語法樹

節點

1. nodes
   css規則的節點訊息集合
2. decl
   每條css規則
3. Prop
   樣式名，EX :width
4. value
   樣式值， EX: 10px
5. source
   包括start和end的位置訊息，start和end里都有line和column表示行和列
6. type
   類型，又可分為「父類別」及「子類別」
7. selector
   type為rule時的選擇器
8. name
   type為atRule時，@緊接rule名
   Ex. @import 'xxx.css'中的import
9. params
   type為atRule時，@緊接rule名後的值
   Ex. @import 'xxx.css'中的xxx.css
10. text
    type為comment時的註釋内容

Type1 父類別

主要有三種

1. atRule
   @xxx的這種類型，EX: @screen
   
2. comment
   註釋
3. rule
   css規則集合

Type2 子類別

較常用到的有兩種

1. rule
   作用於某個selector上的css規則集合

2. decl
   每條具體的css規則

範例參考：https://astexplorer.net/#/gist/86881c695856fe913308752e0c2a8a18/254cf2550270442733c96ff5d0192c734f8e9427