Hyvä - How not to Lose Your Head in the Purge

Hyvä uses Tailwind which is a great CSS framework, but the full tailwind css file contains over 600,000 lines of CSS! This is because it contains every possible Tailwind class that can be used. 

So to reduce this down it's important to only include the styles that you actually use in your site. 

This is where PurgeCSS comes into play. It removes all styles that aren't used, leaving only the required styles. 

We've seen this in action reduce the initial 15MB css file down to only 12kb!

It's important to understand how Hyvä uses PurgeCSS to reduce the number of classes in the final output.  

"PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files."

So you've developed your site it looks great and has passed QA, you then run 

$npm run build-prod

And your sites is a bit of a mess??!!!!

So what went wrong?

The first thing to understand is the tailwind.config.js file inside your app/design/Frontend/Namespace/Theme/web/tailwind folder.

The part we're interested in is 

purge: {              
        // Examples for excluding patterns from purge
        // options: {              
        //     safelist: [/^bg-opacity-/, /^-?[mp][trblxy]?-[4,8]$/, /^text-shadow/],
        // },
        content: [
            '../../**/*.phtml',
            './src/**/*.phtml',
            // parent theme in Vendor
            '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
        ]
    }

This instructs PurgeCSS to find all .phtml files in the sites theme folder, plus the base vendor Hyvä theme. 

This will ensure any classes used in these theme files are included in the final tailwind .css file output. 

Ok so we're all good, nothing will go wrong?

Actually no, PurgeCSS is good at what it does, but it also has some limitations. 

What happens when we dynamically generate class names in our PHP, for example,

<div class="<?php echo $cols ? 'md:grid-cols-'.$cols : 'md:grid-cols-3'; ?>"></div>

The final class is output depending on the configured value of the the $col variable. 

PurgeCSS has no idea what this value will be and so can't include those classes in the final .css file. 

This will be the same situation for any .js dynamically generated classes, they won't be known at purge/compile time and so will be missing. 

To fix this solution, as you develop your theme include any dynamically generated classes in the purge options section of the tailwind.config.js file. 

So for the example above, add

purge: {              
         options: {              
             safelist: [/^md:grid-cols-/],
        },
        content: [
            '../../**/*.phtml',
            './src/**/*.phtml',
            // parent theme in Vendor
            '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
        ]
    }

All 'md:grid-cols-1', 'md:grid-cols-2' etc classes will now be included when the final production ready css file is generated. 

If you're looking for an even smaller build, be more specific and include only the classes you want for example. 

purge: {              
         options: {              
             safelist: [/^md:grid-cols-1/,/^md:grid-cols-2/],

Now your site when built for production will look just as shiny and even faster then your development build!

For more complex configuration of the Hyvä Purge process check out the official docs here

https://docs.hyva.io/hyva-themes/working-with-tailwindcss/tailwind-purging-settings.html

Also the official Tailwind docs has some more advanced info

https://tailwindcss.com/docs/optimizing-for-production