apexcss-cli 0.1.0

package/cli/utils/framework-detector.js

@@ -0,0 +1,189 @@
+/**
+ * Framework detection utility
+ * Detects which framework the user's project is using
+ */
+
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+/**
+ * Framework definitions with their detection criteria
+ */
+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'
+  },
+  nuxt: {
+    name: 'Nuxt',
+    detect: (pkg) => pkg.dependencies?.nuxt || pkg.devDependencies?.nuxt,
+    entryFiles: ['nuxt.config.ts', 'nuxt.config.js'],
+    cssConfig: 'css: [\'~/apexcss/apex.css\']',
+    importStatement: null // Nuxt uses CSS config in nuxt.config
+  },
+  react: {
+    name: 'React',
+    detect: (pkg) => pkg.dependencies?.react && !pkg.dependencies?.next,
+    entryFiles: ['src/index.css', 'src/main.css', 'src/styles.css'],
+    importStatement: '@import \'apexcss\';\n',
+    fallbackFile: 'src/index.css'
+  },
+  vue: {
+    name: 'Vue',
+    detect: (pkg) => pkg.dependencies?.vue && !pkg.dependencies?.nuxt,
+    entryFiles: ['src/style.css', 'src/styles.css', 'src/main.css'],
+    importStatement: '@import \'apexcss\';\n',
+    fallbackFile: 'src/style.css'
+  },
+  angular: {
+    name: 'Angular',
+    detect: (pkg) => pkg.dependencies?.['@angular/core'],
+    entryFiles: ['src/styles.css', 'src/styles.scss', 'angular.json'],
+    importStatement: '@import \'apexcss\';\n',
+    configFile: 'angular.json'
+  },
+  svelte: {
+    name: 'Svelte',
+    detect: (pkg) => pkg.dependencies?.svelte || pkg.devDependencies?.svelte,
+    entryFiles: ['src/app.css', 'src/style.css', 'src/styles.css'],
+    importStatement: '@import \'apexcss\';\n',
+    fallbackFile: 'src/app.css'
+  },
+  astro: {
+    name: 'Astro',
+    detect: (pkg) => pkg.dependencies?.astro || pkg.devDependencies?.astro,
+    entryFiles: ['src/styles/global.css', 'src/style.css', 'src/layouts/Layout.astro'],
+    importStatement: '@import \'apexcss\';\n',
+    fallbackFile: 'src/styles/global.css'
+  },
+  vanilla: {
+    name: 'Vanilla/Vite',
+    detect: () => true, // Fallback
+    entryFiles: ['src/style.css', 'src/styles.css', 'style.css', 'styles.css'],
+    importStatement: '@import \'apexcss\';\n',
+    fallbackFile: 'src/style.css'
+  }
+};
+
+/**
+ * Detect the framework being used in the current project
+ * @param {string} cwd - Current working directory
+ * @returns {object} - Detected framework info
+ */
+export function detectFramework(cwd = process.cwd()) {
+  // Read package.json
+  const packageJsonPath = resolve(cwd, 'package.json');
+
+  if (!existsSync(packageJsonPath)) {
+    return {
+      id: 'vanilla',
+      ...FRAMEWORKS.vanilla,
+      detected: false,
+      hasPackageJson: false
+    };
+  }
+
+  let pkg;
+  try {
+    pkg = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+  } catch {
+    return {
+      id: 'vanilla',
+      ...FRAMEWORKS.vanilla,
+      detected: false,
+      hasPackageJson: true,
+      parseError: true
+    };
+  }
+
+  // Check each framework in order (more specific first)
+  const frameworkOrder = ['next', 'nuxt', 'angular', 'svelte', 'astro', 'react', 'vue', 'vanilla'];
+
+  for (const frameworkId of frameworkOrder) {
+    const framework = FRAMEWORKS[frameworkId];
+    if (framework.detect(pkg)) {
+      // Find the actual entry file that exists
+      const existingEntry = framework.entryFiles.find(file =>
+        existsSync(resolve(cwd, file))
+      );
+
+      return {
+        id: frameworkId,
+        ...framework,
+        detected: frameworkId !== 'vanilla',
+        hasPackageJson: true,
+        entryFile: existingEntry || framework.fallbackFile,
+        packageJson: pkg
+      };
+    }
+  }
+
+  // Should not reach here due to vanilla fallback
+  return {
+    id: 'vanilla',
+    ...FRAMEWORKS.vanilla,
+    detected: false,
+    hasPackageJson: true
+  };
+}
+
+/**
+ * Get all available frameworks for selection
+ * @returns {Array} - List of framework options
+ */
+export function getAvailableFrameworks() {
+  return [
+    { id: 'next', name: 'Next.js' },
+    { id: 'nuxt', name: 'Nuxt' },
+    { id: 'react', name: 'React (Vite)' },
+    { id: 'vue', name: 'Vue (Vite)' },
+    { id: 'angular', name: 'Angular' },
+    { id: 'svelte', name: 'Svelte (Vite)' },
+    { id: 'astro', name: 'Astro' },
+    { id: 'vanilla', name: 'Vanilla/Vite' }
+  ];
+}
+
+/**
+ * Get framework-specific output directory recommendation
+ * @param {string} frameworkId - Framework identifier
+ * @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/';
+}
+
+/**
+ * Check if a framework uses a specific configuration approach
+ * @param {string} frameworkId - Framework identifier
+ * @returns {object} - Configuration approach
+ */
+export function getFrameworkConfigApproach(frameworkId) {
+  const approaches = {
+    next: { type: 'import', supportsCSSImport: true },
+    nuxt: { type: 'config', configKey: 'css' },
+    react: { type: 'import', supportsCSSImport: true },
+    vue: { type: 'import', supportsCSSImport: true },
+    angular: { type: 'styles', supportsGlobalStyles: true },
+    svelte: { type: 'import', supportsCSSImport: true },
+    astro: { type: 'import', supportsCSSImport: true },
+    vanilla: { type: 'import', supportsCSSImport: true }
+  };
+
+  return approaches[frameworkId] || { type: 'import' };
+}

