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

package/src/plugins/performance-monitor.ts

@@ -0,0 +1,292 @@
+/**
+ * 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'
+import fs from 'fs'
+import path from 'path'
+
+interface PerformanceConfig {
+  // Bundle size thresholds (in KB)
+  thresholds: {
+    criticalCSS: number
+    progressiveCSS: number
+    totalCSS: number
+    javascript: number
+  }
+  // Output configuration
+  reportPath: string
+  enableAlerts: boolean
+  baselinePath?: string
+}
+
+interface BundleAnalysis {
+  timestamp: string
+  files: {
+    [filename: string]: {
+      size: number
+      gzipSize?: number
+      type: 'css' | 'js' | 'asset'
+      category?: 'critical' | 'progressive' | 'component' | 'vendor'
+    }
+  }
+  totals: {
+    criticalCSS: number
+    progressiveCSS: number
+    totalCSS: number
+    javascript: number
+    assets: number
+    total: number
+  }
+  performance: {
+    bundleTime: number
+    compressionRatio: number
+  }
+  alerts: string[]
+}
+
+const DEFAULT_CONFIG: PerformanceConfig = {
+  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: Partial<PerformanceConfig> = {}): Plugin {
+  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: any, startTime: number, config: PerformanceConfig): BundleAnalysis {
+  const analysis: BundleAnalysis = {
+    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]: [string, any]) => {
+    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 = (): number => {
+    // 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: any): number {
+  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: string): 'css' | 'js' | 'asset' {
+  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: string): 'critical' | 'progressive' | 'component' | 'vendor' | undefined {
+  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: BundleAnalysis['totals'], thresholds: PerformanceConfig['thresholds']): string[] {
+  const alerts: string[] = []
+
+  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: BundleAnalysis, config: PerformanceConfig): void {
+  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: string, baselineReport?: string): void {
+  if (!baselineReport || !fs.existsSync(baselineReport)) {
+    console.log('\n📈 Baseline report not found. Current report will serve as baseline.')
+    return
+  }
+
+  try {
+    const current: BundleAnalysis = JSON.parse(fs.readFileSync(currentReport, 'utf8'))
+    const baseline: BundleAnalysis = 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)
+  }
+}

package/src/plugins/progressive-css-loader.ts

@@ -0,0 +1,269 @@
+/**
+ * Progressive CSS Loader Plugin
+ * Implements Phase 3 Performance Optimization: Progressive Enhancement Loading
+ *
+ * Separates CSS into:
+ * - Critical: xs-md breakpoints (mobile-tablet) - loaded immediately
+ * - Progressive: lg-3xl breakpoints (desktop+) - loaded on demand
+ */
+
+import type { Plugin } from 'vite'
+import postcss from 'postcss'
+
+interface ProgressiveCSSConfig {
+  // Critical breakpoints (always loaded)
+  critical: string[]
+  // Progressive breakpoints (loaded on demand)
+  progressive: string[]
+  // Progressive CSS output path
+  progressivePath: string
+}
+
+const DEFAULT_CONFIG: ProgressiveCSSConfig = {
+  critical: ['xs', 'sm', 'md'],
+  progressive: ['lg', 'xl', '2xl', '3xl'],
+  progressivePath: 'progressive.css'
+}
+
+export default function progressiveCSSLoader(config: Partial<ProgressiveCSSConfig> = {}): Plugin {
+  const finalConfig = { ...DEFAULT_CONFIG, ...config }
+
+  return {
+    name: 'progressive-css-loader',
+    apply: 'build',
+    generateBundle(_options, bundle) {
+      // Find CSS assets in bundle
+      const cssAssets = Object.keys(bundle).filter(key => key.endsWith('.css'))
+
+      cssAssets.forEach((assetKey, index) => {
+        const asset = bundle[assetKey]
+        if (asset.type === 'asset' && typeof asset.source === 'string') {
+          const originalSource = asset.source
+
+          // Safely separate CSS into critical and progressive parts
+          const { critical, progressive } = separateCSS(originalSource, finalConfig)
+          const originalSize = Math.round(originalSource.length / 1024)
+          const criticalSize = Math.round(critical.length / 1024)
+          const progressiveSize = Math.round(progressive.length / 1024)
+
+          console.log(`   Split ${assetKey}: ${originalSize}KB -> ${criticalSize}KB critical + ${progressiveSize}KB progressive`)
+
+          // Update the main CSS asset to contain only critical CSS
+          asset.source = critical
+
+          // Create separate progressive CSS file with unique naming for desktop enhancement
+          if (progressive.trim()) {
+            const progressiveFileName = index === 0
+              ? finalConfig.progressivePath
+              : finalConfig.progressivePath.replace('.css', `-${index}.css`)
+
+            this.emitFile({
+              type: 'asset',
+              fileName: progressiveFileName,
+              source: progressive
+            })
+            console.log(`   Created ${progressiveFileName} for desktop enhancement (${progressiveSize}KB)`)
+          }
+
+          // Skip creating explicit critical CSS file since main bundle already contains critical styles
+        }
+      })
+    }
+  }
+}
+
+/**
+ * CSS Variable to pixel value mapping based on design system
+ * This provides the authoritative mapping for breakpoint classification
+ */
+const BREAKPOINT_VALUES: Record<string, number> = {
+  'xs': 475,
+  'sm': 640,
+  'mobile': 640,
+  'md': 768,
+  'tablet': 768,
+  'lg': 1024,
+  'desktop': 1024,
+  'xl': 1280,
+  'wide': 1280,
+  '2xl': 1536,
+  'ultra': 1536,
+  '3xl': 1920
+}
+
+/**
+ * Desktop breakpoint threshold - anything >= 1024px is considered desktop
+ */
+const DESKTOP_THRESHOLD = 1024
+
+/**
+ * Determines if a media query represents a desktop breakpoint
+ * Uses CSS variable resolution to properly classify breakpoints
+ */
+function isDesktopMediaQuery(mediaQuery: string): boolean {
+  // Skip max-width queries - they should always stay in critical CSS
+  if (mediaQuery.includes('max-width')) {
+    return false
+  }
+
+  // Check for CSS variable-based breakpoints
+  const variableMatch = mediaQuery.match(/var\(--cs-breakpoints-([^)]+)\)/)
+  if (variableMatch) {
+    const breakpointName = variableMatch[1]
+    const pixelValue = BREAKPOINT_VALUES[breakpointName]
+
+    if (pixelValue !== undefined) {
+      return pixelValue >= DESKTOP_THRESHOLD
+    }
+
+    // If we don't recognize the variable, log it and assume it's critical for safety
+    console.warn(`Unknown breakpoint variable: --cs-breakpoints-${breakpointName}`)
+    return false
+  }
+
+  // Check for direct pixel values
+  const pixelMatch = mediaQuery.match(/min-width:\s*(\d+)px/)
+  if (pixelMatch) {
+    const pixelValue = parseInt(pixelMatch[1], 10)
+    return pixelValue >= DESKTOP_THRESHOLD
+  }
+
+  // If we can't classify it, keep it in critical CSS for safety
+  return false
+}
+
+/**
+ * Safely separates CSS content into critical and progressive sections
+ * Critical: < 1024px breakpoints (mobile/tablet) + base styles
+ * Progressive: >= 1024px breakpoints (desktop+) only
+ */
+function separateCSS(cssContent: string, _config: ProgressiveCSSConfig) {
+  try {
+    const desktopRules: string[] = []
+
+    // Parse CSS using PostCSS
+    const root = postcss.parse(cssContent)
+
+    // Walk through all rules and find desktop media queries
+    root.walkAtRules('media', (rule) => {
+      const mediaQuery = rule.params
+      const shouldExtract = isDesktopMediaQuery(mediaQuery)
+
+      if (shouldExtract) {
+        // Convert the rule back to CSS string and collect it
+        desktopRules.push(rule.toString())
+        // Remove the rule from the original AST
+        rule.remove()
+      }
+    })
+
+    // Generate the critical CSS (without desktop rules)
+    const criticalCSS = root.toString()
+    const progressiveCSS = desktopRules.join('\n')
+
+    // Validate CSS syntax by checking for balanced braces
+    const criticalOpenBraces = (criticalCSS.match(/\{/g) || []).length
+    const criticalCloseBraces = (criticalCSS.match(/\}/g) || []).length
+    const progressiveOpenBraces = (progressiveCSS.match(/\{/g) || []).length
+    const progressiveCloseBraces = (progressiveCSS.match(/\}/g) || []).length
+
+    if (criticalOpenBraces !== criticalCloseBraces) {
+      console.error(`PostCSS extraction created malformed critical CSS: ${criticalOpenBraces} open braces vs ${criticalCloseBraces} close braces`)
+      console.log('Falling back to original CSS to avoid syntax errors')
+      return {
+        critical: cssContent,
+        progressive: ''
+      }
+    }
+
+    if (progressiveOpenBraces !== progressiveCloseBraces) {
+      console.error(`PostCSS extraction created malformed progressive CSS: ${progressiveOpenBraces} open braces vs ${progressiveCloseBraces} close braces`)
+      console.log('Falling back to original CSS to avoid syntax errors')
+      return {
+        critical: cssContent,
+        progressive: ''
+      }
+    }
+
+    console.log(`CSS separation: Extracted ${desktopRules.length} desktop-only media queries using PostCSS`)
+
+    // Note: Any remaining CSS syntax warnings are from pre-existing CSS generation issues,
+    // not from the progressive CSS extraction process
+
+    return {
+      critical: criticalCSS,
+      progressive: progressiveCSS
+    }
+
+  } catch (error) {
+    console.error('PostCSS separation failed, falling back to original CSS:', error)
+    return {
+      critical: cssContent,
+      progressive: ''
+    }
+  }
+}
+
+
+/**
+ * Creates progressive CSS loading script for runtime
+ */
+export function createProgressiveLoader(): string {
+  return `
+// Progressive CSS Loader - Phase 3 Performance Optimization
+(function() {
+  'use strict';
+
+  const DESKTOP_BREAKPOINT = 1024; // lg breakpoint
+  const PROGRESSIVE_CSS_PATH = '/assets/progressive.css';
+
+  let progressiveCSSLoaded = false;
+
+  function loadProgressiveCSS() {
+    if (progressiveCSSLoaded) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = PROGRESSIVE_CSS_PATH;
+    link.media = 'screen and (min-width: ' + DESKTOP_BREAKPOINT + 'px)';
+
+    // Load asynchronously for non-blocking
+    link.onload = function() {
+      console.log('Progressive CSS loaded for desktop');
+      progressiveCSSLoaded = true;
+    };
+
+    document.head.appendChild(link);
+  }
+
+  function checkViewport() {
+    if (window.innerWidth >= DESKTOP_BREAKPOINT) {
+      loadProgressiveCSS();
+    }
+  }
+
+  // Load on resize to desktop
+  let resizeTimeout;
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(checkViewport, 150);
+  });
+
+  // Check initial viewport
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkViewport);
+  } else {
+    checkViewport();
+  }
+
+  // Preload for fast desktop switches
+  if (window.innerWidth >= 768) { // tablet+
+    const preload = document.createElement('link');
+    preload.rel = 'preload';
+    preload.href = PROGRESSIVE_CSS_PATH;
+    preload.as = 'style';
+    document.head.appendChild(preload);
+  }
+})();
+`;
+}

