apexcss-cli 0.1.0 → 0.1.2

package/bin/apexcss.js

@@ -11,7 +11,7 @@
  *
  * Options:
  *   -c, --config <path>       Config file path (default: ./apex.config.js)
- *   -o, --output <dir>        Output directory (default: ./src/apexcss/)
+ *   -o, --output <dir>        Output directory (default: node_modules/apexcss/dist)
  *   --minify                  Minify output CSS
  *   --sourcemap               Generate source maps
  *   -v, --version             Show version

package/cli/commands/build.js

@@ -7,6 +7,7 @@ import { resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { loadConfig } from '../utils/config-loader.js';
 import { logger } from '../utils/logger.js';
+import * as sass from 'sass';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -228,11 +229,11 @@ export async function buildCommand(options) {
   const entryContent = generateLayerEntry(layers);
   writeFileSync(resolve(tempDir, 'apex-entry.scss'), entryContent);
 
-  // Build using Vite programmatically
+  // Build using Sass compiler
   logger.info('Compiling CSS...');
 
   try {
-    await runViteBuild(tempDir, options, outputDir, layers, scssContent);
+    await runSassBuild(tempDir, options, outputDir, layers, scssContent);
 
     const duration = Date.now() - startTime;
     logger.newline();
@@ -248,7 +249,45 @@ export async function buildCommand(options) {
 }
 
 /**
- * Run Vite build
+ * Compile a single SCSS file
+ * @param {string} entryFile - Path to entry SCSS file
+ * @param {string} outputPath - Path to output CSS file
+ * @param {object} compileOptions - Sass compile options
+ * @returns {object} - Compilation result with css and sourceMap
+ */
+function compileSassFile(entryFile, outputPath, compileOptions) {
+  const result = sass.compile(entryFile, compileOptions);
+  writeFileSync(outputPath, result.css);
+  return result;
+}
+
+/**
+ * Log successful build with file size
+ * @param {string} filename - Name of the file
+ * @param {string} css - CSS content
+ * @param {string} description - Description of what was built
+ */
+function logBuildSuccess(filename, css, description) {
+  const contentBytes = Buffer.byteLength(css, 'utf8');
+  const sizeKB = (contentBytes / 1024).toFixed(2);
+  logger.success(`Built: ${logger.path(filename)} (${sizeKB} KB) [${description}]`);
+}
+
+/**
+ * Write source map file if enabled
+ * @param {string} outputDir - Output directory
+ * @param {string} filename - Base filename without extension
+ * @param {object} sourceMap - Source map object
+ * @param {boolean} enabled - Whether source maps are enabled
+ */
+function writeSourceMap(outputDir, filename, sourceMap, enabled) {
+  if (enabled && sourceMap) {
+    writeFileSync(resolve(outputDir, `${filename}.css.map`), JSON.stringify(sourceMap));
+  }
+}
+
+/**
+ * Run Sass build
  * @param {string} tempDir - Temp directory path
  * @param {object} options - Build options
  * @param {string} outputDir - Output directory path
@@ -256,82 +295,45 @@ export async function buildCommand(options) {
  * @param {string} scssContent - SCSS content
  * @returns {Promise<void>}
  */
-async function runViteBuild(tempDir, options, outputDir, layers, scssContent) {
-  const { build } = await import('vite');
-  const cwd = process.cwd();
-
-  // Look for postcss config in user's project
-  const userPostcssConfig = resolve(cwd, 'postcss.config.js');
-  const apexcssPostcssConfig = resolve(cwd, 'node_modules', 'apexcss', 'postcss.config.js');
-
-  let postcssConfig;
-  if (existsSync(userPostcssConfig)) {
-    postcssConfig = userPostcssConfig;
-  } else if (existsSync(apexcssPostcssConfig)) {
-    postcssConfig = apexcssPostcssConfig;
-  } else {
-    postcssConfig = undefined;
-  }
-
-  await build({
-    configFile: false,
-    css: {
-      postcss: postcssConfig
-    },
-    build: {
-      cssCodeSplit: false,
-      sourcemap: options.sourcemap,
-      minify: options.minify ? 'esbuild' : false,
-      outDir: tempDir,
-      rollupOptions: {
-        input: {
-          apex: resolve(tempDir, 'apex-entry.scss')
-        },
-        output: {
-          entryFileNames: '[name].js',
-          assetFileNames: () => '[name][extname]'
-        }
-      }
+async function runSassBuild(tempDir, options, outputDir, layers, scssContent) {
+  const compileOptions = {
+    loadPaths: [tempDir],
+    sourceMap: options.sourcemap,
+    style: options.minify ? 'compressed' : 'expanded'
+  };
+
+  // Build individual layer files for cascade layer support
+  const layerFiles = ['base', 'utilities', 'themes'];
+
+  for (const layer of layerFiles) {
+    if (!layers.includes(layer)) {
+      continue;
     }
-  });
-
-  // Get output filenames based on layers
-  const { filename, description } = getOutputFilenames(layers);
 
-  // Copy CSS from temp to output
-  const generatedCssPath = findGeneratedCss(tempDir);
-  const finalCssPath = resolve(outputDir, `${filename}.css`);
+    const layerEntry = resolve(tempDir, `${layer}.scss`);
+    if (!existsSync(layerEntry)) {
+      continue;
+    }
 
-  if (!generatedCssPath) {
-    throw new Error('CSS file was not generated');
+    const result = compileSassFile(layerEntry, resolve(outputDir, `${layer}.css`), compileOptions);
+    logBuildSuccess(`${layer}.css`, result.css, `${layer} layer`);
+    writeSourceMap(outputDir, layer, result.sourceMap, options.sourcemap);
   }
 
-  const cssContent = readFileSync(generatedCssPath, 'utf-8');
-  writeFileSync(finalCssPath, cssContent);
-
-  // Calculate file size
-  const contentBytes = Buffer.byteLength(cssContent, 'utf8');
-  const sizeKB = (contentBytes / 1024).toFixed(2);
-
-  const filePath = logger.path(`${filename}.css`);
-  logger.success(`Built: ${filePath} (${sizeKB} KB) [${description}]`);
-
-  // Copy source map if generated
-  if (options.sourcemap) {
-    const mapSource = resolve(tempDir, 'apex.css.map');
-    const mapDest = resolve(outputDir, `${filename}.css.map`);
-    if (existsSync(mapSource)) {
-      const mapContent = readFileSync(mapSource, 'utf-8');
-      writeFileSync(mapDest, mapContent);
-      logger.success('Source map generated');
-    }
+  // Also build combined file if all layers are selected
+  if (layers.length === 3) {
+    const entryFile = resolve(tempDir, 'apex-entry.scss');
+    const result = compileSassFile(entryFile, resolve(outputDir, 'apex.css'), compileOptions);
+    logBuildSuccess('apex.css', result.css, 'complete framework');
+    writeSourceMap(outputDir, 'apex', result.sourceMap, options.sourcemap);
   }
 
   // Output SCSS if requested
   if (options.format === 'scss' || options.format === 'both') {
-    writeFileSync(resolve(outputDir, `${filename}.scss`), scssContent);
-    const scssPath = logger.path(`${filename}.scss`);
-    logger.success(`Generated: ${scssPath}`);
+    const { filename } = getOutputFilenames(layers);
+    const scssFilename = `${filename}.scss`;
+    writeFileSync(resolve(outputDir, scssFilename), scssContent);
+    logger.success(`Generated: ${logger.path(scssFilename)}`);
   }
 
   // Clean up temp directory

package/cli/commands/init.js

@@ -18,6 +18,25 @@ import { detectFramework, getRecommendedOutputDir, getAvailableFrameworks } from
 async function promptForOptions(framework, options) {
   const { default: inquirer } = await import('inquirer');
 
+  // First, ask if user wants to accept defaults
+  const defaultAnswer = await inquirer.prompt([
+    {
+      type: 'confirm',
+      name: 'useDefaults',
+      message: `Use default configuration?\n  Framework: ${framework.name}\n  Add imports: Yes`,
+      default: true
+    }
+  ]);
+
+  if (defaultAnswer.useDefaults) {
+    return {
+      selectedFramework: framework,
+      outputDir: options.outputDir || getRecommendedOutputDir(framework.id),
+      addImport: true
+    };
+  }
+
+  // If not using defaults, show full prompts
   const answers = await inquirer.prompt([
     {
       type: 'list',
@@ -29,12 +48,6 @@ async function promptForOptions(framework, options) {
         value: f.id
       }))
     },
-    {
-      type: 'input',
-      name: 'outputDir',
-      message: 'CSS output directory:',
-      default: options.outputDir || getRecommendedOutputDir(framework.id)
-    },
     {
       type: 'confirm',
       name: 'addImport',
@@ -48,32 +61,31 @@ async function promptForOptions(framework, options) {
 
   return {
     selectedFramework: { ...framework, id: answers.framework },
-    outputDir: answers.outputDir,
+    outputDir: options.outputDir || getRecommendedOutputDir(framework.id),
     addImport: answers.addImport
   };
 }
 
 /**
- * Get user options (interactive or CLI)
+ * Get user options (interactive)
  * @param {object} framework - Detected framework
  * @param {object} options - Command options
  * @param {string} cwd - Current working directory
  * @returns {Promise<{selectedFramework: object, outputDir: string, addImport: boolean}>}
  */
 async function getUserOptions(framework, options, cwd = process.cwd()) {
+  // Always use interactive mode to ask about defaults first
   let result = {
     selectedFramework: framework,
     outputDir: options.outputDir,
     addImport: options.addImport
   };
 
-  if (options.interactive) {
-    try {
-      result = await promptForOptions(framework, options);
-    } catch {
-      // Interactive mode failed - fallback to defaults
-      logger.warn('Interactive mode not available, using defaults');
-    }
+  try {
+    result = await promptForOptions(framework, options);
+  } catch {
+    // Interactive mode failed - fallback to defaults
+    logger.warn('Interactive mode not available, using defaults');
   }
 
   // Override with CLI framework option if provided
@@ -211,22 +223,69 @@ export async function initCommand(options) {
     addFrameworkImport(cwd, selectedFramework, outputDir);
   }
 
+  // Add npm scripts to package.json
+  setupPackageJsonScripts(cwd);
+
   logger.newline();
   logger.success('ApexCSS initialized successfully!');
   logger.newline();
   logger.info('Next steps:');
   logger.list([
     `Edit ${logger.path(options.configPath)} to customize your configuration`,
-    `Run ${logger.cmd('npx apexcss build')} to generate your CSS`,
-    `Run ${logger.cmd('npx apexcss watch')} during development`
+    `Run ${logger.cmd('npm run apexcss:build')} to generate your CSS`,
+    `Run ${logger.cmd('npm run apexcss:watch')} during development`
   ]);
   logger.newline();
 }
 
 /**
- * Prompt for overwrite confirmation
- * @returns {Promise<{overwrite: boolean}>}
+ * Add npm scripts for ApexCSS to package.json
+ * @param {string} cwd - Current working directory
  */
+function setupPackageJsonScripts(cwd) {
+  const packageJsonPath = resolve(cwd, 'package.json');
+
+  if (!existsSync(packageJsonPath)) {
+    logger.warn('No package.json found. Skipping npm scripts setup.');
+    logger.info('To create one, run: npm init');
+    return;
+  }
+
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+    // Ensure scripts object exists
+    packageJson.scripts = packageJson.scripts || {};
+
+    // Add ApexCSS scripts if they don't exist
+    const scripts = {
+      'apexcss:build': 'npx apexcss build',
+      'apexcss:watch': 'npx apexcss watch'
+    };
+
+    let scriptsAdded = false;
+    for (const [name, command] of Object.entries(scripts)) {
+      if (!packageJson.scripts[name]) {
+        packageJson.scripts[name] = command;
+        scriptsAdded = true;
+      }
+    }
+
+    if (scriptsAdded) {
+      writeFileSync(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+      logger.success('Added npm scripts to package.json:');
+      logger.list([
+        `${logger.cmd('npm run apexcss:build')} - Build CSS once`,
+        `${logger.cmd('npm run apexcss:watch')} - Watch for changes`
+      ]);
+    } else {
+      logger.info('ApexCSS npm scripts already exist in package.json');
+    }
+  } catch (error) {
+    logger.warn(`Could not update package.json: ${error.message}`);
+  }
+}
+
 /**
  * Prompt for overwrite confirmation
  * @returns {Promise<{overwrite: boolean}>}
@@ -260,18 +319,10 @@ const CASCADE_LAYER_IMPORTS = `@layer base, utilities, themes;
 /**
  * Get the appropriate import statement for the framework
  * @param {string} frameworkId - Framework identifier
- * @param {string} outputDir - Output directory
+ * @param {string} [_outputDir] - Output directory (unused - kept for API compatibility)
  * @returns {string} - Import statement
  */
-export function getImportStatement(frameworkId, outputDir) {
-  // Normalize path: remove leading ./ and trailing slashes
-  let cleanPath = outputDir.replace(/^\.\//, '').replace(/\/+$/, '');
-
-  // If path is empty after cleanup, use 'dist'
-  if (!cleanPath) {
-    cleanPath = 'dist';
-  }
-
+export function getImportStatement(frameworkId, _outputDir) {
   // All CSS-based frameworks now use cascade layers with node_modules imports
   switch (frameworkId) {
   case 'angular':
@@ -280,10 +331,9 @@ export function getImportStatement(frameworkId, outputDir) {
   case 'svelte':
   case 'vanilla':
   case 'astro':
-    return CASCADE_LAYER_IMPORTS;
   case 'next':
-    // Next.js needs JS imports in layout.tsx, not CSS @imports (CSS @import doesn't resolve node_modules)
-    return 'import \'apexcss/base\';\nimport \'apexcss/utilities\';\nimport \'apexcss/themes\';\n';
+    // Next.js uses globals.css for global styles with cascade layers
+    return CASCADE_LAYER_IMPORTS;
   case 'nuxt':
     return '// Add to nuxt.config.ts:\n// css: [\'apexcss/base\', \'apexcss/utilities\', \'apexcss/themes\']\n';
   default:

package/cli/index.js

@@ -33,7 +33,7 @@ export function cli(args) {
   // Global options
   program
     .option('-c, --config <path>', 'path to config file', './apex.config.js')
-    .option('-o, --output <dir>', 'output directory', './dist/')
+    .option('-o, --output <dir>', 'output directory', 'node_modules/apexcss/dist')
     .option('--minify', 'minify output CSS', false)
     .option('--sourcemap', 'generate source maps', false);
 
@@ -41,8 +41,7 @@ export function cli(args) {
   program
     .command('init')
     .description('Initialize ApexCSS configuration in your project')
-    .option('-f, --framework <name>', 'specify framework (react, vue, angular, svelte, astro, next, nuxt, vanilla, astro)')
-    .option('--no-interactive', 'skip interactive prompts')
+    .option('-f, --framework <name>', 'specify framework (react, vue, angular, svelte, astro, next, nuxt, vanilla)')
     .option('--no-import', 'skip adding imports to entry files')
     .action(async (options) => {
       try {
@@ -50,7 +49,6 @@ export function cli(args) {
           configPath: program.opts().config,
           outputDir: program.opts().output,
           framework: options.framework,
-          interactive: options.interactive,
           addImport: options.import
         });
       } catch (error) {

package/cli/utils/framework-detector.js

@@ -13,10 +13,11 @@ export const FRAMEWORKS = {
   next: {
     name: 'Next.js',
     detect: (pkg) => pkg.dependencies?.next || pkg.devDependencies?.next,
-    entryFiles: ['src/app/layout.tsx', 'src/app/layout.jsx', 'app/layout.tsx', 'app/layout.jsx'],
-    importStatement: 'import \'apexcss\';\n',
-    cssConfig: '// Import in layout.tsx:\nimport \'apexcss/base\';\nimport \'apexcss/utilities\';\nimport \'apexcss/themes\';\n',
-    configFile: 'next.config.js'
+    entryFiles: ['src/app/globals.css', 'app/globals.css', 'src/styles/globals.css', 'styles/globals.css'],
+    importStatement: '@import \'apexcss\';\n',
+    cssConfig: '// Add to globals.css:\n@import \'apexcss/base\';\n@import \'apexcss/utilities\';\n@import \'apexcss/themes\';\n',
+    configFile: 'next.config.js',
+    fallbackFile: 'src/app/globals.css'
   },
   nuxt: {
     name: 'Nuxt',
@@ -44,7 +45,8 @@ export const FRAMEWORKS = {
     detect: (pkg) => pkg.dependencies?.['@angular/core'],
     entryFiles: ['src/styles.css', 'src/styles.scss', 'angular.json'],
     importStatement: '@import \'apexcss\';\n',
-    configFile: 'angular.json'
+    configFile: 'angular.json',
+    fallbackFile: 'src/styles.css'
   },
   svelte: {
     name: 'Svelte',
@@ -149,23 +151,14 @@ export function getAvailableFrameworks() {
 }
 
 /**
- * Get framework-specific output directory recommendation
- * @param {string} frameworkId - Framework identifier
+ * Get the default output directory for CSS builds
+ * @param {string} [_frameworkId] - Framework identifier (unused - kept for API compatibility)
  * @returns {string} - Recommended output directory
  */
-export function getRecommendedOutputDir(frameworkId) {
-  const recommendations = {
-    next: './dist/',
-    nuxt: './dist/',
-    react: './dist/',
-    vue: './dist/',
-    angular: './dist/',
-    svelte: './dist/',
-    astro: './dist/',
-    vanilla: './dist/'
-  };
-
-  return recommendations[frameworkId] || './dist/';
+export function getRecommendedOutputDir(_frameworkId) {
+  // All frameworks output to node_modules/apexcss/dist by default
+  // This aligns with where the CSS source files reside (node_modules/apexcss/src)
+  return 'node_modules/apexcss/dist';
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexcss-cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "ApexCSS CLI - Build and customize your CSS framework",
   "type": "module",
   "main": "cli/index.js",
@@ -62,7 +62,7 @@
     "inquirer": "^9.2.0"
   },
   "peerDependencies": {
-    "apexcss": ">=0.3.0",
+    "apexcss": "^0.4.1",
     "sass": ">=1.90.0",
     "vite": ">=7.0.0"
   },