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

package/dist/plugins/progressive-css-loader.js

@@ -0,0 +1,227 @@
+/**
+ * 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 postcss from 'postcss';
+const DEFAULT_CONFIG = {
+    critical: ['xs', 'sm', 'md'],
+    progressive: ['lg', 'xl', '2xl', '3xl'],
+    progressivePath: 'progressive.css'
+};
+export default function progressiveCSSLoader(config = {}) {
+    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 = {
+    '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) {
+    // 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, _config) {
+    try {
+        const desktopRules = [];
+        // 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() {
+    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/dist/plugins/theme-css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-css-generator.d.ts","sourceRoot":"","sources":["../../src/plugins/theme-css-generator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,MAAM,CAuTlD"}
+{"version":3,"file":"theme-css-generator.d.ts","sourceRoot":"","sources":["../../src/plugins/theme-css-generator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIlC,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,MAAM,CAuUlD"}

package/dist/plugins/theme-css-generator.esm.js

@@ -89,7 +89,7 @@ export default function themeCSSGenerator() {
         return fonts?.[fontKey]?.source?.type === 'google';
     };
     // Recursively generate CSS variables from theme object
-    const generateCSSVariables = (obj, path = [], rootTheme) => {
+    const generateCSSVariables = (obj, path = [], rootTheme, localVars = new Set()) => {
         let css = '';
         if (typeof obj !== 'object' || obj === null) {
             return css;
@@ -104,19 +104,31 @@ export default function themeCSSGenerator() {
                     return;
                 }
             }
+            // 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);
             }
         });
         return css;
@@ -138,8 +150,9 @@ export default function themeCSSGenerator() {
         css += `  /* Light Mode Variables */\n`;
         // 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();
+        css += generateCSSVariables(themeObj, [], themeObj, localVars);
         css += '}\n\n';
         // Generate dark mode variables
         css += `.dark {\n`;

package/dist/plugins/theme-css-generator.js

@@ -89,7 +89,7 @@ export default function themeCSSGenerator() {
         return fonts?.[fontKey]?.source?.type === 'google';
     };
     // Recursively generate CSS variables from theme object
-    const generateCSSVariables = (obj, path = [], rootTheme) => {
+    const generateCSSVariables = (obj, path = [], rootTheme, localVars = new Set()) => {
         let css = '';
         if (typeof obj !== 'object' || obj === null) {
             return css;
@@ -104,19 +104,31 @@ export default function themeCSSGenerator() {
                     return;
                 }
             }
+            // 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);
             }
         });
         return css;
@@ -138,8 +150,9 @@ export default function themeCSSGenerator() {
         css += `  /* Light Mode Variables */\n`;
         // 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();
+        css += generateCSSVariables(themeObj, [], themeObj, localVars);
         css += '}\n\n';
         // Generate dark mode variables
         css += `.dark {\n`;