tokenize-css 0.1.0 → 0.2.1

package/README.md

@@ -3,16 +3,19 @@
 CLI tool to convert Design Tokens (Token Studio) to CSS variables.
 
 ## Installation
+
 ```bash
 npm install -g tokenize-css
 ```
 
 ## Usage
+
 ```bash
 tokenize <input> <output> [options]
 ```
 
 ### Examples
+
 ```bash
 # Basic usage
 tokenize tokens.json dist
@@ -22,15 +25,19 @@ tokenize tokens.json "/path/to/output"
 
 # Specify source type
 tokenize tokens.json dist --source token-studio
+
+# Watch mode - rebuild on file changes
+tokenize tokens.json dist --watch
 ```
 
 ### Options
 
-| Option | Description | Default |
-|--------|-------------|---------|
+| Option                | Description                                 | Default      |
+| --------------------- | ------------------------------------------- | ------------ |
 | `-s, --source <type>` | Source type (token-studio, figma-variables) | token-studio |
-| `-V, --version` | Output version | |
-| `-h, --help` | Display help | |
+| `-w, --watch`         | Watch for changes and rebuild automatically | false        |
+| `-V, --version`       | Output version                              |              |
+| `-h, --help`          | Display help                                |              |
 
 ## Supported Sources
 

package/bin/cli.js

@@ -1,20 +1,16 @@
 #!/usr/bin/env node
 
-import { program } from 'commander';
-import StyleDictionary from 'style-dictionary';
-import chalk from 'chalk';
-import { resolve } from 'path';
-import { createTokenStudioConfig } from '../src/config/token-studio.js';
-
-async function build(input, output, source = 'token-studio') {
-  console.log(chalk.blue.bold('\n🎨 tokenize-css\n'));
-  console.log(chalk.gray(`Source: ${source}`));
-  console.log(chalk.gray(`Input: ${input}`));
-  console.log(chalk.gray(`Output: ${output}\n`));
+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";
 
+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`));
@@ -24,26 +20,67 @@ async function build(input, output, source = 'token-studio') {
   try {
     const sd = new StyleDictionary(config);
     await sd.buildAllPlatforms();
-    console.log(chalk.green('✅ Done!\n'));
+    return true;
   } catch (error) {
     console.error(chalk.red(`❌ Error: ${error.message}`));
-    process.exit(1);
+    return false;
   }
 }
 
 program
-  .name('tokenize')
-  .description('Convert Design Tokens to CSS variables')
-  .version('0.1.0');
+  .name("tokenize")
+  .description("Convert Design Tokens to CSS variables")
+  .version("0.2.0");
 
 program
-  .argument('<input>', 'Input tokens file')
-  .argument('<output>', 'Output directory')
-  .option('-s, --source <type>', 'Source type (token-studio, figma-variables)', 'token-studio')
+  .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);
-    await build(inputPath, outputPath, options.source);
+
+    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("");
+    }
+
+    // Initial build
+    const success = await build(inputPath, outputPath, options.source);
+
+    if (success) {
+      console.log(chalk.green("\n✅ Build complete!\n"));
+    }
+
+    // Watch mode
+    if (options.watch) {
+      const watcher = chokidar.watch(inputPath, { persistent: true });
+
+      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"));
+        }
+      });
+
+      process.on("SIGINT", () => {
+        console.log(chalk.gray("\n\n👋 Stopping watch mode...\n"));
+        watcher.close();
+        process.exit(0);
+      });
+    }
   });
 
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenize-css",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "CLI tool to convert Design Tokens (Token Studio, Figma Variables) to CSS variables using Style Dictionary",
   "type": "module",
   "bin": {
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "chalk": "^5.3.0",
+    "chokidar": "^3.6.0",
     "commander": "^12.1.0",
     "style-dictionary": "^4.3.0"
   }