CSSビルドの選択

lism-css パッケージは、用途に応じて複数のビルド済みCSSを同梱しています。読み込むファイルを差し替えるだけで、@layer のオン / オフや「全部入り」ビルドへ切り替えられます。

@layer をオフにする

lism-css/main.css の代わりに lism-css/main_no_layer.css を読み込むだけで、@layer をオフにできます。読み込むCSSファイルを切り替えるだけで、ほかの設定は不要です。

全部入りビルド（full.css）を使う

lism-css/main.css の代わりに lism-css/full.css を読み込むと、デフォルトでは出力されないクラスまで含めた「全部入り」のビルドを利用できます。

import 'lism-css/full.css'; // @layer なし版は 'lism-css/full_no_layer.css'

full.css には、main.css の内容に加えて以下が含まれます。

• 変数出力専用（isVar 系＝クラスを出力せず CSS変数だけを出すプロパティ）を除く、全 Property Class のブレイクポイント対応クラス（-pl_lg など）
• pl / mt / cg など、スペーシング系の方向指定プロパティに対する SPACE トークンのユーティリティクラス（-pl:20 など）

そのぶんCSSサイズは main.css より大きくなるため、未使用のクラスをビルド時に削除する CSS Purge との併用を前提とした配布物です。

isFullMode

full.css を読み込むだけでは、コンポーネント側は引き続きデフォルト設定で動作します（例: pl="20" はインラインスタイルとして出力されます）。

コンポーネントの出力も full.css に合わせたい場合は、lism.config.js で isFullMode を有効にしてください。

export default {
  isFullMode: true,
};

isFullMode: true にすると、コンポーネントの props 設定にも full 用の設定が適用され、pl="20" が -pl:20 クラスとして出力されるようになります。設定は「デフォルト設定 → full 用設定 → lism.config.js の props」の順でマージされ、後のものほど優先されます。

型・補完も isFullMode に追従させられます。@lism-css/plugin の統合プラグインを使っている場合は、isFullMode: true のとき lism-env.d.ts が自動生成され、pl などへのブレイクポイント指定（配列・オブジェクト記法）も型エラーになりません。手書き拡張は不要です（lism-env.d.ts は git にコミットしてください）。

統合プラグインを使わない場合は、プロジェクト直下の型定義ファイル（例: src/lism-env.d.ts）で次のように拡張してください。

import 'lism-css';

declare module 'lism-css' {
  interface FullModeRegistry {
    enabled: true; // キー名は任意。1つでもキーがあれば full 版の型に切り替わる
  }
}

なお、CLI ビルドを isFullMode が有効の状態で実行すると、main.css にも full 用の設定が適用された状態でビルドされます。