@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.0

package/dist/plugins/css-purge-optimizer.js

@@ -0,0 +1,414 @@
+/**
+ * CSS Purge Optimizer Plugin
+ * Implements Phase 3 Performance Optimization: CSS Bundle Optimization
+ *
+ * Optimizations:
+ * - Removes unused responsive breakpoint styles
+ * - Purges unused CSS custom properties
+ * - Optimizes CSS layer ordering
+ * - Minifies and compresses output
+ */
+import postcss from 'postcss';
+const DEFAULT_CONFIG = {
+    breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+    preserveCustomProperties: [
+        // Core design system variables
+        '--cs-*',
+        '--tw-*', // Preserve all Tailwind CSS variables
+        // Component design tokens (critical for responsive system)
+        '--button-*',
+        '--badge-*',
+        '--card-*',
+        '--input-*',
+        '--label-*',
+        '--checkbox-*',
+        '--menu-*',
+        '--sidebar-*',
+        '--breadcrumb-*',
+        '--pagination-*',
+        '--stepper-*',
+        '--tabs-*',
+        '--progressive-nav-*',
+        '--skeleton-*',
+        '--toast-*',
+        '--popover-*',
+        '--tooltip-*',
+        '--enterprise-*',
+        '--font-*',
+        '--user-menu-*',
+        '--subscription-*',
+        '--list-*',
+        '--tree-*',
+        // Layout and utility tokens
+        '--container-*',
+        '--grid-*',
+        '--spacing-*',
+        '--breakpoint-*'
+    ],
+    preserveSelectors: [
+        '.sr-only',
+        '.focus\\:*',
+        '.hover\\:*',
+        '.active\\:*',
+        '[data-*]'
+    ],
+    aggressive: false,
+    minify: true
+};
+export default function cssPurgeOptimizer(config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    return {
+        name: 'css-purge-optimizer',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+            // Find CSS assets in bundle
+            const cssAssets = Object.keys(bundle).filter(key => key.endsWith('.css'));
+            cssAssets.forEach(assetKey => {
+                const asset = bundle[assetKey];
+                if (asset.type === 'asset' && typeof asset.source === 'string') {
+                    const optimizedCSS = optimizeCSS(asset.source, finalConfig);
+                    // Calculate optimization savings
+                    const originalSize = Buffer.byteLength(asset.source, 'utf8');
+                    const optimizedSize = Buffer.byteLength(optimizedCSS, 'utf8');
+                    const savings = originalSize - optimizedSize;
+                    const savingsPercent = Math.round((savings / originalSize) * 100);
+                    console.log(`🔧 CSS Optimization: ${assetKey}`);
+                    console.log(`   Original: ${Math.round(originalSize / 1024 * 100) / 100}KB`);
+                    console.log(`   Optimized: ${Math.round(optimizedSize / 1024 * 100) / 100}KB`);
+                    console.log(`   Savings: ${Math.round(savings / 1024 * 100) / 100}KB (${savingsPercent}%)`);
+                    // Update the asset with optimized CSS
+                    asset.source = optimizedCSS;
+                }
+            });
+        }
+    };
+}
+/**
+ * Main CSS optimization function
+ */
+function optimizeCSS(cssContent, config) {
+    let optimizedCSS = cssContent;
+    // Step 1: Analyze usage patterns
+    const usage = analyzeUsage(cssContent, config);
+    // Step 2: Remove unused responsive breakpoint styles
+    optimizedCSS = removeUnusedBreakpoints(optimizedCSS, usage, config);
+    // Step 3: Remove unused custom properties
+    optimizedCSS = removeUnusedCustomProperties(optimizedCSS, usage, config);
+    // Step 4: Optimize CSS layers and ordering
+    optimizedCSS = optimizeCSSLayers(optimizedCSS);
+    // Step 5: Remove duplicate rules
+    optimizedCSS = removeDuplicateRules(optimizedCSS);
+    // Step 6: Minify if enabled
+    if (config.minify) {
+        optimizedCSS = minifyCSS(optimizedCSS);
+    }
+    return optimizedCSS;
+}
+/**
+ * Analyzes CSS usage patterns using PostCSS
+ */
+function analyzeUsage(cssContent, config) {
+    const usage = {
+        usedBreakpoints: new Set(),
+        usedCustomProperties: new Set(),
+        usedSelectors: new Set(),
+        unusedRules: []
+    };
+    try {
+        const root = postcss.parse(cssContent);
+        // Walk through all nodes to analyze usage
+        root.walkAtRules('media', (rule) => {
+            // Analyze media query breakpoints
+            const mediaQuery = rule.params;
+            config.breakpoints.forEach((breakpoint) => {
+                const breakpointPixels = getBreakpointPixels(breakpoint);
+                // Check for pixel-based media queries
+                if (mediaQuery.includes(`${breakpointPixels}px`)) {
+                    usage.usedBreakpoints.add(breakpoint);
+                }
+                // Check for CSS variable usage
+                if (mediaQuery.includes(`--cs-breakpoints-${breakpoint}`)) {
+                    usage.usedBreakpoints.add(breakpoint);
+                }
+            });
+        });
+        // Analyze custom property declarations and usage
+        root.walkDecls((decl) => {
+            // Find custom property definitions
+            if (decl.prop.startsWith('--')) {
+                // Check if this property is used elsewhere in the CSS
+                const propertyUsage = cssContent.includes(`var(${decl.prop})`);
+                if (propertyUsage) {
+                    usage.usedCustomProperties.add(decl.prop);
+                }
+            }
+            // Find custom property usage in values
+            const varMatches = decl.value.match(/var\(--[^)]+\)/g);
+            if (varMatches) {
+                varMatches.forEach(match => {
+                    const propertyName = match.match(/--[^)]+/)?.[0];
+                    if (propertyName) {
+                        usage.usedCustomProperties.add(propertyName);
+                    }
+                });
+            }
+        });
+        // Analyze selectors
+        root.walkRules((rule) => {
+            const selectors = rule.selector.split(',');
+            selectors.forEach(selector => {
+                const trimmedSelector = selector.trim();
+                usage.usedSelectors.add(trimmedSelector);
+                // Extract class names
+                const classMatches = trimmedSelector.match(/\.[a-zA-Z0-9_-]+/g);
+                if (classMatches) {
+                    classMatches.forEach(className => {
+                        usage.usedSelectors.add(className);
+                    });
+                }
+            });
+        });
+        // For safety, always mark critical breakpoints as used
+        const criticalBreakpoints = ['xs', 'sm', 'md'];
+        criticalBreakpoints.forEach((bp) => usage.usedBreakpoints.add(bp));
+    }
+    catch (error) {
+        console.warn('PostCSS parsing failed in usage analysis, falling back to regex:', error);
+        // Fallback to basic regex analysis
+        return analyzeUsageFallback(cssContent, config);
+    }
+    return usage;
+}
+/**
+ * Fallback regex-based usage analysis
+ */
+function analyzeUsageFallback(cssContent, config) {
+    const usage = {
+        usedBreakpoints: new Set(),
+        usedCustomProperties: new Set(),
+        usedSelectors: new Set(),
+        unusedRules: []
+    };
+    // Analyze breakpoint usage in media queries
+    config.breakpoints.forEach((breakpoint) => {
+        const varPattern = new RegExp(`var\\(--cs-breakpoints-${breakpoint}\\)`, 'g');
+        const breakpointPixels = getBreakpointPixels(breakpoint);
+        const pixelPattern = new RegExp(`(min-width|max-width):\\s*${breakpointPixels}px`, 'g');
+        const literalPattern = new RegExp(`\\b${breakpoint}\\b`, 'g');
+        if (varPattern.test(cssContent) ||
+            pixelPattern.test(cssContent) ||
+            literalPattern.test(cssContent)) {
+            usage.usedBreakpoints.add(breakpoint);
+        }
+    });
+    // For safety, always mark critical breakpoints as used
+    const criticalBreakpoints = ['xs', 'sm', 'md'];
+    criticalBreakpoints.forEach((bp) => usage.usedBreakpoints.add(bp));
+    // Analyze custom property usage
+    const customPropertyMatches = cssContent.match(/var\(--[^)]+\)/g) || [];
+    customPropertyMatches.forEach(match => {
+        const propertyName = match.match(/--[^)]+/)?.[0];
+        if (propertyName) {
+            usage.usedCustomProperties.add(propertyName);
+        }
+    });
+    // Analyze selector usage
+    const selectorMatches = cssContent.match(/\.[a-zA-Z0-9_-]+/g) || [];
+    selectorMatches.forEach(selector => {
+        usage.usedSelectors.add(selector);
+    });
+    return usage;
+}
+/**
+ * Maps breakpoint names to their pixel values
+ */
+function getBreakpointPixels(breakpoint) {
+    const breakpointMap = {
+        xs: 0, // mobile-first, no min-width
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        '2xl': 1536,
+        '3xl': 1792
+    };
+    return breakpointMap[breakpoint] || 0;
+}
+/**
+ * Removes unused responsive breakpoint styles using PostCSS
+ */
+function removeUnusedBreakpoints(cssContent, usage, config) {
+    if (!config.aggressive) {
+        console.log(`   Skipping breakpoint removal (non-aggressive mode)`);
+        return cssContent;
+    }
+    try {
+        const root = postcss.parse(cssContent);
+        let removedCount = 0;
+        root.walkAtRules('media', (rule) => {
+            const mediaQuery = rule.params;
+            // Check if this media query uses an unused breakpoint
+            const usesUnusedBreakpoint = config.breakpoints.some(breakpoint => {
+                // Skip critical breakpoints
+                if (['xs', 'sm', 'md'].includes(breakpoint)) {
+                    return false;
+                }
+                // Check if breakpoint is unused and referenced in this media query
+                if (!usage.usedBreakpoints.has(breakpoint)) {
+                    const breakpointPixels = getBreakpointPixels(breakpoint);
+                    return mediaQuery.includes(`${breakpointPixels}px`) ||
+                        mediaQuery.includes(`--cs-breakpoints-${breakpoint}`);
+                }
+                return false;
+            });
+            if (usesUnusedBreakpoint) {
+                console.log(`   Removed unused breakpoint media query: ${mediaQuery}`);
+                rule.remove();
+                removedCount++;
+            }
+        });
+        return root.toString();
+    }
+    catch (error) {
+        console.warn('PostCSS parsing failed in breakpoint removal, using original CSS:', error);
+        return cssContent;
+    }
+}
+/**
+ * Removes unused CSS custom properties using PostCSS
+ */
+function removeUnusedCustomProperties(cssContent, usage, config) {
+    try {
+        const root = postcss.parse(cssContent);
+        let removedCount = 0;
+        root.walkDecls((decl) => {
+            // Only process custom property declarations
+            if (decl.prop.startsWith('--')) {
+                // Check if property should be preserved (check this first for Tailwind variables)
+                const shouldPreserve = config.preserveCustomProperties.some(pattern => {
+                    const regex = new RegExp(pattern.replace('*', '.*'));
+                    return regex.test(decl.prop);
+                });
+                // Always preserve whitelisted properties (like --tw-*), otherwise check usage
+                if (!shouldPreserve && !usage.usedCustomProperties.has(decl.prop)) {
+                    console.log(`   Removed unused custom property: ${decl.prop}`);
+                    decl.remove();
+                    removedCount++;
+                }
+            }
+        });
+        return root.toString();
+    }
+    catch (error) {
+        console.warn('PostCSS parsing failed in custom property removal, using original CSS:', error);
+        return cssContent;
+    }
+}
+/**
+ * Optimizes CSS layer ordering using PostCSS
+ */
+function optimizeCSSLayers(cssContent) {
+    try {
+        const root = postcss.parse(cssContent);
+        const layerOrder = ['reset', 'base', 'themes', 'components', 'utilities'];
+        let hasLayers = false;
+        // Remove existing @layer declarations
+        root.walkAtRules('layer', (rule) => {
+            if (!rule.nodes || rule.nodes.length === 0) {
+                // This is a layer order declaration, not a layer block
+                hasLayers = true;
+                rule.remove();
+            }
+        });
+        // Add optimized layer order at the beginning if we found layers
+        if (hasLayers) {
+            const layerDeclaration = postcss.atRule({
+                name: 'layer',
+                params: layerOrder.join(', ')
+            });
+            root.prepend(layerDeclaration);
+            root.prepend(postcss.comment({ text: ' Optimized CSS layer order ' }));
+        }
+        return root.toString();
+    }
+    catch (error) {
+        console.warn('PostCSS parsing failed in layer optimization, using original CSS:', error);
+        return cssContent;
+    }
+}
+/**
+ * Removes duplicate CSS rules using PostCSS
+ */
+function removeDuplicateRules(cssContent) {
+    try {
+        const root = postcss.parse(cssContent);
+        const ruleMap = new Map();
+        let removedCount = 0;
+        root.walkRules((rule) => {
+            const selector = rule.selector;
+            const declarations = rule.nodes?.map(node => {
+                if (node.type === 'decl') {
+                    return `${node.prop}: ${node.value}`;
+                }
+                return '';
+            }).filter(Boolean).sort().join('; ');
+            const ruleKey = `${selector}|${declarations}`;
+            if (ruleMap.has(ruleKey)) {
+                console.log(`   Removed duplicate rule: ${selector}`);
+                rule.remove();
+                removedCount++;
+            }
+            else {
+                ruleMap.set(ruleKey, selector);
+            }
+        });
+        return root.toString();
+    }
+    catch (error) {
+        console.warn('PostCSS parsing failed in duplicate rule removal, using original CSS:', error);
+        return cssContent;
+    }
+}
+/**
+ * Basic CSS minification
+ */
+function minifyCSS(cssContent) {
+    return cssContent
+        // Remove comments
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        // Remove unnecessary whitespace
+        .replace(/\s+/g, ' ')
+        // Remove whitespace around braces and semicolons
+        .replace(/\s*{\s*/g, '{')
+        .replace(/\s*}\s*/g, '}')
+        .replace(/\s*;\s*/g, ';')
+        .replace(/\s*:\s*/g, ':')
+        .replace(/\s*,\s*/g, ',')
+        // Remove trailing semicolons
+        .replace(/;}/g, '}')
+        // Remove leading/trailing whitespace
+        .trim();
+}
+/**
+ * Generates optimization report
+ */
+export function generateOptimizationReport(originalCSS, optimizedCSS) {
+    const originalSize = Buffer.byteLength(originalCSS, 'utf8');
+    const optimizedSize = Buffer.byteLength(optimizedCSS, 'utf8');
+    const savings = originalSize - optimizedSize;
+    const savingsPercent = Math.round((savings / originalSize) * 100);
+    return `
+CSS Optimization Report
+======================
+Original Size: ${Math.round(originalSize / 1024 * 100) / 100}KB
+Optimized Size: ${Math.round(optimizedSize / 1024 * 100) / 100}KB
+Savings: ${Math.round(savings / 1024 * 100) / 100}KB (${savingsPercent}%)
+
+Optimizations Applied:
+- Removed unused responsive breakpoint styles
+- Purged unused CSS custom properties
+- Optimized CSS layer ordering
+- Removed duplicate rules
+- Applied minification
+`;
+}

