chaincss 2.0.6 → 2.1.0

package/src/cli/commands/watch.ts

@@ -0,0 +1,211 @@
+// src/cli/commands/watch.ts (with fixes for logger)
+
+import path from 'path';
+import chalk from 'chalk';
+import fs from 'fs';
+import { ChainCSSCompiler } from '../../core/compiler.js';
+import { createLogger } from '../utils/logger.js';
+import { loadConfig } from '../utils/config-loader.js';
+import { findInputFiles, ensureDirectory, getOutputPath } from '../utils/file-utils.js';
+import type { BuildOptions } from '../types.js';
+
+export interface WatchOptions extends BuildOptions {
+  debounce?: number;
+}
+
+export async function watchCommand(options: WatchOptions): Promise<void> {
+  const logger = createLogger(options.verbose);
+  
+  logger.header('ChainCSS Watch Mode');
+  
+  // Load configuration
+  const config = await loadConfig(options.config);
+  const inputs = config.inputs || ['src/**/*.chain.{js,ts}', 'src/**/*.chain.{jsx,tsx}'];
+  
+  // Determine output directory
+  let outputDir = 'dist/styles';
+  if (typeof config.output === 'object' && config.output.cssFile) {
+    outputDir = path.dirname(config.output.cssFile);
+  } else if (typeof config.output === 'string') {
+    outputDir = config.output;
+  }
+  
+  if (inputs.length === 0) {
+    logger.error('No input patterns found in configuration');
+    process.exit(1);
+  }
+  
+  logger.info(`Watching files matching: ${inputs.join(', ')}`);
+  
+  // Find initial files
+  const initialFiles = findInputFiles(inputs);
+  logger.success(`Found ${initialFiles.length} file(s) to watch`);
+  
+  // Ensure output directory exists
+  ensureDirectory(outputDir);
+  
+  // Initialize compiler
+  const compiler = new ChainCSSCompiler({
+    tokens: config.tokens,
+    atomic: {
+      enabled: config.atomic?.enabled !== false,
+      threshold: config.atomic?.threshold || 2,
+      naming: config.atomic?.naming || (process.env.NODE_ENV === 'production' ? 'hash' : 'readable'),
+      minify: config.atomic?.minify !== false,
+      mode: config.atomic?.mode || 'hybrid',
+      verbose: options.verbose || config.verbose || false
+    },
+    prefixer: {
+      enabled: config.prefixer?.enabled !== false,
+      browsers: config.prefixer?.browsers
+    },
+    output: {
+      minify: config.output?.minify !== false
+    },
+    verbose: options.verbose || config.verbose || false,
+    breakpoints: config.breakpoints,
+    debug: config.debug || false,
+    timeline: config.timeline || false
+  });
+  
+  // Initial compilation
+  logger.step('Initial compilation...');
+  let compiledCount = 0;
+  
+  for (let i = 0; i < initialFiles.length; i++) {
+    const file = initialFiles[i];
+    const relativePath = path.relative(process.cwd(), file);
+    logger.progress(i + 1, initialFiles.length, `Compiling ${relativePath}...`);
+    
+    try {
+      await compiler.compile(file, outputDir);
+      compiledCount++;
+    } catch (error) {
+      logger.error(`Failed to compile ${relativePath}: ${(error as Error).message}`);
+    }
+  }
+  
+  logger.progress(initialFiles.length, initialFiles.length, 'Initial build complete!');
+  logger.success(`Compiled ${compiledCount} file(s)`);
+  
+  // Setup file watcher
+  logger.divider();
+  logger.info(`👀 Watching for changes... (press Ctrl+C to stop)\n`);
+  
+  const chokidar = await import('chokidar');
+  const debounceDelay = options.debounce || 100;
+  
+  // Create watcher
+  const watcher = chokidar.watch(inputs, {
+    ignored: ['**/node_modules/**', '**/dist/**', '**/.chaincss-cache/**', '**/*.css', '**/*.d.ts'],
+    persistent: true,
+    ignoreInitial: true
+  });
+  
+  // Debounce function to avoid multiple rapid recompilations
+  let debounceTimer: NodeJS.Timeout | null = null;
+  let pendingFiles = new Set<string>();
+  
+  function scheduleRecompile() {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    
+    debounceTimer = setTimeout(async () => {
+      const filesToCompile = Array.from(pendingFiles);
+      pendingFiles.clear();
+      
+      logger.divider();
+      logger.info(`📦 Recompiling ${filesToCompile.length} changed file(s)...`);
+      
+      let successCount = 0;
+      let failCount = 0;
+      
+      for (const file of filesToCompile) {
+        const relativePath = path.relative(process.cwd(), file);
+        try {
+          await compiler.compile(file, outputDir);
+          logger.success(`  ✓ ${relativePath}`);
+          successCount++;
+        } catch (error) {
+          logger.error(`  ✗ ${relativePath}: ${(error as Error).message}`);
+          failCount++;
+        }
+      }
+      
+      if (successCount > 0) {
+        logger.success(`✅ Recompiled ${successCount} file(s) successfully`);
+      }
+      if (failCount > 0) {
+        logger.error(`❌ Failed to recompile ${failCount} file(s)`);
+      }
+      
+      debounceTimer = null;
+    }, debounceDelay);
+  }
+  
+  // Handle file changes
+  watcher.on('change', (filePath: string) => {
+    const ext = path.extname(filePath);
+    if (ext === '.js' || ext === '.ts' || ext === '.jsx' || ext === '.tsx') {
+      const relativePath = path.relative(process.cwd(), filePath);
+      if (options.verbose) {
+        logger.info(`File changed: ${relativePath}`);
+      }
+      pendingFiles.add(filePath);
+      scheduleRecompile();
+    }
+  });
+  
+  // Handle new files
+  watcher.on('add', (filePath: string) => {
+    const ext = path.extname(filePath);
+    if (ext === '.js' || ext === '.ts' || ext === '.jsx' || ext === '.tsx') {
+      const relativePath = path.relative(process.cwd(), filePath);
+      logger.info(`📄 New file detected: ${relativePath}`);
+      pendingFiles.add(filePath);
+      scheduleRecompile();
+    }
+  });
+  
+  // Handle deleted files
+  watcher.on('unlink', (filePath: string) => {
+    const ext = path.extname(filePath);
+    if (ext === '.js' || ext === '.ts' || ext === '.jsx' || ext === '.tsx') {
+      const relativePath = path.relative(process.cwd(), filePath);
+      logger.warn(`🗑️ File deleted: ${relativePath}`);
+      
+      // Remove corresponding output files
+      const baseName = path.basename(filePath, ext);
+      const outputBase = path.join(outputDir, baseName);
+      const cssFile = `${outputBase}.css`;
+      const classFile = `${outputBase}.class.js`;
+      
+      if (fs.existsSync(cssFile)) fs.unlinkSync(cssFile);
+      if (fs.existsSync(classFile)) fs.unlinkSync(classFile);
+      
+      logger.info(`  Removed output files for ${relativePath}`);
+    }
+  });
+  
+  // Handle watcher errors
+  watcher.on('error', (error: unknown) => {
+    logger.error(`Watcher error: ${error instanceof Error ? error.message : String(error)}`);
+  });
+  
+  // Handle process termination
+  const cleanup = () => {
+    logger.info('\n👋 Shutting down watcher...');
+    watcher.close();
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    process.exit(0);
+  };
+  
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+  
+  // Keep the process alive
+  await new Promise(() => {});
+}

