sparkle-design-cli 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Goodpatch Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# 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
+
+# カスタム設定ファイルを指定
+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` オプションで指定可能
+- 実行場所を基準として相対パスで処理されます
+
+## 開発
+
+### セットアップ
+
+```bash
+# 依存関係をインストール
+npm install
+
+# パッケージをローカルでリンク
+npm link
+```
+
+### 開発用コマンド
+
+```bash
+# テスト実行
+npm test
+
+# テスト監視モード
+npm run test:watch
+
+# Lint実行
+npm run lint
+
+# Lintエラーを自動修正
+npm run lint:fix
+
+# コードフォーマット
+npm run format
+
+# フォーマットチェック
+npm run format:check
+```
+
+### CLI実行テスト
+
+```bash
+# デフォルト設定でテスト
+sparkle-design-cli
+
+# ヘルプ表示
+sparkle-design-cli --help
+
+# カスタムパスでテスト
+sparkle-design-cli -c test-config.json -o test-output.css
+```
+
+## ライセンス
+
+MIT License - 詳細は [LICENSE](LICENSE) ファイルを参照してください。

package/bin/sparkle-design.js

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+
+import { generateCSS } from '../lib/generate-css.js';
+
+// コマンドライン引数を解析
+function parseArguments() {
+        const args = process.argv.slice(2);
+        const options = {
+                configPath: null,
+                outputPath: null,
+                help: false,
+        };
+
+        for (let i = 0; i < args.length; i++) {
+                const arg = args[i];
+
+                if (arg === '-h' || arg === '--help') {
+                        options.help = true;
+                } else if (arg === '-c' || arg === '--config') {
+                        options.configPath = args[i + 1];
+                        i++; // 次の引数をスキップ
+                } else if (arg === '-o' || arg === '--output') {
+                        options.outputPath = args[i + 1];
+                        i++; // 次の引数をスキップ
+                }
+        }
+
+        return options;
+}
+
+// ヘルプメッセージを表示
+function showHelp() {
+        console.log(`
+Sparkle Design CLI - デザインシステム CSS 生成ツール
+
+使用方法:
+  sparkle-design-cli [オプション]
+
+基本的な使用方法:
+  1. プロジェクトのルートディレクトリに sparkle.config.json ファイルを作成または配置
+  2. CLI ツールを実行: sparkle-design-cli
+  3. src/app/sparkle-design.css に CSS ファイルが生成されます
+
+オプション:
+  -h, --help                 このヘルプメッセージを表示
+  -c, --config <パス>        設定ファイルのパス (デフォルト: ./sparkle.config.json)
+  -o, --output <パス>        出力ファイルのパス (デフォルト: ./src/app/sparkle-design.css)
+
+使用例:
+  sparkle-design-cli
+  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
+
+設定ファイル (sparkle.config.json):
+  設定ファイルは専用のプラグインから自動生成することを推奨します。
+  プロジェクトのルートディレクトリに配置してください。
+
+  設定例:
+  {
+    "primary": "blue",
+    "font-pro": "BIZ UDPGothic",
+    "font-mono": "BIZ UDGothic",
+    "radius": "md"
+  }
+
+  設定オプション:
+  - primary: プライマリカラー (blue, red, orange など)
+  - font-pro: プロポーショナルフォント (Google Fonts の名前)
+  - font-mono: モノスペースフォント (Google Fonts の名前)
+  - radius: 角丸設定 (sm, md, lg など)
+
+出力:
+  - デフォルト出力先: src/app/sparkle-design.css
+  - カスタム出力先: -o オプションで指定可能
+  - 実行場所を基準として相対パスで処理されます
+`);
+}
+
+// メイン処理
+function main() {
+        const options = parseArguments();
+
+        if (options.help) {
+                showHelp();
+                process.exit(0);
+        }
+
+        try {
+                generateCSS(options.configPath, options.outputPath);
+        } catch (error) {
+                console.error('❌ エラーが発生しました:', error.message);
+                process.exit(1);
+        }
+}
+
+main();

package/lib/generate-css.js

@@ -0,0 +1,367 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * sparkle.config.jsonを読み込む
+ */
+function loadConfig(configPath = null) {
+        // カスタムパスが指定されていない場合は実行場所のsparkle.config.jsonを探す
+        const defaultConfigPath = path.resolve(process.cwd(), 'sparkle.config.json');
+        const resolvedConfigPath = configPath ? path.resolve(configPath) : defaultConfigPath;
+
+        try {
+                const configContent = fs.readFileSync(resolvedConfigPath, 'utf8');
+                const config = JSON.parse(configContent);
+                console.log('✅ sparkle.config.json を読み込みました:', resolvedConfigPath);
+                console.log('   設定内容:', config);
+                return config;
+        } catch (error) {
+                console.error('❌ sparkle.config.json の読み込みに失敗しました:', error.message);
+                console.error('設定ファイルパス:', resolvedConfigPath);
+                console.error('設定ファイルは専用プラグインから生成するか、手動で作成してください');
+                process.exit(1);
+        }
+}
+
+/**
+ * CSSテンプレートを読み込む
+ */
+function loadTemplate() {
+        const templatePath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'sparkle-design.template.css');
+
+        try {
+                const templateContent = fs.readFileSync(templatePath, 'utf8');
+                console.log('✅ CSSテンプレートを読み込みました');
+                return templateContent;
+        } catch (error) {
+                console.error('❌ CSSテンプレートの読み込みに失敗しました:', error.message);
+                console.error('テンプレートファイルが存在することを確認してください:', templatePath);
+                process.exit(1);
+        }
+}
+
+/**
+ * 色定義（colors.json）を読み込む
+ */
+function loadColors() {
+        const colorsPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'colors.json');
+
+        try {
+                const colorsContent = fs.readFileSync(colorsPath, 'utf8');
+                const colors = JSON.parse(colorsContent);
+                console.log('✅ colors.json を読み込みました');
+                return colors;
+        } catch (error) {
+                console.error('❌ colors.json の読み込みに失敗しました:', error.message);
+                process.exit(1);
+        }
+}
+
+/**
+ * gray.jsonを読み込む
+ */
+function loadGrayMapping() {
+        const grayJsonPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'gray.json');
+
+        try {
+                const grayContent = fs.readFileSync(grayJsonPath, 'utf8');
+                const grayMapping = JSON.parse(grayContent);
+                console.log('✅ gray.json を読み込みました');
+                return grayMapping;
+        } catch (error) {
+                console.error('❌ gray.json の読み込みに失敗しました:', error.message);
+                process.exit(1);
+        }
+}
+
+/**
+ * radius.csvを読み込む
+ */
+function loadRadiusMapping() {
+        const radiusCsvPath = path.join(__dirname, '..', 'templates', 'sparkle-variables', 'radius.csv');
+
+        try {
+                const csvContent = fs.readFileSync(radiusCsvPath, 'utf8');
+                const lines = csvContent.trim().split('\n');
+                const headers = lines[0].split(',');
+                const radiusMapping = {};
+
+                for (let i = 1; i < lines.length; i++) {
+                        const values = lines[i].split(',');
+                        const name = values[0];
+                        radiusMapping[name] = {};
+
+                        for (let j = 1; j < headers.length; j++) {
+                                radiusMapping[name][headers[j]] = values[j];
+                        }
+                }
+
+                console.log('✅ radius.csv を読み込みました');
+                return radiusMapping;
+        } catch (error) {
+                console.error('❌ radius.csv の読み込みに失敗しました:', error.message);
+                process.exit(1);
+        }
+}
+
+/**
+ * テンプレート変数を設定値で置換する
+ */
+function processTemplate(template, config, grayMapping, radiusMapping, colors) {
+        let processedCSS = template;
+
+        // 1. 色のトークンを生成して置換
+        const colorTokens = generateColorTokens(colors, grayMapping, config.primary);
+        // プレースホルダーを色のトークンで置換（改行を含む）
+        processedCSS = processedCSS.replace(/\s*\/\* \{\{COLOR_TOKENS\}\} \*\/\s*/, `\n${colorTokens}\n`);
+
+        // 2. 基本的な設定値による置換
+        Object.entries(config).forEach(([key, value]) => {
+                // 通常のプレースホルダー（CSS用 - スペースはそのまま）
+                const placeholder = `{{${key.toUpperCase().replace('-', '_')}}}`;
+                processedCSS = processedCSS.replace(new RegExp(placeholder, 'g'), value);
+
+                // フォントファミリーの場合はURL用のプレースホルダーも生成（スペースを+に置き換え）
+                if (key.toLowerCase().includes('font')) {
+                        const urlPlaceholder = `{{${key.toUpperCase().replace('-', '_')}_URL}}`;
+                        const urlValue = value.replace(/\s+/g, '+');
+                        processedCSS = processedCSS.replace(new RegExp(urlPlaceholder, 'g'), urlValue);
+                }
+        });
+
+        // 3. Radiusの一括置換
+        if (config.radius && radiusMapping[config.radius]) {
+                const radiusValues = radiusMapping[config.radius];
+
+                Object.entries(radiusValues).forEach(([semanticName, radiusValue]) => {
+                        if (semanticName === 'round') return; // roundは特別扱い
+
+                        const semanticPattern = new RegExp(
+                                `--radius-${semanticName}:\\s*var\\(--radius-[^)]+\\)`,
+                                'g'
+                        );
+                        processedCSS = processedCSS.replace(
+                                semanticPattern,
+                                `--radius-${semanticName}: var(--radius-${radiusValue})`
+                        );
+                });
+
+                console.log(`✅ ${config.radius}に対応するradius設定を適用しました`);
+        }
+
+        console.log('✅ テンプレートを設定値で処理しました');
+        return processedCSS;
+}
+
+/**
+ * 16進数カラーをrgba形式に変換
+ */
+function hexToRgba(hex) {
+        // #を削除
+        hex = hex.replace('#', '');
+
+        // 3桁の場合は6桁に拡張
+        if (hex.length === 3) {
+                hex = hex
+                        .split('')
+                        .map((char) => char + char)
+                        .join('');
+        }
+
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+
+        return `rgba(${r}, ${g}, ${b}, 1)`;
+}
+
+/**
+ * 16進数カラーをOKLCH形式に変換
+ * @param {string} hex 16進数のカラーコード（#付きまたは無し）
+ * @returns {string} OKLCH形式の文字列
+ */
+function hexToOklch(hex) {
+        // #を削除
+        hex = hex.replace('#', '');
+
+        // 3桁の場合は6桁に拡張
+        if (hex.length === 3) {
+                hex = hex
+                        .split('')
+                        .map((char) => char + char)
+                        .join('');
+        }
+
+        const r = parseInt(hex.substring(0, 2), 16) / 255;
+        const g = parseInt(hex.substring(2, 4), 16) / 255;
+        const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+        // sRGBからLinear RGBに変換
+        function srgbToLinear(c) {
+                return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        }
+
+        const linearR = srgbToLinear(r);
+        const linearG = srgbToLinear(g);
+        const linearB = srgbToLinear(b);
+
+        // Linear RGBからXYZ（D65）への変換
+        const x = linearR * 0.4124564 + linearG * 0.3575761 + linearB * 0.1804375;
+        const y = linearR * 0.2126729 + linearG * 0.7151522 + linearB * 0.0721750;
+        const z = linearR * 0.0193339 + linearG * 0.1191920 + linearB * 0.9503041;
+
+        // XYZからOKLabへの変換
+        function f(t) {
+                const c1 = 0.8359375;      // 3^3/29^3
+                const c2 = 0.2109375;      // 1/3^3
+                const c3 = 29 / (6 ** 3);  // 29/6^3
+
+                return t > c1 ? Math.cbrt(t) : c2 * t + c3;
+        }
+
+        const l = 0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z;
+        const m = 0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z;
+        const s = 0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z;
+
+        const fL = f(l);
+        const fM = f(m);
+        const fS = f(s);
+
+        const L = 0.2104542553 * fL + 0.7936177850 * fM - 0.0040720468 * fS;
+        const a = 1.9779984951 * fL - 2.4285922050 * fM + 0.4505937099 * fS;
+        const b_lab = 0.0259040371 * fL + 0.7827717662 * fM - 0.8086757660 * fS;
+
+        // OKLabからOKLCHへの変換
+        const lightness = L;
+        const chroma = Math.sqrt(a * a + b_lab * b_lab);
+        let hue = Math.atan2(b_lab, a) * 180 / Math.PI;
+        if (hue < 0) hue += 360;
+
+        // 精度を調整して出力（少数点以下4桁で丸める）
+        const l_rounded = Math.round(lightness * 10000) / 10000;
+        const c_rounded = Math.round(chroma * 10000) / 10000;
+        const h_rounded = chroma < 0.0001 ? 0 : Math.round(hue * 10) / 10;
+
+        return `oklch(${l_rounded} ${c_rounded} ${h_rounded})`;
+}
+
+/**
+ * 色のトークンを生成する
+ * @param {Object} colors colors.jsonから読み込んだ色の定義
+ * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
+ * @param {string} primaryColor プライマリカラーの名前
+ * @returns {string} 色のトークンのCSS文字列
+ */
+function generateColorTokens(colors, grayMapping, primaryColor) {
+        const colorTokens = [];
+
+        // 通常の色トークンを生成
+        Object.entries(colors).forEach(([colorName, colorValues]) => {
+                if (typeof colorValues === 'object' && colorValues !== null) {
+                        Object.entries(colorValues).forEach(([level, hexValue]) => {
+                                const oklchValue = hexToOklch(hexValue);
+                                colorTokens.push(`  --color-${colorName}-${level}: ${oklchValue};`);
+                        });
+                } else if (typeof colorValues === 'string') {
+                        // black, white, web-focusなどの単色
+                        const oklchValue = hexToOklch(colorValues);
+                        colorTokens.push(`  --color-${colorName}: ${oklchValue};`);
+                }
+        });
+
+        // グレーの色トークンを生成（プライマリカラーに基づく）
+        if (primaryColor && grayMapping[primaryColor]) {
+                const grayColors = grayMapping[primaryColor];
+                Object.entries(grayColors).forEach(([key, hexValue]) => {
+                        const grayLevel = key === '0' ? '50'
+                                : key === '1' ? '100'
+                                : key === '2' ? '200'
+                                : key === '3' ? '300'
+                                : key === '4' ? '400'
+                                : key === '5' ? '500'
+                                : key === '6' ? '600'
+                                : key === '7' ? '700'
+                                : key === '8' ? '800'
+                                : key === '9' ? '900'
+                                : key;
+
+                        const oklchValue = hexToOklch(hexValue);
+                        colorTokens.push(`  --color-gray-${grayLevel}: ${oklchValue};`);
+                });
+        }
+
+        return colorTokens.join('\n');
+}
+
+/**
+ * 生成されたCSSをファイルに書き出す
+ */
+function writeCSS(cssContent, outputPath = null) {
+        // カスタムパスが指定されていない場合は実行場所からsrc/appディレクトリに出力
+        const defaultOutputPath = path.resolve(process.cwd(), 'src', 'app', 'sparkle-design.css');
+        const resolvedOutputPath = outputPath ? path.resolve(outputPath) : defaultOutputPath;
+
+        try {
+                // 出力ディレクトリが存在しない場合は作成
+                const outputDir = path.dirname(resolvedOutputPath);
+                if (!fs.existsSync(outputDir)) {
+                        fs.mkdirSync(outputDir, { recursive: true });
+                }
+
+                fs.writeFileSync(resolvedOutputPath, cssContent, 'utf8');
+                console.log('✅ sparkle-design.css を生成しました:', resolvedOutputPath);
+        } catch (error) {
+                console.error('❌ CSSファイルの書き出しに失敗しました:', error.message);
+                process.exit(1);
+        }
+}
+
+/**
+ * メイン処理
+ */
+export function generateCSS(configPath = null, outputPath = null) {
+        console.log('🚀 Sparkle Design CSS Generator を開始します...\n');
+
+        // 1. 設定ファイルを読み込み
+        const config = loadConfig(configPath);
+
+        // 2. テンプレートを読み込み
+        const template = loadTemplate();
+
+        // 3. colors.json、gray.json、radius.csvを読み込み
+        const colors = loadColors();
+        const grayMapping = loadGrayMapping();
+        const radiusMapping = loadRadiusMapping();
+
+        // 4. テンプレートを設定値で処理
+        const processedCSS = processTemplate(template, config, grayMapping, radiusMapping, colors);
+
+        // 5. CSSファイルを書き出し
+        writeCSS(processedCSS, outputPath);
+
+        console.log('\n🎉 CSS生成が完了しました！');
+}
+
+// スクリプトが直接実行された場合のみメイン処理を実行
+if (import.meta.url === `file://${process.argv[1]}`) {
+        generateCSS();
+}
+
+export {
+        loadConfig,
+        loadTemplate,
+        loadColors,
+        loadGrayMapping,
+        loadRadiusMapping,
+        processTemplate,
+        writeCSS,
+        hexToRgba,
+        hexToOklch,
+        generateColorTokens,
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "sparkle-design-cli",
+  "version": "1.1.0",
+  "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
+  "main": "lib/generate-css.js",
+  "type": "module",
+  "bin": {
+    "sparkle-design-cli": "./bin/sparkle-design.js"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.js",
+    "test:watch": "node --test --watch test/*.test.js",
+    "lint": "eslint bin/ lib/ test/",
+    "lint:fix": "eslint bin/ lib/ test/ --fix",
+    "format": "prettier --write bin/ lib/ test/ *.md *.json",
+    "format:check": "prettier --check bin/ lib/ test/ *.md *.json"
+  },
+  "keywords": [
+    "css",
+    "design-system",
+    "css-generator",
+    "theming"
+  ],
+  "author": "Goodpatch Inc. <sparkle-design@goodpatch.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "power-assert": "^1.6.1",
+    "eslint": "^8.57.0",
+    "prettier": "^3.2.5",
+    "@eslint/js": "^8.57.0"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    "templates/",
+    "README.md",
+    "LICENSE"
+  ]
+}