Sparkle Design CLI

デザインシステム CSS を設定ファイルから生成する CLI ツールです。

インストール

npm install -g sparkle-design-cli

使用方法

基本的な使用方法

1. プロジェクトのルートディレクトリに sparkle.config.json ファイルを作成または配置します：

{
  "primary": "blue",
  "font-mono": "BIZ UDGothic",
  "font-pro": "BIZ UDPGothic",
  "radius": "md"
}

2. CLI ツールを実行します：

npx sparkle-design-cli

または、グローバルにインストールした場合：

sparkle-design-cli

3. src/app/sparkle-design.css に CSS ファイルが生成されます。

コマンドオプション

# ヘルプを表示
sparkle-design-cli --help

# カスタム設定ファイルを指定
sparkle-design-cli --config ./config/design.json

# カスタム出力先を指定
sparkle-design-cli --output ./styles/design.css

# 設定ファイルと出力先を両方指定
sparkle-design-cli -c ./config/custom.json -o ./dist/styles.css

オプション一覧

• -h, --help: ヘルプメッセージを表示
• -c, --config <パス>: 設定ファイルのパス（デフォルト: ./sparkle.config.json）
• -o, --output <パス>: 出力ファイルのパス（デフォルト: ./src/app/sparkle-design.css）

設定ファイル (sparkle.config.json)

設定ファイルの作成

設定ファイルは専用のプラグインから自動生成することを推奨します。プラグインを使用すると、デザインシステムに基づいた適切な設定が自動で生成されます。

設定ファイルは以下の場所に配置してください：

• プロジェクトのルートディレクトリ（推奨）
• または -c オプションで指定した任意の場所

設定オプション

• primary: プライマリカラー（blue, red, orange など）
• font-pro: プロポーショナルフォント（Google Fonts の名前）
• font-mono: モノスペースフォント（Google Fonts の名前）
• radius: 角丸設定（sm, md, lg など）

出力

• デフォルト出力先: src/app/sparkle-design.css
• カスタム出力先: -o オプションで指定可能
• 実行場所を基準として相対パスで処理されます

開発

セットアップ

# 依存関係をインストール
npm install

# パッケージをローカルでリンク
npm link

開発用コマンド

# テスト実行
npm test

# テスト監視モード
npm run test:watch

# Lint実行
npm run lint

# Lintエラーを自動修正
npm run lint:fix

# コードフォーマット
npm run format

# フォーマットチェック
npm run format:check

CLI実行テスト

# デフォルト設定でテスト
sparkle-design-cli

# ヘルプ表示
sparkle-design-cli --help

# カスタムパスでテスト
sparkle-design-cli -c test-config.json -o test-output.css

ライセンス

MIT License - 詳細は LICENSE ファイルを参照してください。