package/src/cli/index.ts

@@ -0,0 +1,226 @@
+// src/cli/index.ts
+import { Command } from 'commander';
+import { readFileSync, existsSync, writeFileSync, mkdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import { glob } from 'glob';
+import chalk from 'chalk';
+import { loadConfig } from './utils/config-loader.js';
+
+// ============================================================================
+// Path Resolution
+// ============================================================================
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const findPackageJson = (startDir: string): string => {
+  let currentDir = startDir;
+  while (currentDir !== path.parse(currentDir).root) {
+    const pkgPath = path.join(currentDir, 'package.json');
+    if (existsSync(pkgPath)) return pkgPath;
+    currentDir = path.dirname(currentDir);
+  }
+  throw new Error('Could not find package.json');
+};
+
+const packageJsonPath = findPackageJson(__dirname);
+const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+
+// ============================================================================
+// CLI Setup
+// ============================================================================
+
+const program = new Command();
+
+program
+  .name('chaincss')
+  .description('ChainCSS - Zero-runtime CSS-in-JS Compiler')
+  .version(packageJson.version, '-V, --version')
+  .usage('[command] [options]')
+  .helpOption('-h, --help', 'Display help for command');
+
+// ============================================================================
+// Dynamic Import for Compiler (avoids bundling top-level await)
+// ============================================================================
+
+const getCompiler = async (config?: any) => {
+  const { ChainCSSCompiler } = await import('../core/compiler.js');
+  return new ChainCSSCompiler(config);
+};
+
+// ============================================================================
+// Error Handling
+// ============================================================================
+
+const handleError = (error: unknown, command: string): void => {
+  console.error(chalk.red(`\n❌ Error running "${command}":`));
+  if (error instanceof Error) {
+    console.error(chalk.red(`   ${error.message}`));
+    if (process.env.DEBUG) console.error(error.stack);
+  } else {
+    console.error(chalk.red(`   ${String(error)}`));
+  }
+  process.exit(1);
+};
+
+// ============================================================================
+// Init Command
+// ============================================================================
+
+// ============================================================================
+// Init Command (Generates the NEW Object-based config)
+// ============================================================================
+program
+  .command('init')
+  .description('Initialize ChainCSS configuration file')
+  .option('-f, --force', 'Overwrite existing config file')
+  .action(async (options) => {
+    try {
+      const configPath = 'chaincss.config.js';
+      if (existsSync(configPath) && !options.force) {
+        console.log(chalk.yellow('Config file already exists. Use --force to overwrite.'));
+        return;
+      }
+      
+      const config = `export default {
+  inputs: ['src/**/*.chain.{js,ts}', 'src/**/*.tsx'],
+  output: {
+    cssFile: 'global.css',
+    classMapFile: 'style',
+    minify: false,
+    generateGlobalCSS: true
+  },
+  atomic: {
+    enabled: true,
+    naming: 'hash',
+    mode: 'hybrid'
+  },
+  verbose: true
+};`;
+      writeFileSync(configPath, config); 
+      console.log(chalk.green('✓ Created chaincss.config.js with Object-based output.'));
+    } catch (error) {
+      handleError(error, 'init');
+    }
+  });
+
+// ============================================================================
+// Build Command
+// ============================================================================
+program
+  .command('build')
+  .option('-v, --verbose', 'Verbose output')
+  .action(async (opts) => {
+    try {
+      const config = await loadConfig();
+      const compiler = await getCompiler(config);
+      
+      console.log(chalk.blue('🚀 Starting ChainCSS Build...'));
+
+      const patterns = config.inputs || ['src/**/*.chain.{js,ts}', 'src/**/*.tsx'];
+      const files = await glob(patterns);
+      
+      // The compiler handles the logic we wrote earlier:
+      // 1. Component CSS in src/components/<Name>/style/
+      // 2. Global CSS in public/
+      // 3. Manifest in src/manifest/
+      await compiler.compileComponents(files);
+
+      const stats = compiler.getStats();
+      console.log(chalk.green(`\n✅ Build Complete!`));
+      console.log(chalk.cyan(`📊 Atomic Rules: ${stats.atomicStyles}`));
+    } catch (error) {
+      handleError(error, 'build');
+    }
+  });
+
+// ============================================================================
+// Watch Command
+// ============================================================================
+program
+  .command('watch')
+  .description('Watch and automatically recompile styles')
+  .action(async () => {
+    try {
+      const config = await loadConfig();
+      const compiler = await getCompiler(config);
+      const chokidar = await import('chokidar');
+      
+      const patterns = config.inputs || ['src/**/*.chain.{js,ts}', 'src/**/*.tsx'];
+      const watcher = chokidar.watch(patterns, { ignored: '**/node_modules/**' });
+
+      console.log(chalk.blue('📡 Watching for changes...'));
+
+      watcher.on('change', async (filePath) => {
+        console.log(chalk.yellow(`\r🔄 Change detected: ${path.basename(filePath)}`));
+        const files = await glob(patterns);
+        await compiler.compileComponents(files);
+      });
+    } catch (error) {
+      handleError(error, 'watch');
+    }
+  });
+
+// ============================================================================
+// Timeline
+// ============================================================================
+
+program
+  .command('timeline')
+  .description('Manage style timeline')
+  .argument('<action>', 'Action: list, diff, export, clear')
+  .option('-s, --snapshot1 <id>', 'First snapshot ID or selector for diff')
+  .option('--snapshot2 <id>', 'Second snapshot ID or selector for diff')
+  .option('-o, --output <path>', 'Output file for export')
+  .action(async (action, options) => {
+    const { timelineCommand } = await import('./commands/timeline.js');
+    await timelineCommand(action, options);
+  });
+
+// ============================================================================
+// Help and Examples
+// ============================================================================
+
+program.on('--help', () => {
+  console.log('');
+  console.log(chalk.cyan('Examples:'));
+  console.log(chalk.gray('  # Initialize a new project'));
+  console.log('  $ chaincss init');
+  console.log('');
+  console.log(chalk.gray('  # Build all styles'));
+  console.log('  $ chaincss build -c "src/**/*.chain.js"');
+  console.log('');
+  console.log(chalk.gray('  # Watch for changes'));
+  console.log('  $ chaincss watch -c "src/**/*.chain.js"');
+  console.log('');
+  console.log(chalk.cyan('Documentation:'));
+  console.log('  https://github.com/melcanz08/chaincss');
+  console.log('');
+});
+
+// ============================================================================
+// Cache
+// ============================================================================
+
+program
+  .command('cache')
+  .description('Manage persistent cache')
+  .argument('<action>', 'Action: clear, stats, prune')
+  .option('-v, --verbose', 'Verbose output')
+  .action(async (action, options) => {
+    const { cacheCommand } = await import('./commands/cache.js');
+    await cacheCommand(action, options);
+  });
+
+// ============================================================================
+// Parse Arguments
+// ============================================================================
+
+if (process.argv.length === 2) {
+  program.outputHelp();
+  process.exit(0);
+}
+
+program.parse(process.argv);
+

package/src/cli/types.ts

@@ -0,0 +1,100 @@
+// src/cli/types.ts
+
+import type { ChainCSSConfig as CoreChainCSSConfig } from '../core/types.js';
+
+// Re-export core config
+export type ChainCSSConfig = CoreChainCSSConfig;
+
+// CLI-specific options
+export interface CLIOptions {
+  input?: string;
+  output?: string;
+  watch?: boolean;
+  atomic?: boolean;
+  minify?: boolean;
+  prefix?: boolean;
+  sourceMap?: boolean;
+  verbose?: boolean;
+  config?: string;
+  help?: boolean;
+  version?: boolean;
+}
+
+export interface CompileOptions {
+  input: string;
+  output: string;
+  watch?: boolean;
+  atomic?: boolean;
+  minify?: boolean;
+  prefix?: boolean;
+  sourceMap?: boolean;
+  verbose?: boolean;
+}
+
+export interface BuildOptions {
+  config?: string;
+  watch?: boolean;
+  verbose?: boolean;
+  atomic?: boolean;
+  minify?: boolean;
+}
+
+export interface WatchOptions {
+  config?: string;
+  verbose?: boolean;
+  atomic?: boolean;
+}
+
+export interface CacheOptions {
+  action: 'clear' | 'stats' | 'prune' | 'list' | 'inspect' | 'delete' | 'validate' | 'backup';
+  key?: string;
+  force?: boolean;
+  maxAge?: number;
+  maxSize?: number;
+  output?: string;
+  verbose?: boolean;
+}
+
+export interface TimelineOptions {
+  action: 'list' | 'diff' | 'changes' | 'stats' | 'export' | 'clear' | 'watch';
+  snapshot1?: string;
+  snapshot2?: string;
+  output?: string;
+  verbose?: boolean;
+}
+
+export interface InitOptions {
+  force?: boolean;
+  template?: 'full' | 'minimal';
+  typescript?: boolean;
+  framework?: 'react' | 'vue' | 'svelte' | 'solid';
+}
+
+// Utility type for command handlers
+export type CommandHandler<T = any> = (options: T) => Promise<void> | void;
+
+// CLI command definition
+export interface CLICommand {
+  name: string;
+  description: string;
+  options?: Array<{
+    flags: string;
+    description: string;
+    defaultValue?: any;
+  }>;
+  handler: CommandHandler;
+}
+
+// Build result type
+export interface BuildResult {
+  success: boolean;
+  compiledFiles: number;
+  duration: number;
+  errors: Error[];
+  warnings: string[];
+  stats?: {
+    totalStyles: number;
+    atomicStyles: number;
+    cssSize: number;
+  };
+}

package/src/cli/utils/config-loader.ts

@@ -0,0 +1,174 @@
+// src/cli/utils/config-loader.ts
+/**
+ * ChainCSS Configuration Loader
+ * @module config-loader
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { createLogger } from './logger.js';
+import type { ChainCSSConfig } from '../types.js';
+import { DEFAULT_CONFIG as CORE_DEFAULTS } from '../../core/constants.js';
+
+export async function loadConfig(configPath?: string): Promise<ChainCSSConfig> {
+  const logger = createLogger(false);
+  
+  const possiblePaths = configPath 
+    ? [configPath]
+    : [
+        path.join(process.cwd(), 'chaincss.config.js'),
+        path.join(process.cwd(), 'chaincss.config.ts'),
+        path.join(process.cwd(), '.chaincssrc.js'),
+        path.join(process.cwd(), 'chaincss.json')
+      ];
+  
+  for (const configFile of possiblePaths) {
+    if (fs.existsSync(configFile)) {
+      try {
+        logger.debug(`Loading config from ${configFile}`);
+        
+        const configModule = await import(`file://${configFile}`);
+        const userConfig = configModule.default || configModule;
+
+        // 2. MERGE WITH CORE DEFAULTS INSTEAD OF LOCAL DEFAULTS
+        return mergeConfig(CORE_DEFAULTS, userConfig);
+      } catch (error) {
+        logger.warn(`Failed to load config from ${configFile}:`, error);
+      }
+    }
+  }
+  
+  return CORE_DEFAULTS;
+}
+
+function mergeConfig(defaults: any, user: any): ChainCSSConfig {
+  return {
+    ...defaults,
+    ...user,
+    tokens: {
+      ...defaults.tokens,
+      ...user.tokens
+    },
+    atomic: {
+      ...defaults.atomic,
+      ...user.atomic
+    },
+    prefixer: {
+      ...defaults.prefixer,
+      ...user.prefixer
+    },
+    output: {
+      ...defaults.output,
+      ...user.output
+    },
+    breakpoints: {
+      ...defaults.breakpoints,
+      ...user.breakpoints
+    }
+  };
+}
+
+export function saveConfigTemplate(outputPath: string = 'chaincss.config.js', full: boolean = false): void {
+  let template = '';
+  
+  if (full) {
+    template = `/**
+ * ChainCSS Configuration
+ * @type {import('chaincss').ChainCSSConfig}
+ * 
+ * Documentation: https://chaincss.dev/docs/configuration
+ */
+export default {
+  // ========== INPUT/OUTPUT ==========
+  inputs: ['src/**/*.chain.js', 'src/**/*.chain.ts'],
+  output: 'dist/styles',
+  
+  // ========== TOKENS ==========
+  tokens: {
+    enabled: true,
+    prefix: 'chain'
+  },
+  
+  // ========== ATOMIC CSS ==========
+  atomic: {
+    enabled: true,
+    threshold: 3,
+    naming: 'readable',
+    minify: true,
+    mode: 'hybrid',
+    outputStrategy: 'component-first',
+    verbose: false
+  },
+  
+  // ========== AUTOPREFIXER ==========
+  prefixer: {
+    enabled: true,
+    mode: 'auto',
+    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
+    sourceMap: true
+  },
+  
+  // ========== OUTPUT OPTIONS ==========
+  output: {
+    cssFile: 'styles.css',
+    classMapFile: 'class-map.json',
+    typesFile: 'classes.d.ts',
+    minify: true,
+    generateGlobalCSS: true
+  },
+  
+  // ========== RESPONSIVE BREAKPOINTS ==========
+  breakpoints: {
+    sm: '(max-width: 640px)',
+    md: '(min-width: 641px) and (max-width: 768px)',
+    lg: '(min-width: 769px) and (max-width: 1024px)',
+    xl: '(min-width: 1025px)',
+    '2xl': '(min-width: 1280px)',
+    mobile: '(max-width: 768px)',
+    tablet: '(min-width: 769px) and (max-width: 1024px)',
+    desktop: '(min-width: 1025px)'
+  },
+  
+  // ========== DEBUG & TIMELINE ==========
+  debug: false,
+  sourceComments: true,
+  timeline: false,
+  
+  // ========== FRAMEWORK ==========
+  framework: 'auto',
+  
+  // ========== GENERAL ==========
+  namespace: 'chain',
+  watch: false,
+  verbose: false
+};
+`;
+  } else {
+    template = `/**
+ * ChainCSS Configuration
+ * @type {import('chaincss').ChainCSSConfig}
+ */
+export default {
+  inputs: ['src/**/*.chain.js', 'src/**/*.chain.ts'],
+  output: 'dist/styles',
+  atomic: {
+    enabled: true,
+    naming: 'readable',
+    minify: true
+  },
+  prefixer: {
+    enabled: true
+  },
+  breakpoints: {
+    mobile: '(max-width: 768px)',
+    tablet: '(min-width: 769px) and (max-width: 1024px)',
+    desktop: '(min-width: 1025px)'
+  },
+  debug: false,
+  verbose: false
+};
+`;
+  }
+  
+  fs.writeFileSync(outputPath, template, 'utf8');
+}