tokenize-css 0.2.1 → 0.3.0

package/bin/cli.js

@@ -1,16 +1,17 @@
 #!/usr/bin/env node
 
-import { program } from "commander";
-import StyleDictionary from "style-dictionary";
-import chalk from "chalk";
-import chokidar from "chokidar";
-import { resolve } from "path";
-import { createTokenStudioConfig } from "../src/config/token-studio.js";
+import { program } from 'commander';
+import StyleDictionary from 'style-dictionary';
+import chalk from 'chalk';
+import chokidar from 'chokidar';
+import { resolve } from 'path';
+import { createTokenStudioConfig } from '../src/config/token-studio.js';
+import { loadConfig } from '../src/config/loader.js';
 
-async function build(input, output, source = "token-studio") {
+async function build(input, output, source = 'token-studio') {
   let config;
 
-  if (source === "token-studio") {
+  if (source === 'token-studio') {
     config = createTokenStudioConfig(input, output);
   } else {
     console.error(chalk.red(`❌ Source "${source}" not supported yet`));
@@ -27,60 +28,79 @@ async function build(input, output, source = "token-studio") {
   }
 }
 
-program
-  .name("tokenize")
-  .description("Convert Design Tokens to CSS variables")
-  .version("0.2.0");
+async function run(inputPath, outputPath, options) {
+  console.log(chalk.blue.bold('\n🎨 tokenize-css\n'));
+  console.log(chalk.gray(`Source: ${options.source}`));
+  console.log(chalk.gray(`Input: ${inputPath}`));
+  console.log(chalk.gray(`Output: ${outputPath}`));
+  
+  if (options.watch) {
+    console.log(chalk.yellow(`\n👀 Watching for changes...\n`));
+  } else {
+    console.log('');
+  }
 
-program
-  .argument("<input>", "Input tokens file")
-  .argument("<output>", "Output directory")
-  .option(
-    "-s, --source <type>",
-    "Source type (token-studio, figma-variables)",
-    "token-studio"
-  )
-  .option("-w, --watch", "Watch for changes and rebuild automatically")
-  .action(async (input, output, options) => {
-    const inputPath = resolve(process.cwd(), input);
-    const outputPath = resolve(process.cwd(), output);
+  const success = await build(inputPath, outputPath, options.source);
+  
+  if (success) {
+    console.log(chalk.green('\n✅ Build complete!\n'));
+  }
 
-    console.log(chalk.blue.bold("\n🎨 tokenize-css\n"));
-    console.log(chalk.gray(`Source: ${options.source}`));
-    console.log(chalk.gray(`Input: ${inputPath}`));
-    console.log(chalk.gray(`Output: ${outputPath}`));
+  if (options.watch) {
+    const watcher = chokidar.watch(inputPath, { persistent: true });
 
-    if (options.watch) {
-      console.log(chalk.yellow(`\n👀 Watching for changes...\n`));
-    } else {
-      console.log("");
-    }
+    watcher.on('change', async () => {
+      console.log(chalk.yellow(`\n🔄 File changed, rebuilding...\n`));
+      const success = await build(inputPath, outputPath, options.source);
+      if (success) {
+        console.log(chalk.green('✅ Build complete!\n'));
+      }
+    });
 
-    // Initial build
-    const success = await build(inputPath, outputPath, options.source);
+    process.on('SIGINT', () => {
+      console.log(chalk.gray('\n\n👋 Stopping watch mode...\n'));
+      watcher.close();
+      process.exit(0);
+    });
+  }
+}
 
-    if (success) {
-      console.log(chalk.green("\n✅ Build complete!\n"));
-    }
+program
+  .name('tokenize')
+  .description('Convert Design Tokens to CSS variables')
+  .version('0.2.1');
 
-    // Watch mode
-    if (options.watch) {
-      const watcher = chokidar.watch(inputPath, { persistent: true });
+program
+  .argument('[input]', 'Input tokens file')
+  .argument('[output]', 'Output directory')
+  .option('-c, --config <path>', 'Path to config file')
+  .option('-s, --source <type>', 'Source type (token-studio, figma-variables)', 'token-studio')
+  .option('-w, --watch', 'Watch for changes and rebuild automatically')
+  .action(async (input, output, options) => {
+    let inputPath, outputPath, source, watch;
 
-      watcher.on("change", async () => {
-        console.log(chalk.yellow(`\n🔄 File changed, rebuilding...\n`));
-        const success = await build(inputPath, outputPath, options.source);
-        if (success) {
-          console.log(chalk.green("✅ Build complete!\n"));
-        }
-      });
+    // Try to load config file
+    const config = await loadConfig(options.config);
 
-      process.on("SIGINT", () => {
-        console.log(chalk.gray("\n\n👋 Stopping watch mode...\n"));
-        watcher.close();
-        process.exit(0);
-      });
+    if (config) {
+      console.log(chalk.gray(`Using config: ${config.configPath || options.config}\n`));
+      inputPath = resolve(process.cwd(), input || config.input);
+      outputPath = resolve(process.cwd(), output || config.output);
+      source = options.source || config.source;
+      watch = options.watch || config.watch;
+    } else if (input && output) {
+      inputPath = resolve(process.cwd(), input);
+      outputPath = resolve(process.cwd(), output);
+      source = options.source;
+      watch = options.watch;
+    } else {
+      console.error(chalk.red('❌ Error: No config file found and no input/output provided.'));
+      console.log(chalk.gray('\nUsage: tokenize <input> <output>'));
+      console.log(chalk.gray('   or: create tokenize.config.js\n'));
+      process.exit(1);
     }
+
+    await run(inputPath, outputPath, { source, watch });
   });
 
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenize-css",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "CLI tool to convert Design Tokens (Token Studio, Figma Variables) to CSS variables using Style Dictionary",
   "type": "module",
   "bin": {

package/src/config/defaults.js

@@ -0,0 +1,13 @@
+export const defaultConfig = {
+  source: 'token-studio',
+  input: './tokens.json',
+  output: './dist',
+  watch: false,
+  files: {
+    colors: 'colors.css',
+    spacing: 'spacing.css',
+    typography: 'typography.css',
+    shadows: 'shadows.css',
+    all: 'tokens.css'
+  }
+};

package/src/config/loader.js

@@ -0,0 +1,34 @@
+import { existsSync } from 'fs';
+import { resolve } from 'path';
+import { pathToFileURL } from 'url';
+import { defaultConfig } from './defaults.js';
+
+const CONFIG_FILES = [
+  'tokenize.config.js',
+  'tokenize.config.mjs'
+];
+
+export async function loadConfig(customPath) {
+  const cwd = process.cwd();
+  
+  // Custom path provided
+  if (customPath) {
+    const fullPath = resolve(cwd, customPath);
+    if (!existsSync(fullPath)) {
+      throw new Error(`Config file not found: ${customPath}`);
+    }
+    const userConfig = await import(pathToFileURL(fullPath));
+    return { ...defaultConfig, ...userConfig.default };
+  }
+
+  // Search for config file
+  for (const fileName of CONFIG_FILES) {
+    const fullPath = resolve(cwd, fileName);
+    if (existsSync(fullPath)) {
+      const userConfig = await import(pathToFileURL(fullPath));
+      return { ...defaultConfig, ...userConfig.default, configPath: fullPath };
+    }
+  }
+
+  return null;
+}