@jmruthers/pace-core 0.6.6 → 0.6.8

package/audit-tool/audits/05-styling.cjs

@@ -0,0 +1,224 @@
+/**
+ * Standard 5: Styling Audit
+ * @package @jmruthers/pace-core
+ * @module Audit/Standard5
+ * 
+ * Audits consuming apps for compliance with Standard 5: Styling.
+ * Validates CSS configuration, Tailwind v4 setup, and app.css structure.
+ * 
+ * Reference: packages/core/docs/standards/5-styling-standards.md
+ */
+
+const path = require('path');
+const fs = require('fs');
+const { readFileSafe, getRelativePath, findConfigFiles } = require('../utils/file-utils.cjs');
+
+/**
+ * Check app.css structure and required imports
+ */
+function checkAppCssStructure(consumingAppPath) {
+  const issues = [];
+  
+  // Find app.css
+  const appCssFiles = [
+    path.join(consumingAppPath, 'src', 'app.css'),
+    path.join(consumingAppPath, 'app.css'),
+  ];
+  
+  let appCssFile = null;
+  for (const file of appCssFiles) {
+    if (fs.existsSync(file)) {
+      appCssFile = file;
+      break;
+    }
+  }
+  
+  if (!appCssFile) {
+    issues.push({
+      type: 'appCss',
+      file: 'src/app.css (not found)',
+      line: 0,
+      message: 'app.css file not found. Required for pace-core styling.',
+      severity: 'error',
+      fix: 'Create src/app.css with required imports and @source directives',
+    });
+    return issues;
+  }
+  
+  const content = readFileSafe(appCssFile);
+  if (!content) {
+    return issues;
+  }
+  
+  const relativePath = getRelativePath(appCssFile, consumingAppPath);
+  
+  // Check for required imports
+  const requiredImports = [
+    { pattern: /@import\s+['"]tailwindcss['"]/, name: '@import "tailwindcss"', required: true },
+    { pattern: /@import\s+['"]@jmruthers\/pace-core\/styles\/core\.css['"]/, name: '@import "@jmruthers/pace-core/styles/core.css"', required: true },
+  ];
+  
+  requiredImports.forEach(({ pattern, name, required }) => {
+    if (!pattern.test(content)) {
+      issues.push({
+        type: 'appCss',
+        file: relativePath,
+        line: 1,
+        message: `Missing required import: ${name}`,
+        severity: required ? 'error' : 'warning',
+        fix: `Add ${name}; to app.css`,
+      });
+    }
+  });
+  
+  // Check for @source directives (Tailwind v4)
+  const hasSourceDirective = /@source\s+/.test(content);
+  if (!hasSourceDirective) {
+    issues.push({
+      type: 'appCss',
+      file: relativePath,
+      line: 1,
+      message: 'Missing @source directives for Tailwind v4 content scanning',
+      severity: 'error',
+      fix: 'Add @source directives: @source "./**/*.{js,ts,jsx,tsx}"; @source "../node_modules/@jmruthers/pace-core/src/**/*.{js,ts,jsx,tsx}";',
+    });
+  } else {
+    // Check for correct @source paths (relative to CSS file location)
+    const sourcePattern = /@source\s+['"]([^'"]+)['"]/g;
+    let match;
+    const foundSources = [];
+    
+    while ((match = sourcePattern.exec(content)) !== null) {
+      foundSources.push(match[1]);
+    }
+    
+    // Check if app source files are included
+    const hasAppSource = foundSources.some(src => src.includes('./**/*.') || src.includes('../src/**/*.'));
+    if (!hasAppSource) {
+      issues.push({
+        type: 'appCss',
+        file: relativePath,
+        line: 1,
+        message: '@source directive missing for app source files',
+        severity: 'error',
+        fix: 'Add: @source "./**/*.{js,ts,jsx,tsx}"; (if app.css is in src/)',
+      });
+    }
+    
+    // Check if pace-core source files are included
+    const hasPaceCoreSource = foundSources.some(src => src.includes('@jmruthers/pace-core') || src.includes('pace-core/src'));
+    if (!hasPaceCoreSource) {
+      issues.push({
+        type: 'appCss',
+        file: relativePath,
+        line: 1,
+        message: '@source directive missing for pace-core source files',
+        severity: 'error',
+        fix: 'Add: @source "../node_modules/@jmruthers/pace-core/src/**/*.{js,ts,jsx,tsx}"; (if app.css is in src/)',
+      });
+    }
+  }
+  
+  // Check for @theme block (required for color palettes)
+  const hasThemeBlock = /@theme\s+(static|inline)?\s*\{/.test(content);
+  if (!hasThemeBlock) {
+    issues.push({
+      type: 'appCss',
+      file: relativePath,
+      line: 1,
+      message: 'Missing @theme block for color palettes. Required for pace-core styling.',
+      severity: 'error',
+      fix: 'Add @theme static { /* color palettes here */ } block to app.css',
+    });
+  } else {
+    // Check for required color palettes (main, sec, acc)
+    const themeContent = content.match(/@theme\s+(?:static|inline)?\s*\{([^}]+)\}/);
+    if (themeContent) {
+      const hasMain = /--color-main-/.test(themeContent[1]);
+      const hasSec = /--color-sec-/.test(themeContent[1]);
+      const hasAcc = /--color-acc-/.test(themeContent[1]);
+      
+      if (!hasMain || !hasSec || !hasAcc) {
+        const missing = [];
+        if (!hasMain) missing.push('main');
+        if (!hasSec) missing.push('sec');
+        if (!hasAcc) missing.push('acc');
+        
+        issues.push({
+          type: 'appCss',
+          file: relativePath,
+          line: 1,
+          message: `Missing required color palettes in @theme block: ${missing.join(', ')}`,
+          severity: 'error',
+          fix: `Add ${missing.join(', ')} color palettes to @theme block (all shades 50-950)`,
+        });
+      }
+    }
+  }
+  
+  return issues;
+}
+
+/**
+ * Check Tailwind v4 configuration in vite.config.ts
+ */
+function checkTailwindV4Config(consumingAppPath) {
+  const issues = [];
+  
+  const viteConfigFiles = findConfigFiles(consumingAppPath, ['vite.config.ts', 'vite.config.js']);
+  const viteConfigPath = viteConfigFiles['vite.config.ts'] || viteConfigFiles['vite.config.js'];
+  
+  if (!viteConfigPath) {
+    return issues; // No vite config, skip
+  }
+  
+  const content = readFileSafe(viteConfigPath);
+  if (!content) {
+    return issues;
+  }
+  
+  const relativePath = getRelativePath(viteConfigPath, consumingAppPath);
+  
+  // Check for @tailwindcss/vite plugin
+  const hasTailwindPlugin = /@tailwindcss\/vite|tailwindcss\(\)|from\s+['"]@tailwindcss\/vite['"]/.test(content);
+  if (!hasTailwindPlugin) {
+    issues.push({
+      type: 'tailwindConfig',
+      file: relativePath,
+      line: 1,
+      message: 'Tailwind v4 plugin not found in vite.config.ts. Required for Tailwind v4.',
+      severity: 'error',
+      fix: 'Add: import tailwindcss from "@tailwindcss/vite"; and add tailwindcss() to plugins array',
+    });
+  }
+  
+  return issues;
+}
+
+/**
+ * Run audit for Standard 5: Styling
+ * @param {string} consumingAppPath - Path to consuming app
+ * @returns {object} - Audit results with issues array
+ */
+function runStandard5Audit(consumingAppPath) {
+  const issues = [];
+  
+  try {
+    issues.push(...checkAppCssStructure(consumingAppPath));
+    issues.push(...checkTailwindV4Config(consumingAppPath));
+  } catch (error) {
+    return {
+      standard: '05-styling',
+      issues: [],
+      error: error.message,
+    };
+  }
+  
+  return {
+    standard: '05-styling',
+    issues,
+    error: null,
+  };
+}
+
+module.exports = { runStandard5Audit };