PostHTMLプラグインの作り方

PostHTMLについて

PostCSSのHTMLバージョンを目指すもPostCSSでいうautoprefixerのようなものがないためにあまり注目されていません。
他のプラグインは全く使ってないですが、自分用にプラグイン作って使うにはちょうどいいような気がします。
結構簡単に作れるので簡潔に説明してみます。

作り方

ガイドがあるので一度読んでおくといいです。

作りがシンプルなので例を見たほうがはやいと思います。
全てのspanタグをpタグに変えるプラグインの例です。

index.js

export default tree => {
  tree.match({ tag: 'span' }, node => {
    node.tag = 'p';
    return node;
  });
}

treeはASTにPostHTMLのAPIをつけたものです。
ASTの構成はposthtml-parserに書いています。

APIがtree.match(expression, cb)とtree.walk(cb)の2つしかなく、walkのほうは全ノード見ることになるのであまり使わないと思います。
なので基本的にtree.match()で処理していくことになります。　　
posthtml-match-helperを使えばセレクタ指定っぽくもできます。

ちなみにAPIを使わずに直接操作しても問題ありません。
親要素や兄弟要素にアクセスしたくなったときなどは直接触るしかありません・・・。

上記を覚えておけばとりあえずはつまることもなく作れると思います。
ベースが欲しい場合はposthtml-plugin-boilerplateを使いましょう。

その他

PostHTMLは一応二種類の使い方があります。

• async posthtml([plugin1, plugin2]).process(html).then(res => res.html)
• sync posthtml().use(plugin1, plugin2).process(html, {sync: true}).html

こういうのを作っています。
srcsetがとても嫌いなのでどうにかして楽に書きたいです。