開發一個psotcss插件

李昌杰發布于2019-08-30 15:56 / 3504人閱讀

摘要：另一個是，返回結果對象，譬如，獲得處理結果的字符串，包含組件里創建的和自定義信息，創造一個實例并將其加入到中，獲得所有創建過的。寫在最后想寫一下的可以按照這里的指引，很詳細這是我寫的一個將轉為的插件參考

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

GPU云服務器云服務器 psotcss eclipse插件開發 grunt插件開發 firefox插件開發

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

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

CSSModules

摘要：支持不同的構建工具，這里我使用的是下文都是以為例。全局作用域允許用的語法聲明一個全局的作用域。使用普通的寫法，就會引用全局的的樣式我是結果的顯示黑色。的組合在里，一個選擇器可以繼承另一個選擇器。 showImg(https://segmentfault.com/img/bV7OHk?w=1050&h=360); 這篇文章來一起了解 css 模塊化的用法和原理，dome 地址：css ...

Youngdze 2019-08-30 14:22 評論0 收藏0
TinyMCE插件開發

摘要：目前網上關于插件開發的文章少得可憐，下面分享最近的經歷，如何快速上手開發一個插件。第六步調試插件在打開的網頁中可以看到工具欄中實現了插件。 TinyMCE是一個非常優秀的輕量級的所見即所得HTML編輯器，歷史悠久，開源，在github的start也非常高的，且長期保持更新。TinyMCE的官方插件不少，基本能滿足日常需求，但是有時候我們還需要一些結合業務的功能。這時官方插件無法滿足，就...

aboutU 2019-08-22 18:29 評論0 收藏0
如何開發一個 PyCharm 插件

摘要：今天我們說說怎么搭建環境自己寫一個插件。插件工程目錄結構一個典型的插件目錄結構就像下圖。如果成功那么在工程目錄就會生成一個同名的文件。 PyCharm 是很多 Python 開發者優先選擇的 IDE，功能強大，跨平臺，提供免費社區版，非常良心。如果你想自己給PyCharm添加一些功能怎么辦呢？有兩個辦法：通過提需求實現，到 JetBrains 的 github 去提issue或者自...

LdhAndroid 2019-07-25 11:47 評論0 收藏0
插件分享大會[不定期更新]

摘要：最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

CastlePeaK 2019-06-28 13:34 評論0 收藏0
插件分享大會[不定期更新]

摘要：最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。因為基本只有這個插件，才可以設置一個文件夾下三個項目能分別傳到不同的服務器中。在全球最大的同性交友網站中，只要鼠標懸停到一個項目上時，就會在一個彈窗顯示該項目的信息。最近老是在重裝系統，每次重裝就要重新配置環境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

darkbug 2019-08-20 18:56 評論0 收藏0