CSSをインライン化するやつを復活させようと考えていた。前に書いたnode-inliningは、HTMLメールのためだったので、style属性にコピーしていた。また、2年半くらい前の実験では、丸ごとインライン化するだけだった。今回はHTMLファイルごとに必要なCSSのみをインライン化してやろうとしていたけど、結局のところ見送った。
実装は、postcssのwalkRules()でCSSのセレクターをなめ、jsdomからquerySelector()を使って、セレクターがマッチしなければ、そのルールを消す、というもの。最終的にはCSSを参照しているlink要素をstyle要素で差し替えて終わり。詳しくはこの実装をCLIツールに落とし込んだものを参照してほしい。
実装はできたけど、とにかく遅い。jsdomがそれなりに遅いし、このウェブサイトの場合はtemplate要素をはがす必要があってDOMを複製しているのも遅いし、セレクターをなめるのもそこそこ遅い。1ファイルで2秒くらいかかるし、並行実行にも限界があるので、全記事の再構築だと1分以上かかった。必ず残すルールを決めたり、querySelector()で扱うノードを絞ったり、インデックス・ページでは固定したりといった工夫で、ちょっとだけ速くなる。
苦労に見合わないので、インライン化するなら、素直に丸ごとインライン化した方がいい。元のCSSファイルも、今は20KBくらいと、それほど大きくないし、最小限にしても15KBになるかならないかくらいだ。丸ごとインライン化するなら、外部CSSのままでも一長(キャッシュが期待できる)一短(HTMLのレンダリングが遅れる)だ。ふりだしに戻る。