@ledsun blog

無味の味は佳境に入らざればすなわち知れず

sprockets-css-purgerの姿を想像する

DHHはsprockets-css-purgerというCSSをパージするための汎用的なGemが欲しいようです。

github.com

This is btw and open invitation to anyone who'd like to work on this 😄

とありますので、誰がやっても良いようです。ところで、このbtwってどういう意味なんでしょう?By the wayの略ではなさそうです。

ざっくりどうやって作るのか考えてみます。

Tailwind CSS の Purge でビルドサイズを縮小する

Purge CSS 自体は別で Tailwind CSS 関係ないので、他プロダクトでも積極的に利用していきたいと思いました。

とういう情報があるので、処理そのものはPurge CSSを呼び出す形にすれば良さそうです。

APIを見ると

  content: ['**/*.html'],
  css: ['**/*.css']

を指定すると良さそうです。

tailwindcssの依存npmパッケージを見ると

https://github.com/tailwindlabs/tailwindcss/blob/v2.2.15/package.json#L100

2.2.15には、"purgecss": "^4.0.3",があります。やはり、Purge CSSを使っていそうです。そして

github.com

で、消えました・・・。え?どういうこと? AOTモードを消すということは「tailwindcss自体はpurge cssするのをやめるので、必要な人は自分でPurge CSSをつかって、パージして」ってことでしょうか・・・?

https://github.com/tailwindlabs/tailwindcss/pull/5340#issuecomment-910286035

Yeah we are removing the CDN builds from this package for v3.0, whatever we make available CDN-wise we'll put in a separate package so we stop wasting everyone's bandwidth 👀

とあるので、事前ビルドする既存のtailwindcssパッケージと、事前ビルドしないCDN専用のパッケージに分かれるようです。