package/dist/plugins/performance-monitor.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Performance Monitor Plugin
+ * Implements Phase 3 Performance Optimization: Bundle Size Monitoring
+ *
+ * Tracks:
+ * - CSS bundle sizes (critical vs progressive)
+ * - JavaScript bundle sizes
+ * - Performance metrics and alerts
+ * - Loading performance analysis
+ */
+import type { Plugin } from 'vite';
+interface PerformanceConfig {
+    thresholds: {
+        criticalCSS: number;
+        progressiveCSS: number;
+        totalCSS: number;
+        javascript: number;
+    };
+    reportPath: string;
+    enableAlerts: boolean;
+    baselinePath?: string;
+}
+export default function performanceMonitor(config?: Partial<PerformanceConfig>): Plugin;
+/**
+ * Creates performance comparison utility
+ */
+export declare function comparePerformance(currentReport: string, baselineReport?: string): void;
+export {};
+//# sourceMappingURL=performance-monitor.d.ts.map

package/dist/plugins/performance-monitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance-monitor.d.ts","sourceRoot":"","sources":["../../src/plugins/performance-monitor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,UAAU,iBAAiB;IAEzB,UAAU,EAAE;QACV,WAAW,EAAE,MAAM,CAAA;QACnB,cAAc,EAAE,MAAM,CAAA;QACtB,QAAQ,EAAE,MAAM,CAAA;QAChB,UAAU,EAAE,MAAM,CAAA;KACnB,CAAA;IAED,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAsCD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,MAAM,GAAE,OAAO,CAAC,iBAAiB,CAAM,GAAG,MAAM,CAwB1F;AAwKD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CA+BvF"}

