Lunar Style CSS Compiler：CSSビルド検証の設計ノート

Tailwindのソース検出と動的なクラス指定を確認し、CSSサイズと画面のリグレッションを併せて検証するビルドツールの設計です。

1. 既存のビルド機能を先に確認する

この文書はCSSビルド検証ツールの設計ノートであり、独自コンパイラーのリリースや性能数値を主張するものではありません。Tailwindはソース内のクラス候補を検出し、必要なスタイルを生成します。そのため、すべてのユーティリティCSSが常にバンドルへ含まれるという前提で最適化を設計してはいけません。

Tailwindのクラス検出は、ソース内の文字列を基準に動作します。プログラムの実行結果を理解するAST解析とは異なるため、動的に組み立てたクラスは検出されない場合があります。公式のソース検出ドキュメントに基づいて設定を確認します。

2. 検証パイプライン

• 動的に組み立てたクラスではなく、ソースから確認できる完全なクラス名を使用します。
• 共有UIパッケージなど、既定の検出対象から外れるパスを明示的に登録します。
• CSSの削除前後で、レスポンシブ表示、ダークモード、hover・focus・disabledの状態を比較します。
• 元のファイルサイズだけでなく、gzipまたはBrotliによる転送サイズも同じ条件で測定します。

3. 結果の解釈

CSSの容量が減るだけで、LCPが特定の値以下になるとは保証できません。画像、フォント、サーバー応答、レンダリング経路も影響します。ビルド時間とブラウザーの指標は、端末、キャッシュ、ネットワーク、実行回数を記録して比較する必要があります。

未検証の削減率や処理時間を掲げず、変更した設定と再現可能な測定手順を成果として残すことを、この設計の基準とします。