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

package/dist/plugins/css-purge-optimizer.esm.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
+`;
+}