Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール
npm install sparkle-design-cliデザインシステム CSS を設定ファイルから生成する CLI ツールです。
``bash`
npm install -g sparkle-design-cli
1. プロジェクトのルートディレクトリに sparkle.config.json ファイルを作成または配置します:
`json`
{
"primary": "blue",
"font-mono": "BIZ UDGothic",
"font-pro": "BIZ UDPGothic",
"radius": "md"
}
2. CLI ツールを実行します:
`bash`
npx sparkle-design-cli
または、グローバルにインストールした場合:
`bash`
sparkle-design-cli
3. src/app/sparkle-design.css に CSS ファイルが生成されます。
`bashヘルプを表示
sparkle-design-cli --help
#### オプション一覧
-
-h, --help: ヘルプメッセージを表示
- -c, --config <パス>: 設定ファイルのパス(デフォルト: ./sparkle.config.json)
- -o, --output <パス>: 出力ファイルのパス(デフォルト: ./src/app/sparkle-design.css)設定ファイル (sparkle.config.json)
$3
設定ファイルは専用のプラグインから自動生成することを推奨します。プラグインを使用すると、デザインシステムに基づいた適切な設定が自動で生成されます。
設定ファイルは以下の場所に配置してください:
- プロジェクトのルートディレクトリ(推奨)
- または
-c オプションで指定した任意の場所$3
-
primary: プライマリカラー(blue, red, orange など)
- font-pro: プロポーショナルフォント(Google Fonts の名前)
- font-mono: モノスペースフォント(Google Fonts の名前)
- radius: 角丸設定(sm, md, lg など)出力
- デフォルト出力先:
src/app/sparkle-design.css
- カスタム出力先: -o オプションで指定可能
- 実行場所を基準として相対パスで処理されます自動フォント管理
v1.2.0 以降の新機能
CLI は自動的にフォント管理を行います:
1. フォント検出:
sparkle-design.css から Google Fonts の @import 文を検出
2. globals.css への移動: フォントの @import を globals.css の先頭に移動
3. sparkle-design.css から削除: 元のファイルからフォント @import を削除$3
CSS の仕様では、
@import 文は @charset と @layer 以外のすべてのルールより前に記述する必要があります。Tailwind CSS v4 と組み合わせた場合、この順序が正しくないとビルド時に警告が発生します。この機能により、以下の警告が自動的に解決されます:
`text
⚠️ @import rules must precede all rules aside from @charset and @layer statements
`$3
-
globals.css が sparkle-design.css と同じディレクトリに存在する場合のみ実行されます
- globals.css が存在しない場合は、フォント管理処理はスキップされます$3
`text
📦 フォント管理処理を開始します...
📝 3個のフォントimportを検出しました
✅ globals.css にフォントimportを追加しました
✅ sparkle-design.css からフォントimportを削除しました
`開発
$3
`bash
依存関係をインストール
npm installパッケージをローカルでリンク
npm link
`$3
`bash
テスト実行
npm testテスト監視モード
npm run test:watchLint実行
npm run lintLintエラーを自動修正
npm run lint:fixコードフォーマット
npm run formatフォーマットチェック
npm run format:check
`$3
`bash
デフォルト設定でテスト
sparkle-design-cliヘルプ表示
sparkle-design-cli --helpカスタムパスでテスト
sparkle-design-cli -c test-config.json -o test-output.css
``MIT License - 詳細は LICENSE ファイルを参照してください。