package/cli/utils/logger.js

@@ -0,0 +1,121 @@
+/**
+ * Logger utility for consistent CLI output
+ */
+
+// Simple ANSI color codes
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m'
+};
+
+/**
+ * Format a message with color
+ * @param {string} text
+ * @param {string} color
+ * @returns {string}
+ */
+/**
+ * Format a message with color
+ * @param {string} text - Text to colorize
+ * @param {string} color - Color name
+ * @returns {string} - Colorized text
+ */
+function colorize(text, color) {
+  return `${colors[color]}${text}${colors.reset}`;
+}
+
+export const logger = {
+  /**
+   * Info message
+   * @param {string} message
+   */
+  info(message) {
+    console.log(`${colorize('[apexcss]', 'cyan')} ${message}`);
+  },
+
+  /**
+   * Success message
+   * @param {string} message
+   */
+  success(message) {
+    console.log(`${colorize('[apexcss]', 'green')} ${colorize('✔', 'green')} ${message}`);
+  },
+
+  /**
+   * Warning message
+   * @param {string} message
+   */
+  warn(message) {
+    console.warn(`${colorize('[apexcss]', 'yellow')} ${colorize('⚠', 'yellow')} ${message}`);
+  },
+
+  /**
+   * Error message
+   * @param {string} message
+   */
+  error(message) {
+    console.error(`${colorize('[apexcss]', 'red')} ${colorize('✖', 'red')} ${message}`);
+  },
+
+  /**
+   * Debug message (only shown with DEBUG env var)
+   * @param {string} message
+   */
+  debug(message) {
+    if (process.env.DEBUG) {
+      console.log(`${colorize('[apexcss]', 'dim')} ${colorize('[debug]', 'magenta')} ${message}`);
+    }
+  },
+
+  /**
+   * New line
+   */
+  newline() {
+    console.log();
+  },
+
+  /**
+   * Section header
+   * @param {string} title
+   */
+  header(title) {
+    this.newline();
+    console.log(colorize(title, 'bright'));
+    console.log(colorize('═'.repeat(title.length), 'dim'));
+  },
+
+  /**
+   * List items
+   * @param {string[]} items
+   */
+  list(items) {
+    items.forEach(item => {
+      console.log(`  ${colorize('•', 'cyan')} ${item}`);
+    });
+  },
+
+  /**
+   * Format file path
+   * @param {string} filepath
+   * @returns {string}
+   */
+  path(filepath) {
+    return colorize(filepath, 'cyan');
+  },
+
+  /**
+   * Format command
+   * @param {string} command
+   * @returns {string}
+   */
+  cmd(command) {
+    return colorize(command, 'yellow');
+  }
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "apexcss-cli",
+  "version": "0.1.0",
+  "description": "ApexCSS CLI - Build and customize your CSS framework",
+  "type": "module",
+  "main": "cli/index.js",
+  "types": "./package.json",
+  "files": [
+    "bin/",
+    "cli/",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bin": {
+    "apexcss": "bin/apexcss.js"
+  },
+  "scripts": {
+    "test": "node tests/run-tests.js",
+    "test:unit": "node --test tests/unit/**/*.test.js",
+    "test:watch": "node --test --watch tests/unit/**/*.test.js",
+    "test:coverage": "c8 node tests/run-tests.js",
+    "test:coverage:text": "c8 --reporter=text --reporter=text-summary node tests/run-tests.js",
+    "test:coverage:html": "c8 --reporter=html node tests/run-tests.js",
+    "lint": "eslint cli/ bin/ tests/",
+    "lint:fix": "eslint cli/ bin/ tests/ --fix",
+    "doctor": "node bin/apexcss.js doctor",
+    "version": "node bin/apexcss.js --version",
+    "prepublishOnly": "echo \"Preparing for publish...\""
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "cli",
+    "apexcss",
+    "utility-first",
+    "sass",
+    "scss",
+    "build-tool"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chris-briddock/apex-cli.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "c8": "^10.1.3",
+    "eslint": "^9.16.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
+    "globals": "^15.14.0"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0"
+  },
+  "optionalDependencies": {
+    "chokidar": "^3.6.0",
+    "inquirer": "^9.2.0"
+  },
+  "peerDependencies": {
+    "apexcss": ">=0.3.0",
+    "sass": ">=1.90.0",
+    "vite": ">=7.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}