Style Generation and Purging

[neilmcguigan]

our main site uses twitter bootstrap for styling, so wanted the mobile app to look similar

this is what i did:

Asked claude sonnet to convert all bootstrap classes to hyperview xml styles (it did this pretty well). had to repeat a few times for "forms", etc

Example:

<style id="btn-primary" backgroundColor="#007bff" borderWidth="1" borderColor="#007bff" color="#ffffff" />

Put these in a file (bootstrap-styles.blade.php)

Asked claude to write a program (below) to search my templates for all hyperview style names and filter out the styles in master that weren't in my templates to make a small-styles.blade.php, similar to purgecss

Include simple-styles.blade.php in my templates

so, styles use bootstrap class names like a button, and look just like the bootstrap ones.

you could do the same with tailwind or similar

purge program:

<?php

/**
 * Hyperview Style Purger
 *
 * This script analyzes Laravel Blade files to find all Hyperview style IDs in use,
 * then creates a new styles file containing only the styles that are actually used.
 */

// Configuration
$original_styles_file = 'resources/views/hyperview/bootstrap-styles.blade.php';
$output_styles_file = 'resources/views/hyperview/small-styles.blade.php';
$blade_directories = [
    'resources/views', // Change these paths to match your project structure
];
$exclude_directories = [
    'resources/views/hyperview', // Don't scan the styles file directory itself
];

// Function to extract style IDs from the original styles file
function extractStyleIds($styleContent) {
    $styles = [];
    preg_match_all('/<style\s+id="([^"]+)"/', $styleContent, $matches);

    if (isset($matches[1]) && !empty($matches[1])) {
        foreach ($matches[1] as $styleId) {
            $styles[$styleId] = null; // We'll fill this with the style definition later
        }
    }

    return $styles;
}

// Function to find the full style definition for a given ID
function findStyleDefinition($styleContent, $styleId) {
    $pattern = '/<style\s+id="' . preg_quote($styleId, '/') . '"[^>]*\/>/';
    if (preg_match($pattern, $styleContent, $match)) {
        return $match[0];
    }
    return null;
}

// Function to find all used style IDs in blade files
function findUsedStyleIds($directories, $excludeDirs) {
    $usedStyleIds = [];

    foreach ($directories as $directory) {
        $iterator = new RecursiveIteratorIterator(
            new RecursiveDirectoryIterator($directory)
        );

        foreach ($iterator as $file) {
            // Skip directories in the exclude list
            $shouldSkip = false;
            foreach ($excludeDirs as $excludeDir) {
                if (strpos($file->getPathname(), $excludeDir) === 0) {
                    $shouldSkip = true;
                    break;
                }
            }

            if ($shouldSkip) {
                continue;
            }

            // Only process .blade.php files
            if ($file->isFile() && preg_match('/\.blade\.php$/', $file->getFilename())) {
                $content = file_get_contents($file->getPathname());

                // Look for style="style-name" pattern in the file
                preg_match_all('/style="([^"]+)"/', $content, $matches);

                if (isset($matches[1]) && !empty($matches[1])) {
                    foreach ($matches[1] as $match) {
                        // A style attribute might contain multiple space-separated style IDs
                        $styleIds = explode(' ', $match);
                        foreach ($styleIds as $styleId) {
                            $styleId = trim($styleId);
                            if (!empty($styleId)) {
                                $usedStyleIds[$styleId] = true;
                            }
                        }
                    }
                }
            }
        }
    }

    return array_keys($usedStyleIds);
}

// Main process
try {
    echo "Starting Hyperview style purging process...\n";

    // Check if the original styles file exists
    if (!file_exists($original_styles_file)) {
        throw new Exception("Original styles file not found: $original_styles_file");
    }

    // Read the content of the original styles file
    $stylesContent = file_get_contents($original_styles_file);

    // Extract all available style IDs
    $allStyles = extractStyleIds($stylesContent);
    echo "Found " . count($allStyles) . " style definitions in original file.\n";

    // Find all used style IDs in the blade files
    $usedStyleIds = findUsedStyleIds($blade_directories, $exclude_directories);
    echo "Found " . count($usedStyleIds) . " style IDs used in blade files.\n";

    // Create new styles content with only the used styles
    $newStylesContent = "<!-- Generated by Hyperview Style Purger - Contains only styles used in the project -->\n";
    $newStylesContent .= "<!-- Original file: $original_styles_file -->\n";
    $newStylesContent .= "<!-- Generated on: " . date('Y-m-d H:i:s') . " -->\n\n";

    $usedStylesCount = 0;

    foreach ($usedStyleIds as $styleId) {
        if (array_key_exists($styleId, $allStyles)) {
            $styleDefinition = findStyleDefinition($stylesContent, $styleId);
            if ($styleDefinition) {
                $newStylesContent .= $styleDefinition . "\n";
                $usedStylesCount++;
            }
        }
    }

    // Save the new styles file
    file_put_contents($output_styles_file, $newStylesContent);
    echo "Generated new styles file with $usedStylesCount styles: $output_styles_file\n";
    echo "Reduced by " . (count($allStyles) - $usedStylesCount) . " unused styles.\n";
    echo "Done!\n";

} catch (Exception $e) {
    echo "Error: " . $e->getMessage() . "\n";
    exit(1);
}