upskill-event-manager/fix-css-cleanup.js

#!/usr/bin/env node

/**
 * CSS Cleanup Script - Fix malformed vendor prefixes and syntax errors
 * 
 * This script cleans up issues caused by the automated vendor prefix script
 */

const fs = require('fs');
const path = require('path');

const CSS_DIR = './assets/css';
const cleanupRules = [];

function cleanupCSSFile(filePath) {
    try {
        let content = fs.readFileSync(filePath, 'utf8');
        let modifications = 0;
        const fileName = path.basename(filePath);
        
        console.log(`\nCleaning: ${fileName}`);
        
        const originalSize = content.length;
        
        // Fix 1: Remove duplicate webkit prefixes
        const webkitDuplicates = content.match(/-webkit--webkit-/g);
        if (webkitDuplicates) {
            content = content.replace(/-webkit--webkit(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?(-webkit)?/g, '-webkit-');
            console.log(`  ✓ Fixed ${webkitDuplicates.length} duplicate webkit prefixes`);
            modifications++;
        }
        
        // Fix 2: Remove double semicolons
        const doubleSemicolons = content.match(/;;/g);
        if (doubleSemicolons) {
            content = content.replace(/;;+/g, ';');
            console.log(`  ✓ Fixed ${doubleSemicolons.length} double semicolons`);
            modifications++;
        }
        
        // Fix 3: Fix malformed border-radius declarations
        const malformedBorderRadius = content.match(/border-radius:\s*[^;]*;\s*border-radius:\s*[^;]*;\s*border-radius:/g);
        if (malformedBorderRadius) {
            // Find and fix multi-line border-radius duplicates
            content = content.replace(/(-webkit-)?border-radius:\s*([^;]+);\s*(\n\s*border-radius:\s*[^;]+;\s*)+/g, (match, webkit, value) => {
                return webkit ? `-webkit-border-radius: ${value};\n    border-radius: ${value};` : `border-radius: ${value};`;
            });
            console.log(`  ✓ Fixed malformed border-radius declarations`);
            modifications++;
        }
        
        // Fix 4: Remove excessive duplicate properties
        content = content.replace(/(\s*([a-z-]+):\s*([^;]+);)\s*(\n\s*\2:\s*\3;\s*)+/g, '$1');
        
        // Fix 5: Clean up malformed transform properties
        content = content.replace(/transform:\s*([^;]+);\s*transform:\s*([^;]+);\s*transform:\s*([^;]+);/g, 
            '-webkit-transform: $1;\n    -ms-transform: $1;\n    transform: $1;');
        
        // Fix 6: Clean up malformed transition properties  
        content = content.replace(/transition:\s*([^;]+);\s*transition:\s*([^;]+);/g,
            '-webkit-transition: $1;\n    transition: $1;');
        
        // Fix 7: Fix malformed box-shadow properties
        content = content.replace(/box-shadow:\s*([^;]+);\s*box-shadow:\s*([^;]+);\s*box-shadow:\s*([^;]+);/g,
            '-webkit-box-shadow: $1;\n    box-shadow: $1;');
        
        // Fix 8: Remove any remaining triple prefixes
        content = content.replace(/-webkit--webkit--webkit-/g, '-webkit-');
        content = content.replace(/-ms--ms-/g, '-ms-');
        content = content.replace(/-moz--moz-/g, '-moz-');
        
        // Fix 9: Clean up transform uppercase issues
        content = content.replace(/text--webkit-transform:\s*uppercase;\s*-ms-transform:\s*uppercase;\s*transform:\s*uppercase;/g, 'text-transform: uppercase;');
        
        // Fix 10: Remove empty lines and normalize spacing
        content = content.replace(/\n\s*\n\s*\n/g, '\n\n');
        
        const newSize = content.length;
        const sizeReduction = originalSize - newSize;
        
        if (modifications > 0 || sizeReduction > 100) {
            fs.writeFileSync(filePath, content, 'utf8');
            console.log(`  ✅ Cleaned ${modifications} issues, reduced size by ${sizeReduction} chars`);
            
            cleanupRules.push({
                file: fileName,
                modifications: modifications,
                sizeReduction: sizeReduction
            });
            
            return modifications;
        } else {
            console.log('  • No issues found');
            return 0;
        }
        
    } catch (error) {
        console.error(`Error cleaning ${filePath}:`, error.message);
        return 0;
    }
}

function validateCSSFile(filePath) {
    try {
        const content = fs.readFileSync(filePath, 'utf8');
        const fileName = path.basename(filePath);
        
        console.log(`\nValidating: ${fileName}`);
        
        const issues = [];
        
        // Check for remaining syntax issues
        if (content.includes(';;')) issues.push('Double semicolons found');
        if (content.includes('-webkit--webkit-')) issues.push('Duplicate webkit prefixes found');
        if (content.match(/border-radius:\s*[^;]*;\s*border-radius:\s*[^;]*;\s*border-radius:/)) issues.push('Malformed border-radius');
        if (content.includes('transform: uppercase')) issues.push('Malformed transform property');
        
        // Check for valid CSS structure
        const openBraces = (content.match(/\{/g) || []).length;
        const closeBraces = (content.match(/\}/g) || []).length;
        if (openBraces !== closeBraces) issues.push('Mismatched braces');
        
        if (issues.length === 0) {
            console.log('  ✅ CSS validates successfully');
            return true;
        } else {
            console.log(`  ❌ Issues found: ${issues.join(', ')}`);
            return false;
        }
        
    } catch (error) {
        console.error(`Error validating ${filePath}:`, error.message);
        return false;
    }
}

function main() {
    console.log('HVAC Community Events - CSS Cleanup');
    console.log('='.repeat(50));
    
    if (!fs.existsSync(CSS_DIR)) {
        console.error(`CSS directory not found: ${CSS_DIR}`);
        process.exit(1);
    }
    
    // Focus on HVAC CSS files that were modified
    const targetFiles = [
        'hvac-common.css',
        'hvac-dashboard.css', 
        'hvac-registration.css',
        'hvac-event-summary.css',
        'hvac-email-attendees.css',
        'hvac-mobile-nav.css',
        'hvac-animations.css',
        'hvac-certificates.css',
        'hvac-attendee-profile.css',
        'hvac-print.css'
    ].map(file => path.join(CSS_DIR, file));
    
    // Filter to only existing files
    const existingFiles = targetFiles.filter(filePath => fs.existsSync(filePath));
    
    let totalModifications = 0;
    
    // Cleanup phase
    console.log('\n🧹 CLEANUP PHASE');
    console.log('-'.repeat(30));
    existingFiles.forEach(filePath => {
        totalModifications += cleanupCSSFile(filePath);
    });
    
    // Validation phase
    console.log('\n✅ VALIDATION PHASE');
    console.log('-'.repeat(30));
    let validFiles = 0;
    existingFiles.forEach(filePath => {
        if (validateCSSFile(filePath)) {
            validFiles++;
        }
    });
    
    // Summary
    console.log('\n' + '='.repeat(50));
    console.log('CLEANUP SUMMARY');
    console.log('='.repeat(50));
    
    if (cleanupRules.length > 0) {
        cleanupRules.forEach(rule => {
            console.log(`${rule.file}: ${rule.modifications} fixes, ${rule.sizeReduction} chars reduced`);
        });
    }
    
    console.log(`\nTotal files processed: ${existingFiles.length}`);
    console.log(`Total files cleaned: ${cleanupRules.length}`);
    console.log(`Total files validated: ${validFiles}/${existingFiles.length}`);
    
    if (validFiles === existingFiles.length) {
        console.log('\n✅ All CSS files are now clean and valid!');
    } else {
        console.log('\n⚠️  Some CSS files still have issues - manual review needed');
    }
}

if (require.main === module) {
    main();
}

module.exports = { cleanupCSSFile, validateCSSFile };