package/src/plugins/theme-css-generator.ts

@@ -106,7 +106,7 @@ export default function themeCSSGenerator(): Plugin {
   }
 
   // Recursively generate CSS variables from theme object
-  const generateCSSVariables = (obj: any, path: string[] = [], rootTheme?: MultiThemeConfig): string => {
+  const generateCSSVariables = (obj: any, path: string[] = [], rootTheme?: MultiThemeConfig, localVars: Set<string> = new Set()): string => {
     let css = ''
 
     if (typeof obj !== 'object' || obj === null) {
@@ -125,17 +125,32 @@ export default function themeCSSGenerator(): Plugin {
         }
       }
 
+      // Skip breakpoints as they're handled by generateBreakpointVariables
+      if (key === 'breakpoints') {
+        return
+      }
+
       if (typeof value === 'string' || typeof value === 'number') {
         // Generate CSS variable for primitive values
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}: ${value};\n`
+
+        // Only prevent duplicates within the same traversal (same CSS rule block)
+        if (!localVars.has(cssVarName)) {
+          css += `  ${cssVarName}: ${value};\n`
+          localVars.add(cssVarName)
+        }
       } else if (Array.isArray(value)) {
         // Handle arrays (like font weights, tags)
         const cssVarName = createCSSVarName(currentPath)
-        css += `  ${cssVarName}: ${valueToString(value)};\n`
+
+        // Only prevent duplicates within the same traversal (same CSS rule block)
+        if (!localVars.has(cssVarName)) {
+          css += `  ${cssVarName}: ${valueToString(value)};\n`
+          localVars.add(cssVarName)
+        }
       } else if (typeof value === 'object' && value !== null) {
         // Recursively process nested objects
-        css += generateCSSVariables(value, currentPath, rootTheme)
+        css += generateCSSVariables(value, currentPath, rootTheme, localVars)
       }
     })
 
@@ -165,8 +180,9 @@ export default function themeCSSGenerator(): Plugin {
     // NEW: Generate breakpoint variables first
     css += generateBreakpointVariables(breakpoints)
     
-    // Generate all other CSS variables
-    css += generateCSSVariables(themeObj, [], themeObj)
+    // Generate all other CSS variables (each CSS block has its own scope)
+    const localVars = new Set<string>()
+    css += generateCSSVariables(themeObj, [], themeObj, localVars)
     css += '}\n\n'
     
     // Generate dark mode variables

package/src/styles/components/base/badge.css

@@ -215,7 +215,7 @@
 }
 
 /* Responsive Design */
-@media (max-width: var(--cs-breakpoints-mobile)) {
+@media (max-width: 640px) {
   .badge {
     font-size: var(--badge-mobile-font-size, var(--cs-fonts-primary-sizes-xs));
     padding: var(--badge-mobile-padding-y, var(--cs-spacing-scale-xs)) var(--badge-mobile-padding-x, var(--cs-spacing-scale-sm));
@@ -223,7 +223,7 @@
 }
 
 /* Container Queries for Adaptive Layouts */
-@container (min-width: var(--cs-breakpoints-tablet)) {
+@container (min-width: 768px) {
   .badge {
     font-size: var(--badge-container-font-size, var(--cs-fonts-primary-sizes-sm));
   }