こんな現象に遭遇するのは私くらいかなあと思いながらメモ。
個人用勤怠記録 Web アプリWorking time aroundは次のサードパーティーライブラリ・ツールを利用しています。
- UI キットにRMWC。React で Google 謹製 Web 向け Material Design CSS フレームワークMaterial Components for Web(以下 MDC)を利用可能にするコンポーネントライブラリで、MDC に依存
- バンドラーにParcel
先日ライブデモ用にプロダクションビルドの GitHub Pages へのデプロイを行う GitHub Actions のワークフローを追加していて気づいたのですが(いまごろかよ、という突っ込みはなしでお願いします)、parcel build でプロダクションビルドを生成するとバンドルされた CSS に RMWC の参照する MDC の CSS が含まれない、ことがあります。「ことがある」というのは、かならずそうなるというわけではなく、Parcel の次の挙動に影響を受けると見受けられるからです。
- プロダクションビルドは最適化 / minify がデフォルト、開発サーバーでの実行時は最適化 / minify 未適用がデフォルト
- 特に指定しなければ開発サーバー用の成果物出力にもプロダクションビルドの成果物出力にも同じディレクトリを利用する
- 差分ビルドを行うため、差分元の影響を受ける
つまり先行するビルドによっては表示がおかしくならないこともあるのです。GitHub Actions は環境を毎回セットアップするので差分元はかならず存在しません。そのため顕在化したと考えられます。
RMWC がどのように MDC を参照しているかまでは追いかけていないのですが、もともと RMWC は全コンポーネント入りのパッケージを利用する際は明示的なスタイル定義参照指定を行うようにと指示しています。
RMWC | React Material Web Components | Installation
なので最適化 / minify 時のこの挙動は RMWC 的には想定内という気もしないでもないです。
今回の件もこの明示スタイル定義参照指定追加で解消します。しかし個別にコンポーネントをインストールしていると CSS を一括して参照する口がありません。このためだけに MDC を追加でインストールするのもしゃくなので、 node_moduleの子ディレクトリで@material で始まるものを確認、デプロイ用 CSS が存在したら全体用に用意していた CSS ファイルで@import で参照するようにして対応しました。やれやれ、一安心。
なお MDC は CDN でも配信しているのでそちらの参照でもやりかたによっては解決しますが、Parcel でエントリに HTML を指定してプロダクションビルドを生成する場合は HTML link要素での指定だとうまくいきません。Parcel はバンドルした CSS を参照する link要素をhead要素の最初の子要素として挿入するため、バンドルした CSS のあとに MDC の CSS が存在することになってしまうためです。
以上、誰の役に立つのやらという感じですが。