Added support for code-splitting of CSS resources

A while ago we implemented a nifty feature: code-splitting. Code-splitting allows to load only those assets which are required for the requested page, and nothing else. However, back then the implementation only worked for Javascript assets.

We are now thrilled to announce support for CSS assets too. CSS assets can now be defined on a module-by-module basis, so that when a module is to be loaded, its needed CSS assets will also be loaded, and only then. The mapping from module to CSS assets is decoupled: modules must not necessarily know what CSS files they need to load, since they are the functionality of the application, and CSS implements the look-and-feel. Then, the implementation is simply a hook, which allows the theme to add CSS files for each module.

function get_template_resources($template_id, $atts) {

  // Allow the theme to hook in the needed CSS resources. It could be based on the $template_id, or its template source, then pass both these values
  return array_values(array_unique(apply_filters(
    'GD_Template_ProcessorBase:template-resources',
    array(),
    $template_id,
    $this->get_template_source($template_id, $atts),
    $atts,
    $this
  )));
}

Defining the hook in file wp-content/plugins/pop-frontendengine/kernel/processors/pop-processor.php

class PopThemeWassup_AAL_ResourceLoaderProcessor_Hooks {

  function __construct() {

    add_filter(
      'GD_Template_ProcessorBase:template-resources',
      array($this, 'get_template_css_resources'),
      10,
      5
    );
  }

  function get_template_css_resources($resources, $template_id, $template_source, $atts, $processor) {

    switch ($template_source) {
      
      case GD_TEMPLATESOURCE_LAYOUT_PREVIEWNOTIFICATION:

        $resources[] = POP_RESOURCELOADER_CSS_NOTIFICATIONLAYOUT;
        break;
    }

    return $resources;
  }
}
new PopThemeWassup_AAL_ResourceLoaderProcessor_Hooks();

Implementing the hook to add styles to a module

As usual, enjoy!


Sign up to our newsletter:

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.