@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+export default function themeCSSGenerator(): Plugin;
+//# sourceMappingURL=theme-css-generator.d.ts.map

package/dist/plugins/theme-css-generator.d.ts.map

@@ -0,0 +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,CAuUlD"}

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

@@ -0,0 +1,277 @@
+import { resolve } from 'path';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { defaultThemes } from '../themes/base-themes';
+export default function themeCSSGenerator() {
+    let config;
+    // Helper function to safely convert values to strings
+    const valueToString = (value) => {
+        if (Array.isArray(value)) {
+            return value.join(', ');
+        }
+        if (typeof value === 'object' && value !== null) {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    };
+    // Helper function to create CSS variable name
+    const createCSSVarName = (path) => {
+        return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`;
+    };
+    // Generate @font-face declarations from font configuration
+    const generateFontFaces = (themeObj) => {
+        let css = '';
+        if (!themeObj.fonts)
+            return css;
+        Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
+            if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
+                const { family, source, weights, display } = fontConfig;
+                if (weights && Array.isArray(weights) && weights.length > 0) {
+                    const minWeight = Math.min(...weights);
+                    const maxWeight = Math.max(...weights);
+                    css += `\n@font-face {\n`;
+                    css += `  font-family: '${family}';\n`;
+                    css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`;
+                    css += `  font-weight: ${minWeight} ${maxWeight};\n`;
+                    css += `  font-display: ${display || 'swap'};\n`;
+                    css += `}\n`;
+                }
+            }
+        });
+        return css;
+    };
+    // NEW: Extract breakpoints from anywhere in the theme object
+    const extractBreakpoints = (obj) => {
+        let breakpoints = {};
+        const searchForBreakpoints = (currentObj, currentPath = []) => {
+            if (typeof currentObj !== 'object' || currentObj === null) {
+                return;
+            }
+            Object.entries(currentObj).forEach(([key, value]) => {
+                if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
+                    // Found breakpoints, extract them
+                    Object.entries(value).forEach(([bpKey, bpValue]) => {
+                        if (typeof bpValue === 'string' || typeof bpValue === 'number') {
+                            breakpoints[bpKey] = bpValue;
+                        }
+                    });
+                }
+                else if (typeof value === 'object' && value !== null) {
+                    // Recursively search deeper
+                    searchForBreakpoints(value, [...currentPath, key]);
+                }
+            });
+        };
+        searchForBreakpoints(obj);
+        return breakpoints;
+    };
+    // NEW: Generate breakpoint CSS variables and @custom-media queries
+    const generateBreakpointVariables = (breakpoints) => {
+        let css = '';
+        if (Object.keys(breakpoints).length === 0) {
+            return css;
+        }
+        css += `  /* Breakpoint Variables */\n`;
+        Object.entries(breakpoints).forEach(([key, value]) => {
+            css += `  --cs-breakpoints-${key}: ${value};\n`;
+        });
+        css += '\n';
+        // NEW: Generate @custom-media queries for use in media queries
+        css += `  /* Custom Media Queries for Breakpoints */\n`;
+        Object.entries(breakpoints).forEach(([key, value]) => {
+            css += `  @custom-media --bp-${key} (min-width: ${value});\n`;
+        });
+        css += '\n';
+        return css;
+    };
+    // Helper function to check if font is Google font
+    const isFontGoogleFont = (themeObj, fontKey) => {
+        const fonts = themeObj.fonts;
+        return fonts?.[fontKey]?.source?.type === 'google';
+    };
+    // Recursively generate CSS variables from theme object
+    const generateCSSVariables = (obj, path = [], rootTheme, localVars = new Set()) => {
+        let css = '';
+        if (typeof obj !== 'object' || obj === null) {
+            return css;
+        }
+        Object.entries(obj).forEach(([key, value]) => {
+            const currentPath = [...path, key];
+            // Skip font file paths for Google fonts
+            if (path.length >= 3 && path[0] === 'fonts' && path[2] === 'source' && key === 'files') {
+                const fontKey = path[1];
+                if (rootTheme && isFontGoogleFont(rootTheme, fontKey)) {
+                    // Skip generating CSS variables for Google font files
+                    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);
+                // 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);
+                // 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, localVars);
+            }
+        });
+        return css;
+    };
+    // Generate CSS from theme object using structured traversal
+    const generateSingleThemeCSS = (themeName, themeObj) => {
+        // Always generate light + dark mode CSS
+        return generateLightDarkCSS(themeName, themeObj);
+    };
+    // Generate light and dark mode CSS
+    const generateLightDarkCSS = (themeName, themeObj) => {
+        let css = `/* ${themeName} Theme - Light & Dark Modes */\n`;
+        // Generate @font-face declarations
+        css += generateFontFaces(themeObj);
+        // NEW: Extract breakpoints from anywhere in the theme
+        const breakpoints = extractBreakpoints(themeObj);
+        // Generate light mode variables (default)
+        css += `:root {\n`;
+        css += `  /* Light Mode Variables */\n`;
+        // NEW: Generate breakpoint variables first
+        css += generateBreakpointVariables(breakpoints);
+        // 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`;
+        css += `  /* Dark Mode Variables */\n`;
+        if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
+            // Use custom dark mode colors if defined
+            css += generateDarkModeColors(themeObj.modes.dark.colors);
+        }
+        // Note: All themes should define modes.dark.colors for proper dark mode support
+        css += '}\n';
+        return css;
+    };
+    // Generate dark mode colors from explicit color definitions
+    const generateDarkModeColors = (darkColors) => {
+        let css = '';
+        Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
+            if (typeof colorValue === 'object' && colorValue !== null) {
+                // Handle nested color objects (like surface, text, etc.)
+                Object.entries(colorValue).forEach(([subKey, subValue]) => {
+                    if (typeof subValue === 'string' || typeof subValue === 'number') {
+                        css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`;
+                    }
+                });
+            }
+            else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+                // Handle direct color values
+                css += `  --cs-colors-${colorKey}: ${colorValue};\n`;
+            }
+        });
+        return css;
+    };
+    // Generate CSS for all themes using structured approach
+    const generateAllThemesCSS = () => {
+        try {
+            // Create themes directory if it doesn't exist
+            const themesDir = resolve(config.root, 'src/styles/themes');
+            if (!existsSync(themesDir)) {
+                mkdirSync(themesDir, { recursive: true });
+            }
+            let indexCSS = '/* Theme Index - Import all themes */\n';
+            // Use defaultThemes instead of hardcoded themeFiles
+            for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+                try {
+                    // Generate CSS for this specific theme
+                    const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj);
+                    // Write individual theme file (skip default theme file generation)
+                    if (themeKey !== 'default') {
+                        const themeFileName = `${themeKey}.css`;
+                        const themeOutputPath = resolve(themesDir, themeFileName);
+                        writeFileSync(themeOutputPath, themeCSS, 'utf-8');
+                        console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`);
+                        // Add import to index file
+                        indexCSS += `/* @import './${themeFileName}.js'; */\n`;
+                    }
+                    else {
+                        // Create empty default.css file with comment
+                        const themeFileName = `${themeKey}.css`;
+                        const themeOutputPath = resolve(themesDir, themeFileName);
+                        const emptyDefaultCSS = `/* Default theme CSS generation disabled - variables available via inheritance in other themes */\n`;
+                        writeFileSync(themeOutputPath, emptyDefaultCSS, 'utf-8');
+                        console.log(`✅ Created empty default.css file (theme variables available via inheritance)`);
+                        // Comment out import in index
+                        indexCSS += `/* @import './${themeFileName}.js'; */\n`;
+                    }
+                    // Set stan-design theme as default for backward compatibility file (disabled)
+                    // if (themeKey === 'stan-design') {
+                    //   defaultThemeCSS += themeCSS
+                    // }
+                }
+                catch (error) {
+                    console.error(`❌ Error processing ${themeKey}:`, error);
+                }
+            }
+            // Write theme index file
+            const indexPath = resolve(config.root, 'src/styles/themes/index.css');
+            writeFileSync(indexPath, indexCSS, 'utf-8');
+            // Write empty default theme file (for backward compatibility)
+            const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css');
+            const emptyDefaultCSS = `/* Generated theme variables file disabled - theme variables available via individual theme files */\n`;
+            writeFileSync(defaultPath, emptyDefaultCSS, 'utf-8');
+            console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully');
+        }
+        catch (error) {
+            console.error('❌ Theme CSS Generator Error:', error);
+        }
+    };
+    // Main function to generate theme CSS
+    const generateThemeCSS = () => {
+        try {
+            // Check if themes directory exists
+            const themesSourceDir = resolve(config.root, 'src/themes/themes');
+            if (!existsSync(themesSourceDir)) {
+                console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found');
+                return;
+            }
+            // Generate CSS for all themes
+            generateAllThemesCSS();
+        }
+        catch (error) {
+            console.error('❌ Theme CSS Generator Error:', error);
+        }
+    };
+    return {
+        name: 'theme-css-generator',
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        buildStart() {
+            generateThemeCSS();
+        },
+        handleHotUpdate({ file }) {
+            // Use defaultThemes keys instead of hardcoded file paths
+            const themeKeys = Object.keys(defaultThemes);
+            const shouldRegenerate = themeKeys.some(themeKey => file.includes(`themes/${themeKey}.ts`) ||
+                file.includes('inheritance.ts') ||
+                file.includes('types.ts'));
+            if (shouldRegenerate) {
+                generateThemeCSS();
+            }
+        }
+    };
+}