1#!/usr/bin/env node
2/**
3 * Generate CSS variables from design tokens JSON
4 *
5 * Usage:
6 *   node generate-tokens.cjs --config tokens.json -o tokens.css
7 *   node generate-tokens.cjs --config tokens.json --format tailwind
8 */
9 
10const fs = require('fs');
11const path = require('path');
12 
13/**
14 * Parse command line arguments
15 */
16function parseArgs() {
17  const args = process.argv.slice(2);
18  const options = {
19    config: null,
20    output: null,
21    format: 'css' // css | tailwind
22  };
23 
24  for (let i = 0; i < args.length; i++) {
25    if (args[i] === '--config' || args[i] === '-c') {
26      options.config = args[++i];
27    } else if (args[i] === '--output' || args[i] === '-o') {
28      options.output = args[++i];
29    } else if (args[i] === '--format' || args[i] === '-f') {
30      options.format = args[++i];
31    } else if (args[i] === '--help' || args[i] === '-h') {
32      console.log(`
33Usage: node generate-tokens.cjs [options]
34 
35Options:
36  -c, --config <file>   Input JSON token file (required)
37  -o, --output <file>   Output file (default: stdout)
38  -f, --format <type>   Output format: css | tailwind (default: css)
39  -h, --help            Show this help
40      `);
41      process.exit(0);
42    }
43  }
44 
45  return options;
46}
47 
48/**
49 * Resolve token references like {primitive.color.blue.600}
50 */
51function resolveReference(value, tokens) {
52  if (typeof value !== 'string' || !value.startsWith('{')) {
53    return value;
54  }
55 
56  const path = value.slice(1, -1).split('.');
57  let result = tokens;
58 
59  for (const key of path) {
60    result = result?.[key];
61  }
62 
63  if (result?.$value) {
64    return resolveReference(result.$value, tokens);
65  }
66 
67  return result || value;
68}
69 
70/**
71 * Convert token name to CSS variable name
72 */
73function toCssVarName(path) {
74  return '--' + path.join('-').replace(/\./g, '-');
75}
76 
77/**
78 * Flatten tokens into CSS variables
79 */
80function flattenTokens(obj, tokens, prefix = [], result = {}) {
81  for (const [key, value] of Object.entries(obj)) {
82    const currentPath = [...prefix, key];
83 
84    if (value && typeof value === 'object') {
85      if (value.$value !== undefined) {
86        // This is a token
87        const cssVar = toCssVarName(currentPath);
88        const resolvedValue = resolveReference(value.$value, tokens);
89        result[cssVar] = resolvedValue;
90      } else {
91        // Recurse into nested object
92        flattenTokens(value, tokens, currentPath, result);
93      }
94    }
95  }
96 
97  return result;
98}
99 
100/**
101 * Generate CSS output
102 */
103function generateCSS(tokens) {
104  const primitive = flattenTokens(tokens.primitive || {}, tokens, ['primitive']);
105  const semantic = flattenTokens(tokens.semantic || {}, tokens, []);
106  const component = flattenTokens(tokens.component || {}, tokens, []);
107  const darkSemantic = flattenTokens(tokens.dark?.semantic || {}, tokens, []);
108 
109  let css = `/* Design Tokens - Auto-generated */
110/* Do not edit directly - modify tokens.json instead */
111 
112/* === PRIMITIVES === */
113:root {
114${Object.entries(primitive).map(([k, v]) => `  ${k}: ${v};`).join('\n')}
115}
116 
117/* === SEMANTIC === */
118:root {
119${Object.entries(semantic).map(([k, v]) => `  ${k}: ${v};`).join('\n')}
120}
121 
122/* === COMPONENTS === */
123:root {
124${Object.entries(component).map(([k, v]) => `  ${k}: ${v};`).join('\n')}
125}
126`;
127 
128  if (Object.keys(darkSemantic).length > 0) {
129    css += `
130/* === DARK MODE === */
131.dark {
132${Object.entries(darkSemantic).map(([k, v]) => `  ${k}: ${v};`).join('\n')}
133}
134`;
135  }
136 
137  return css;
138}
139 
140/**
141 * Generate Tailwind config output
142 */
143function generateTailwind(tokens) {
144  const semantic = flattenTokens(tokens.semantic || {}, tokens, []);
145 
146  // Extract colors for Tailwind
147  const colors = {};
148  for (const [key, value] of Object.entries(semantic)) {
149    if (key.includes('color')) {
150      const name = key.replace('--color-', '').replace(/-/g, '.');
151      colors[name] = `var(${key})`;
152    }
153  }
154 
155  return `// Tailwind color config - Auto-generated
156// Add to tailwind.config.ts theme.extend.colors
157 
158module.exports = {
159  colors: ${JSON.stringify(colors, null, 2).replace(/"/g, "'")}
160};
161`;
162}
163 
164/**
165 * Main
166 */
167function main() {
168  const options = parseArgs();
169 
170  if (!options.config) {
171    console.error('Error: --config is required');
172    process.exit(1);
173  }
174 
175  // Resolve config path
176  const configPath = path.resolve(process.cwd(), options.config);
177 
178  if (!fs.existsSync(configPath)) {
179    console.error(`Error: Config file not found: ${configPath}`);
180    process.exit(1);
181  }
182 
183  // Read and parse tokens
184  const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
185 
186  // Generate output
187  let output;
188  if (options.format === 'tailwind') {
189    output = generateTailwind(tokens);
190  } else {
191    output = generateCSS(tokens);
192  }
193 
194  // Write output
195  if (options.output) {
196    const outputPath = path.resolve(process.cwd(), options.output);
197    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
198    fs.writeFileSync(outputPath, output);
199    console.log(`Generated: ${outputPath}`);
200  } else {
201    console.log(output);
202  }
203}
204 
205main();
206