PostCSS原理解析

changfeng1050 發布于2019-08-23 14:42 / 3379人閱讀

摘要：寫在前面的話前端工程化日益成熟今天，我們對于工具越來越深的封裝。結語更多的是提供平臺能力，賦能的處理。

寫在前面的話

前端工程化日益成熟今天，我們對于工具越來越深的封裝。不管是從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: ""},
                   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的處理。

GPU云服務器云服務器 PostCSS 運行原理解析 cdn解析原理 webrtc原理解析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101018.html

從0到1：PostCSS 插件開發最佳實踐

摘要：單元測試秉承測試驅動開發的開發理念，單元測試的任務是必不可少的。維護一份按照建議，也將更新歷史等數據放在了一個名為文件上，并采用語義化的版本號。本文原始來源：http://devework.com/postcss-p...。轉載請提供原始來源，謝謝！ showImg(https://segmentfault.com/img/bVHtqu?w=2028&h=612); 前陣子為了滿足工...

nidaye 2019-08-21 11:25 評論0 收藏0
VSCode下讓CSS文件完美支持SCSS或SASS語法方法

摘要：下讓文件完美支持或語法方法習慣后通常都是直接對文件進行處理但是大部分習慣的朋友也許不適應了我專門研究了一下在編輯器下如果配置相關代碼和設置達到文件完美編寫的辦法其他語法類型原理相似這里以為例開始配置編輯器設置的配置首先配置編輯器的設置按快捷 VSCode下讓CSS文件完美支持SCSS或SASS語法方法習慣Webpack + PostCSS后, 通常PostCSS都是直接對CSS文件進...

superPershing 2019-08-30 13:57 評論0 收藏0
更便捷的css處理方式-PostCSS

摘要：本身并不直接用于處理樣式，只有配合它的插件，才能完成相關的編譯工作。是很容易引入當前的工作流中的。無論是還是，都有比較方便的方式。一般來說介紹一個東西都是要從是什么，怎么用的順序來講。我感覺這樣很容易讓大家失去興趣，先看一下postcss能做點什么，有興趣的話再往下看，否則可能沒有耐心看下去。讓我們開始吧 postcss能做什么補全css屬性瀏覽器前綴手寫的代碼可以是這樣的: ....

AlexTuan 2019-08-29 14:06 評論0 收藏0
在 CSS 預編譯器之后：PostCSS

摘要：提到預編譯器，你可能想到以及。而本文要介紹的，正是一個這樣的工具預編譯器可以做到的事，它同樣可以做到。所以，預編譯器過時了嗎當然不會。等預編譯器的特點是成熟可靠。此外，預編譯器和可以協同使用。提到css預編譯器（css preprocessor），你可能想到Sass[]以及[Stylus][]。而本文要介紹的PostCSS，正是一個這樣的工具：css預編譯器可以做到的事，它同樣可以做...

NeverSayNever 2019-08-28 18:10 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

摘要：或表示紅色，表示綠色，表示藍色，也可取其他數值來指定顏色。針對多字節文字，中文句子也是單詞允許在單詞內換行。一、HTML基礎 html常見元素和理解 html常見元素分類 head區元素：（不會在頁面上留下直接內容） meta title style link script base body區： div/selection/article/aside/header/f...

hqman 2019-08-02 12:09 評論0 收藏0