Auto Assets

Problem/Motivation

Many sites are following single-style-css approach when all the styles for the site are written (or compiled) into a single style.css file which is added to every single page on the site. That file contains all the styles available.
Needless to say, that's just loading of useless kilobytes of data and slowing down the browser by parsing the extra content. Same applies to JS with the scripts.js file
You could use libraries like UnCSS but there's another way to do it - this module.

How does it work?

The module is the development tool that allows you to load only the assets that are relevant for the elements rendered on the page. Following the Drupal theme overview it is easy to see that there's a sort of components' (elements, templates) hierarchy.
We stick to the below layers (starting from the most common one). The higher layers typically include the lower ones.

1. HTML
2. Page
3. Regions
4. Entities
5. Blocks

Step 1. The module scans the directories (that you define) for the existence of CSS/JS files matching the naming convention (described below) and caches that list not to scan file system all the time.

Step 2. On the page load the module registers the elements that are added into the page, constructs the list of the asset name suggestions and loads the existing suggestion assets from the cached list. Files are loaded according to the layers hierarchy, e.g. CSS files for Entities will be loaded later than HTML layer related files.

Naming Convention

The naming convention described in this section is the default behaviour of the module. It is possible to override/replace it. Review Customisations section to learn how to do it.

Basenames

When elements on the page are detected by the module, e.g. node that is rendered on the page, the module saves the asset's "basenames", e.g. node and node--NODETYPE for the example above.

The complete list of predefined basenames:

1. HTML
   • html
2. Page
   • page
3. Regions
   • region--REGION
4. Entities
   • node - if on node page node/%
   • node--NODETYPE - if on node page node/%
   • term - if on term page taxonomy/term/%
   • term--VOCABULARY - if on term page taxonomy/term/%
5. Blocks
   • block
   • block--MODULE
   • block--MODULE--DELTA
   • view - if block is from Views module
   • view--VIEWNAME - if block is from Views module
   • view--VIEWNAME--DISPLAYID - if block is from Views module
   • menu - if block is from Menu module
   • menu--MENUNAME - if block is from Menu module
   • viewmode--VIEWMODE - if node is rendered on a page using custom VIEWMODE
   • viewmode--VIEWMODE--NODETYPE - if node is rendered on a page using custom VIEWMODE

Modifiers

Similarly to the Drupal's template suggestion mechanism there are modifiers for the basenames that allow loading page-specific or context-specific assets. E.g. for the path node/1 the modifies will be node and node-1. Using the basenames from the example above the asset name suggestions are (EXT is either css or js):

• node.EXT - no modifier used
• node-node.EXT - basename node and modifier node
• node-node-1.EXT
• node--NODETYPE.EXT
• node--NODETYPE-node.EXT
• node--NODETYPE-node-1.EXT

The above files if existing will be loaded from the configured scan directories.

Customisations

TBD