Critical CSS snippet for MODX

criticalCSS.snippet.php

<?php
/**
 * Critical CSS
 * v.0.0.3
 * 
 * This snippet helps you manage and serve your critical CSS in MODX.
 * It does not generate critical CSS (ccss) for you.
 * 
 * Why use ccss when we have http/2? 
 * Serving ccss when using http/2 still optimises First Contentful Paint, 
 * Time to Interactive and First Meaningful Paint. Plus, if you have to support 
 * old browsers that don't support http/2, you'll make their experience a 
 * little faster.
 *
 * This snippet allows you to:
 * - serve a generic set of ccss (based on a path to a local css file)
 * - serve resource specific ccss (based on a path to a local css file)
 *
 * You will need to setup the following:
 * - a) a yes/no system setting called 'site_builder_criticalcss_enable'
 * - b) a yes/no system setting called 'site_builder_criticalcss_enable_generic'
 * - c) a textfield system setting called `site_builder_criticalcss_path_generic`
 * - d) a file tv called 'tv_head_criticalcss'
 * 
 * Fields in c) and d) will contain the path to your relevant ccss file
 *
 * Example snippet usage:
 * [[!criticalCSS? &tpl=`myTpl`]]
 *
 * Example myTpl chunk:
 * <style>
 * [[+output]]
 * </style>
 * 
 * Sync the id of tv tv_head_criticalcss with Bable, if you want this value synced
 * across contexts
 */
 
// return value of site_builder_criticalcss_enable (1 or 0)
$criticalcss_enabled = $modx->config['site_builder_criticalcss_enable'];
// return value of site_builder_criticalcss_enable_generic (1 or 0)
$criticalcss_enabled_generic = $modx->config['site_builder_criticalcss_enable_generic'];
// get current resource id
$id = isset($id) ? $id : $modx->resource->get('id');
// get modResource object
$object = $modx->getObject('modResource', $id);
// ccss page specific file path
$css_custom = $object->getTVValue('tv_head_criticalcss');
// ccss generic file path
$css_generic = $modx->config['site_builder_criticalcss_path_generic'];

// get custom chunk tpl if defined, otherwise load default...
$tpl = $modx->getOption('tpl',$scriptProperties,'tpl_criticalcss_output');

// set output for placeholders...
$output_generic = file_get_contents('.' . $css_generic);
$output_custom = file_get_contents('.' . '/' . $css_custom);

// is ccss enabled? if not stop here...
if ($criticalcss_enabled == 0) {
    return;
}

// check to see if PHPSESSID cookie has been dropped.
// this means that critical CSS will only be displayed on the first visit only.
// after the first visit, a service worker will be launched, caching css/js in local cache storage
if (!isset($_COOKIE['PHPSESSID'])) {
    
    // if tv_head_criticalcss is empty do something...
    if (!$css_custom) {
        // must be empty, load generic ccss from system setting...
        
        // if generic ccss system setting is set to no, stop here...
        if ($criticalcss_enabled_generic == 0) {
            return;
        }
        
        // set placeholders
        $placeholders = array(
            'output' => $output_generic
        );
            
        return $modx->getChunk($tpl, $placeholders);
        
    
    } else {
        // if tv_head_criticalcss is not empty, use this value...
        
        // set placeholders
        $placeholders = array(
            'output' => $output_custom
        );
        
        return $modx->getChunk($tpl, $placeholders);
    }
    
}