aspect-*ユーティリティで0.25刻みの小数値をサポート

Tailwind CSSでは、aspect-*ユーティリティの分数記法で小数値が使用できるようになりました。これにより、aspect-8.5/11のような細かいアスペクト比の指定が、任意値構文を使わずに記述可能になります。

背景

従来のaspect-*ユーティリティは、分数記法で正の整数のみを受け付ける制約がありました。aspect-4/3は有効でしたが、aspect-8.5/11は無効となりスタイルシートに出力されませんでした。CSSのaspect-ratioプロパティは任意の正の数値を受け入れるため、この制約は不要なものでした。

#19663では、aspect-17/22が機能する一方でaspect-8.5/11が動作しない問題が報告されています。ドキュメントにもこの制限は明記されておらず、ユーザーはaspect-[8.5/11]のような任意値構文を強制される状況でした。

本PRはこの制約を緩和し、w-2.5などの他のユーティリティと同様に、0.25の倍数であれば分数記法で記述できるようにしています。

技術的な変更

packages/tailwindcss/src/utilities.tsのaspect-ratioユーティリティの検証ロジックが変更されました。分数の両辺の検証に使用される関数が、isPositiveIntegerからisValidSpacingMultiplierに置き換えられています。

変更前:

handleBareValue: ({ fraction }) => {
  if (fraction === null) return null
  let [lhs, rhs] = segment(fraction, '/')
  if (!isPositiveInteger(lhs) || !isPositiveInteger(rhs)) return null
  return fraction
},

変更後:

handleBareValue: ({ fraction }) => {
  if (fraction === null) return null
  let [lhs, rhs] = segment(fraction, '/')
  if (!isValidSpacingMultiplier(lhs) || !isValidSpacingMultiplier(rhs)) return null
  return fraction
},

isValidSpacingMultiplierは、0.25の倍数を許容する検証関数です。この変更により、以下のような出力が得られるようになります:

.aspect-8\.5\/11 {
  aspect-ratio: 8.5 / 11;
}

テストケースにはaspect-8.5/11が追加され、一方でaspect-1.23/4.56のような0.25の倍数でない値は引き続き無効として扱われることが確認されています。これらの値には依然として任意値構文aspect-[1.23/4.56]が必要です。

設計判断

0.25刻みの制約を維持する方式が採用されました。

PRのDescriptionでは、この変更により#19680と#19669がクローズされることが示されています。最終的にはw-2.5やp-1.5などの既存のユーティリティとの一貫性を重視し、0.25の倍数のみを許容する制約が選ばれています。

このトレードオフにより、一般的なユースケースでは分数記法の利便性を享受しつつ、極端に細かい値には任意値構文を要求することで、生成されるクラス名の爆発的な増加を抑制しています。整数のみの制約から0.25刻みへの緩和は、実用上のニーズとユーティリティファーストの設計思想のバランスを取った判断といえます。

まとめ

本PRは、aspect-*ユーティリティの数値検証ロジックを1行変更することで、小数値を含むアスペクト比の記述を可能にしました。isPositiveIntegerからisValidSpacingMultiplierへの置き換えにより、他のユーティリティとの一貫性を保ちながら、任意値構文への依存を減らしています。0.25刻みという制約は、クラス名の予測可能性と実用性の両立を示す設計判断です。