@position-try の未知 at-rule 警告を無視する一時的回避策

Tailwind CSS の最適化プロセスで出力される @position-try に対する Unknown at rule 警告を除去し、ビルド時のノイズを抑える変更です。この対策は Lightning CSS が @position-try を正式にサポートするまでの暫定的なワークアラウンドとして実装されています。

背景

Tailwind の optimize ステップは Lightning CSS を内部で利用し、未知の at‑rule が存在すると warning を出力します。@position-try は CSS Anchor Positioning の一部であり、現行の Lightning CSS（2024‑03 時点）では未実装のため、Unknown at rule: @position-try という警告が頻出します。この警告はビルド自体は成功するものの、CI ログや開発者のコンソールを汚染し、実際に問題がないことを見逃す原因となります。Issue #20275 で報告されたように、実運用で intl-tel-input などの外部スタイルがこの警告を引き起こすケースが確認されました。

技術的な変更

packages/@tailwindcss-node/src/optimize.ts に warning のフィルタリングロジック が追加されました。具体的には result.warnings 配列を走査し、warning.message が正規表現 /Unknown at rule: @position-try/ にマッチした場合に false を返すことでその警告を除外します。変更前後の差分は以下のとおりです。

@@ -68,6 +68,13 @@ export function optimize(
       return false
     }

+    // Ignore warnings about unknown at-rules.
+    //
+    // TODO: drop `@position-try` once https://github.com/parcel-bundler/lightningcss/pull/1238 lands
+    if (/Unknown at rule: @position-try/.test(warning.message)) {
+      return false
+    }
+
     return true
   })

この追加は既存の pseudo‑class (deep, slotted, global) に対する無視ロジックと同様のパターンで実装されており、後方互換性を保ったまま特定の警告だけを抑制します。結果として tw -i x.css -o out.css --optimize を実行した際、警告は出力されずビルド時間も短縮されています（例示のテストでは 29 ms → 14 ms に改善）。

設計判断

この修正は 一時的回避策 として位置付けられており、根本的な解決は Lightning CSS の upstream で @position-try をサポートすることに依存しています。PR 本文の TODO コメントに示された通り、サポートがマージされたら本ロジックは削除対象となります。警告除外の判定を文字列マッチに限定したことで、他の未知 at‑rule が誤って抑制されるリスクを最小化しています。また、ビルド失敗を回避しつつも実際の CSS 出力は変更せず、機能的な影響を与えない点が選択の根拠です。

まとめ

Tailwind CSS の最適化段階で @position-try に起因する Unknown at rule 警告を除去することで、ビルドログの可読性が向上し、開発者のデバッグ負荷が軽減されました。この変更は Lightning CSS の将来的な実装に依存した暫定的な対策であり、実装が完了すれば自動的に削除できる設計となっています。