既知の制限事項

design-token-lint が使用する静的解析アプローチに固有の制限事項。

design-token-lint は正規表現ベースの静的解析を使用して、ソースファイルからクラス名を抽出します。このアプローチは高速でビルドステップが不要ですが、実行時にコードを評価することはできません。そのため、一部の動的パターンは正しく解析されません。

抽出対象の属性名(className、class など)や関数名(cn、clsx など)は、設定の classAttributes および classFunctions でカスタマイズできます。

これらはバグではなく、静的解析に固有の制限です。

サポート済み: 複数行の className

複数行の className 値はサポートされています:

<div
  className="
    p-4
    bg-gray-500
  "
>

複数行にまたがるクラスは正しく抽出されます。

サポート済み: class

のオブジェクトキー

Astro の class:list オブジェクト構文はサポートされています — 引用符付きキーのクラス名が抽出されます:

<div class:list={[{ "p-4": true, "m-8": isActive }]}>

p-4 と m-8 の両方が抽出されてリントされます。

制限事項: 条件式

className 内の三項演算子は抽出されません:

// Not linted — classes inside ternaries are silently skipped
<div className={isActive ? "p-4" : "m-8"}>

エクストラクターは className や class に直接割り当てられた文字列リテラルを探します。三項演算子の構文にはマッチしないため、クラスは抽出されず、違反も報告されません。

つまり、三項演算子の中にある禁止クラスは、誤検知を出すのではなく、リンターに静かにスルーされます。三項演算子の中をリンターにチェックさせる回避策はありません。これらのクラスをリントする必要がある場合は、静的な変数に抽出してください:

// These static strings are linted
const activeClass = "p-hgap-sm";
const inactiveClass = "m-vgap-md";
<div className={isActive ? activeClass : inactiveClass}>

制限事項: テンプレート補間

動的な式を含むテンプレートリテラルは、いかなるリントルールにもマッチしない文字列を生成します:

// Not linted — `p-${size}` is extracted as a literal string, matches no rules
<div className={`p-${size} bg-${color}-500`}>

エクストラクターは ${...} 式を含む生のテンプレート内容を取り込みます。結果として得られる文字列（p-${size}、bg-${color}-500）はどのパターンにもマッチしないため、その中の違反は一切報告されません。

回避策: 無視コメントを追加するか、静的なクラス名を使うよう変更してください:

// Use ignore comment to acknowledge this is intentional
{/* design-token-lint-ignore */}
<div className={`p-${size}`}>

制限事項: エスケープされた引用符

エスケープされた引用符を含むクラス属性は正しく抽出されない場合があります:

// May extract incorrectly
<div className="p-4 \"m-8\"">

正規表現パーサーは文字列リテラル内のエスケープされた引用符シーケンスを処理しません。

回避策: クラス属性内でエスケープされた引用符を避けてください。代わりに JSX の式構文を使用してください:

<div className={'p-4 m-8'}>

まとめ