package/dist/plugins/performance-monitor.esm.js

@@ -0,0 +1,221 @@
+/**
+ * Performance Monitor Plugin
+ * Implements Phase 3 Performance Optimization: Bundle Size Monitoring
+ *
+ * Tracks:
+ * - CSS bundle sizes (critical vs progressive)
+ * - JavaScript bundle sizes
+ * - Performance metrics and alerts
+ * - Loading performance analysis
+ */
+import fs from 'fs';
+import path from 'path';
+const DEFAULT_CONFIG = {
+    thresholds: {
+        criticalCSS: 50, // KB - Mobile-critical styles should be minimal
+        progressiveCSS: 150, // KB - Desktop enhancement styles
+        totalCSS: 200, // KB - Total CSS budget
+        javascript: 500 // KB - JS bundle threshold
+    },
+    reportPath: 'performance-report.json',
+    enableAlerts: true
+};
+export default function performanceMonitor(config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    const startTime = Date.now();
+    return {
+        name: 'performance-monitor',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+            const analysis = analyzeBundle(bundle, startTime, finalConfig);
+            // Write performance report
+            const reportPath = path.resolve(finalConfig.reportPath);
+            fs.writeFileSync(reportPath, JSON.stringify(analysis, null, 2));
+            // Console output
+            logPerformanceReport(analysis, finalConfig);
+            // Alerts
+            if (finalConfig.enableAlerts && analysis.alerts.length > 0) {
+                console.warn('\n⚠️  Performance Alerts:');
+                analysis.alerts.forEach(alert => console.warn(`   ${alert}`));
+            }
+        }
+    };
+}
+/**
+ * Analyzes bundle contents and generates performance report
+ */
+function analyzeBundle(bundle, startTime, config) {
+    const analysis = {
+        timestamp: new Date().toISOString(),
+        files: {},
+        totals: {
+            criticalCSS: 0,
+            progressiveCSS: 0,
+            totalCSS: 0,
+            javascript: 0,
+            assets: 0,
+            total: 0
+        },
+        performance: {
+            bundleTime: Date.now() - startTime,
+            compressionRatio: 0
+        },
+        alerts: []
+    };
+    // Analyze each file in the bundle
+    Object.entries(bundle).forEach(([fileName, asset]) => {
+        if (asset.type === 'asset' || asset.type === 'chunk') {
+            const size = getAssetSize(asset);
+            const type = getAssetType(fileName);
+            const category = getAssetCategory(fileName);
+            analysis.files[fileName] = {
+                size,
+                type,
+                category
+            };
+            // Update totals
+            if (type === 'css') {
+                if (category === 'critical') {
+                    analysis.totals.criticalCSS += size;
+                }
+                else if (category === 'progressive') {
+                    analysis.totals.progressiveCSS += size;
+                }
+                analysis.totals.totalCSS += size;
+            }
+            else if (type === 'js') {
+                analysis.totals.javascript += size;
+            }
+            else {
+                analysis.totals.assets += size;
+            }
+            analysis.totals.total += size;
+        }
+    });
+    // Calculate content-aware estimated gzip compression ratio
+    const calculateEstimatedGzipRatio = () => {
+        // Realistic gzip compression ratios by content type (compressed size / original size)
+        const cssGzipRatio = 0.15; // CSS compresses to ~15% of original size
+        const jsGzipRatio = 0.25; // JavaScript compresses to ~25% of original size
+        const cssSize = analysis.totals.totalCSS;
+        const jsSize = analysis.totals.javascript;
+        // Only calculate gzip for CSS and JS (assets like fonts/images typically aren't gzipped by CDNs)
+        const compressibleSize = cssSize + jsSize;
+        if (compressibleSize === 0)
+            return 0;
+        // Calculate estimated gzipped size for compressible content only
+        const estimatedGzipSize = (cssSize * cssGzipRatio) +
+            (jsSize * jsGzipRatio);
+        // Return ratio of estimated gzipped size to total compressible size
+        return Math.round((estimatedGzipSize / compressibleSize) * 100) / 100;
+    };
+    analysis.performance.compressionRatio = calculateEstimatedGzipRatio();
+    // Generate alerts
+    analysis.alerts = generateAlerts(analysis.totals, config.thresholds);
+    return analysis;
+}
+/**
+ * Determines asset size in KB
+ */
+function getAssetSize(asset) {
+    const source = asset.source || asset.code || '';
+    const bytes = typeof source === 'string' ? Buffer.byteLength(source, 'utf8') : source.length;
+    return Math.round(bytes / 1024 * 100) / 100; // KB with 2 decimal precision
+}
+/**
+ * Determines asset type from filename
+ */
+function getAssetType(fileName) {
+    if (fileName.endsWith('.css'))
+        return 'css';
+    if (fileName.endsWith('.js') || fileName.endsWith('.mjs'))
+        return 'js';
+    return 'asset';
+}
+/**
+ * Categorizes assets for performance analysis
+ */
+function getAssetCategory(fileName) {
+    if (fileName.includes('critical'))
+        return 'critical';
+    if (fileName.includes('progressive'))
+        return 'progressive';
+    if (fileName.includes('vendor') || fileName.includes('node_modules'))
+        return 'vendor';
+    if (fileName.includes('component'))
+        return 'component';
+    return undefined;
+}
+/**
+ * Generates performance alerts based on thresholds
+ */
+function generateAlerts(totals, thresholds) {
+    const alerts = [];
+    if (totals.criticalCSS > thresholds.criticalCSS) {
+        alerts.push(`Critical CSS size (${totals.criticalCSS}KB) exceeds threshold (${thresholds.criticalCSS}KB)`);
+    }
+    if (totals.progressiveCSS > thresholds.progressiveCSS) {
+        alerts.push(`Progressive CSS size (${totals.progressiveCSS}KB) exceeds threshold (${thresholds.progressiveCSS}KB)`);
+    }
+    if (totals.totalCSS > thresholds.totalCSS) {
+        alerts.push(`Total CSS size (${totals.totalCSS}KB) exceeds threshold (${thresholds.totalCSS}KB)`);
+    }
+    if (totals.javascript > thresholds.javascript) {
+        alerts.push(`JavaScript bundle size (${totals.javascript}KB) exceeds threshold (${thresholds.javascript}KB)`);
+    }
+    return alerts;
+}
+/**
+ * Logs performance report to console
+ */
+function logPerformanceReport(analysis, config) {
+    console.log('\n📊 Performance Analysis Report');
+    console.log('================================');
+    console.log('\n📦 Bundle Sizes:');
+    console.log(`   Critical CSS:    ${analysis.totals.criticalCSS}KB (threshold: ${config.thresholds.criticalCSS}KB)`);
+    console.log(`   Progressive CSS: ${analysis.totals.progressiveCSS}KB (threshold: ${config.thresholds.progressiveCSS}KB)`);
+    console.log(`   Total CSS:       ${analysis.totals.totalCSS}KB (threshold: ${config.thresholds.totalCSS}KB)`);
+    console.log(`   JavaScript:      ${analysis.totals.javascript}KB (threshold: ${config.thresholds.javascript}KB)`);
+    console.log(`   Assets:          ${analysis.totals.assets}KB`);
+    console.log(`   Total Bundle:    ${analysis.totals.total}KB`);
+    console.log('\n⚡ Performance Metrics:');
+    console.log(`   Build Time:      ${analysis.performance.bundleTime}ms`);
+    const compressibleSize = analysis.totals.totalCSS + analysis.totals.javascript;
+    console.log(`   Gzip Ratio:      ${analysis.performance.compressionRatio} (CSS+JS compression)`);
+    console.log(`   Est. Gzip Size:  ~${Math.round(compressibleSize * analysis.performance.compressionRatio)}KB (CSS+JS only)`);
+    console.log(`\n📝 Report saved to: ${config.reportPath}`);
+    if (analysis.alerts.length === 0) {
+        console.log('\n✅ All performance thresholds met!');
+    }
+}
+/**
+ * Creates performance comparison utility
+ */
+export function comparePerformance(currentReport, baselineReport) {
+    if (!baselineReport || !fs.existsSync(baselineReport)) {
+        console.log('\n📈 Baseline report not found. Current report will serve as baseline.');
+        return;
+    }
+    try {
+        const current = JSON.parse(fs.readFileSync(currentReport, 'utf8'));
+        const baseline = JSON.parse(fs.readFileSync(baselineReport, 'utf8'));
+        console.log('\n📈 Performance Comparison (vs baseline)');
+        console.log('======================================');
+        const metrics = [
+            { name: 'Critical CSS', current: current.totals.criticalCSS, baseline: baseline.totals.criticalCSS },
+            { name: 'Progressive CSS', current: current.totals.progressiveCSS, baseline: baseline.totals.progressiveCSS },
+            { name: 'Total CSS', current: current.totals.totalCSS, baseline: baseline.totals.totalCSS },
+            { name: 'JavaScript', current: current.totals.javascript, baseline: baseline.totals.javascript },
+            { name: 'Total Bundle', current: current.totals.total, baseline: baseline.totals.total }
+        ];
+        metrics.forEach(metric => {
+            const diff = metric.current - metric.baseline;
+            const diffPercent = metric.baseline > 0 ? Math.round((diff / metric.baseline) * 100) : 0;
+            const indicator = diff > 0 ? '📈' : diff < 0 ? '📉' : '➡️';
+            console.log(`   ${metric.name.padEnd(15)} ${indicator} ${metric.current}KB (${diff >= 0 ? '+' : ''}${diff}KB, ${diffPercent >= 0 ? '+' : ''}${diffPercent}%)`);
+        });
+    }
+    catch (error) {
+        console.error('Failed to compare performance reports:', error);
+    }
+}