Help us understand the problem. What is going on with this article?

PostHTMLプラグインの作り方

More than 1 year has passed since last update.

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がとても嫌いなのでどうにかして楽に書きたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away