Zenn
📦

Parcel + TailwindCSS(+Simpacker) でドハマりした話

2020/11/30に公開
PostCSS
parcel
失敗談
tech

注意
ドハマりしてやってる間に何が何だかわからなくなってしまったので
以下記述は勘違いが含まれている可能性があります😭

TL;DR

  • Parcel + PostCSS 8 の状態があまりよくない
  • simpacker に必要な parcel-plugin-bundle-manifest は Parcel2(parcel@next / parcel@nightly) に対応してない
  • Parcel + postcss-import はうまく動作しない
    • Parcel2 + postcss-import は問題ない
  • 結論： PostCSS7 状態まで関連パッケージのバージョンを下げた上で postcss-import を使わずに Parcel + TailwindCSS で yarn parcel build する必要がある

発端

事の発端は以前に書いた記事「docker-compose 下で rails new して Rails6+Simpacker+Parcel 環境を作る」で作った環境に
TailwindCSS + PostCSS を入れようとして発生しました。

root:/app# yarn parcel build --out-dir public/packs --public-url /packs app/assets/stylesheets/**.css
yarn run v1.22.5
🚨  /app/app/assets/stylesheets/application.css:undefined:undefined: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

動かないや 😇
以前もこのエラーにハマったことはあったので、似たものだろうなと最初は軽く考えていました

Parcel + PostCSS 8 の状態があまりよくない。が……

PostCSS 8 for end users には Parcel2(parcel@nightly) を使えと書いてある

しかし、該当環境の simpacker に必要な parcel-plugin-bundle-manifest はもう2年もアップデートされておらず、Parcel2(parcel@next / parcel@nightly) に対応しいません。

Parcel2 に乗り換えたいのに乗り換えられない😇

Parcel + postcss-import はうまく動作しない

詳しくは以下 ISSUE の最後のコメントを参考にして欲しいのですが、
こちらも Parcel2 では解決済だから Parcel2 を使えと言っています。
でも乗り換えられないの😇

解決策：関連パッケージをPostCSS7対応版まで戻して、postcss-import を使わずにTailwindCSSを使って yarn parcel build する

parcel-plugin-bundle-manifest 自体、そんなに大きな plugin ではないので
自前で Parcel2 で動作する plugin を書いて
Parcel2 に乗り換えてもよかったのですが、
今回は既に心が折れ気味だったので
関連パッケージをPostCSS7対応版まで戻すことにしました……。

最終的な package.json はこんな感じになってます

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-bundle-manifest": "^0.2.0",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "postcss-modules": "^3.2.2",
    "postcss-nested": "^4.2.3",
    "tailwindcss": "^1.8.12"
  }

postcss と postcss-cli は 8 にも 7 にも対応しているのでそのままです。
というか、抜いても良い気がする……（もう確認する元気が無くなってきている）
他のパッケージは、各packageのReleasesなどを確認しながら PostCSS8 対応前のバージョンに戻しました。

また、 css-import については以下 ISSUE にて
Parcel + TailwindCSS を使いたいなら css-import を使わずにやれ！とあったので
その通りにすることにしました。

ということで css-import は抜いて、
Parcel 用に用意した .postcssrc は以下になりました。
.postcssrc

{
  "modules": true,
  "plugins": {
    "tailwindcss": {},
    "postcss-nested": {}
  }
}

あとは TailwindCSSを持ってくるCSSを用意して……
app/assets/stylesheets/tailwindcss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

これでビルドしてみます。

root:/app# yarn parcel build --out-dir public/packs --public-url /packs app/assets/stylesheets/**.css
yarn run v1.22.5
⠹ Building tailwindcss.css...
✨  Built in 103.98s.

public/packs/tailwindcss.css        ⚠️  1.73 MB    99.11s
public/packs/tailwindcss.css.map     558.54 KB     342ms
📦 PackageManifestPlugin
✓ bundle : tailwindcss.css => /packs/tailwindcss.css
📄 manifest : /app/public/packs/parcel-manifest.json
🖊 update manifest file
Done in 113.24s.

public/packs/tailwindcss.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height: ...(以下略)

public/packs/parcel-manifest.json

{
  "tailwindcss.css": "/packs/tailwindcss.css"
}

できました！ よかったですね。
というか、TailwindCSS 全部入りのCSSを使うならCDNから持って来れば良いんですが
今後カスタマイズする予定だったので上の例がCDN使えや！になってるのは勘弁してください。

今回実施したことは以下リポジトリに含まれています。
https://github.com/JUNKI555/rails_erb_practice02

うーん、それにしてもこれは辛い……
TypeScript 導入し始めると Parcel が辛いのも言われてますし、
Simpacker 使うなら素直に webpack がいいのかもしれませんね。

モジュールバンドラなしを試してみたくなってくるなあ……（小声）

参考：

Discussion