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

package/src/plugins/css-purge-optimizer.ts

@@ -0,0 +1,491 @@
+/**
+ * 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 type { Plugin } from 'vite'
+import postcss, { Rule, AtRule, Declaration } from 'postcss'
+
+interface CSSPurgeConfig {
+  // Breakpoints to analyze for usage
+  breakpoints: string[]
+  // Custom properties to preserve (even if unused)
+  preserveCustomProperties: string[]
+  // Selectors to always preserve
+  preserveSelectors: string[]
+  // Enable aggressive optimization
+  aggressive: boolean
+  // Enable minification
+  minify: boolean
+}
+
+interface UsageAnalysis {
+  usedBreakpoints: Set<string>
+  usedCustomProperties: Set<string>
+  usedSelectors: Set<string>
+  unusedRules: string[]
+}
+
+const DEFAULT_CONFIG: CSSPurgeConfig = {
+  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: Partial<CSSPurgeConfig> = {}): Plugin {
+  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: string, config: CSSPurgeConfig): string {
+  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: string, config: CSSPurgeConfig): UsageAnalysis {
+  const usage: UsageAnalysis = {
+    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: AtRule) => {
+      // Analyze media query breakpoints
+      const mediaQuery = rule.params
+
+      config.breakpoints.forEach((breakpoint: string) => {
+        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: Declaration) => {
+      // 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: 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: string[] = ['xs', 'sm', 'md']
+    criticalBreakpoints.forEach((bp: string) => 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: string, config: CSSPurgeConfig): UsageAnalysis {
+  const usage: UsageAnalysis = {
+    usedBreakpoints: new Set(),
+    usedCustomProperties: new Set(),
+    usedSelectors: new Set(),
+    unusedRules: []
+  }
+
+  // Analyze breakpoint usage in media queries
+  config.breakpoints.forEach((breakpoint: string) => {
+    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: string[] = ['xs', 'sm', 'md']
+  criticalBreakpoints.forEach((bp: string) => 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: string): number {
+  const breakpointMap: Record<string, number> = {
+    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: string, usage: UsageAnalysis, config: CSSPurgeConfig): string {
+  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: AtRule) => {
+      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: string, usage: UsageAnalysis, config: CSSPurgeConfig): string {
+  try {
+    const root = postcss.parse(cssContent)
+    let removedCount = 0
+
+    root.walkDecls((decl: Declaration) => {
+      // 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: string): string {
+  try {
+    const root = postcss.parse(cssContent)
+    const layerOrder = ['reset', 'base', 'themes', 'components', 'utilities']
+    let hasLayers = false
+
+    // Remove existing @layer declarations
+    root.walkAtRules('layer', (rule: AtRule) => {
+      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: string): string {
+  try {
+    const root = postcss.parse(cssContent)
+    const ruleMap = new Map<string, string>()
+    let removedCount = 0
+
+    root.walkRules((rule: 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: string): string {
+  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: string, optimizedCSS: string): string {
+  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
+`
+}