技術仕様：lism-adapter.ts - Vue.js アダプタ

技術仕様：lism-adapter.ts (Vue.js アダプター)

lism-adapter.ts は、LismCSS の汎用的なプロパティ仕様を Vue.js のコンポーネントシステム（props, $attrs, class/style バインディング）へと適合させるためのVue.js アダプターです。

概要

LismCSS 公式のコアロジックを Vue.js 環境で効率的に動作させるための架け橋として機能します。

入力: コンポーネントに渡された全属性（props + $attrs）
出力: Vue の v-bind に直接渡せるオブジェクト（class, style, その他の HTML 属性）

interface LismOutput {
  class: string[]      // 適用される CSS クラスの配列
  style: Record<string, string | number>  // インラインスタイル
  [key: string]: unknown  // その他の HTML 属性 (id, data-*, aria-* 等)
}

アーキテクチャ

依存関係

LismCSS 本家のロジックと Vue.js を接続するため、以下をインポートして利用しています：

インポート元	用途
`lism-css/config`	`TRAITS`, `PROPS` の定義データ
`lism-css/lib/getLayoutProps`	`layout` プロパティの展開
`lism-css/lib/getAtomicProps`	`atomic` プロパティ（divider, spacer等）の展開
`lism-css/lib/isPresetValue`	プリセット値の判定
`lism-css/lib/isTokenValue`	デザイントークン値の判定
`lism-css/lib/getUtilKey`	ユーティリティクラスキーの取得
`lism-css/lib/getMaybeCssVar`	CSS 変数への変換
`lism-css/lib/getBpData`	レスポンシブ（ブレイクポイント）データの解析
`lism-css/lib/helper/splitWithComma`	カンマ区切り文字列の分割（`hov` 等で使用）

処理フロー

アダプターとしての主な役割は、Vue 固有の属性表現を LismCSS が解釈できる形式に整え、最終的に Vue が解釈できるオブジェクトとして出力することです。

Vue 入力 (props + $attrs)
  │
  ├─ 1. Vue 固有の正規化
  │    ├─ kebab-case → camelCase への変換 (data-/aria-を除く)
  │    └─ キーの存在確認 (PROPS/TRAITS にあるか、ハイフンを含むか)
  │
  ├─ 2. LismCSS ロジックによる前処理
  │    ├─ getAtomicProps: atomic (divider/spacer等) の展開
  │    └─ getLayoutProps: layout (flex/grid等) の展開
  │
  ├─ 3. プロパティ解析ループ
  │    ├─ Trait (is-/has-): analyzeState で解析し lismState クラスへ
  │    ├─ Prop (p/fz/c...): setAttrs で解析し uClasses クラスまたは styles へ
  │    ├─ set / unset / util: プレフィックスを付けてクラスへ直接追加
  │    ├─ hov: setHovProps でホバー用クラスと変数へ
  │    └─ デザインフィルター (blur等): styles.backdropFilter へ
  │
  ├─ 4. Vue 向け形式への出力
  │    ├─ class: [...baseClasses, ...lismState, ...uClasses] (配列形式)
  │    ├─ style: {...styles} (オブジェクト形式)
  │    └─ attrs: パススルーする標準属性 (id, data-* 等)
  │
  └─ 最終出力
       { class: [...], style: {...}, ...attrs }

Vue 固有の正規化処理

1. 全自動ケバブケース変換

Vue テンプレートでは属性を kebab-case で記述するのが一般的ですが、LismCSS 内部の処理ロジックは camelCase を期待しています。 data- および aria- で始まる属性以外のハイフン付き属性を camelCase へ自動変換します。

2. 空文字列 → true 変換 (フラグ正規化)

Vue テンプレートでは <Lism bd> のような記述は属性値が "" (空文字) として渡されます。LismCSS のロジックではこれらを true (フラグ有効) として扱う必要があるため、解析ループ内で適切に変換しています。

特殊なプロパティの扱い

set / unset / util

これらは LismCSS の「Set Class」や「Utility Class」を直接指定するためのエスケープハッチです。

set="plain" → set--plain
unset="hov" → unset--hov
util="cbox" → u--cbox 文字列のスペース区切りや配列形式での複数指定にも対応しています。

atomic / layout

getAtomicProps および getLayoutProps を介して、複雑なレイアウト設定やプリミティブクラス（l--flex, a--divider 等）の付与、およびそれらに付随する CSS 変数のセットを自動的に行います。

まとめ

lism-adapter.ts は単なる「変換器」ではなく、LismCSS という外部仕様を Vue.js というフレームワークに最適化して取り込むためのアダプター層として設計されています。一貫したケバブケースの使用をサポートしつつ、LismCSS の高度なレイアウト機能を Vue 環境でフル活用できるようにしています。