Shaking Bulma.css with UnCSS in Eleventy

Shaking Bulma.css with UnCSS in Eleventy

Our user facing website currently uses Bulma.css as the CSS framework. As part of our making sure the pages load as fast as possible, we want to ensure that only the subset of the framework actually referenced is fetched.

To make this task easier, Bulma provides multiple SASS files, one can include just the features desired. However, to truly optimize the inclusion of CSS to the minimal needed, there are tools which examine the content of HTML files to compute the set of CSS rules actually used, and synthesize a new file with just those rules. There are a number of JavaScript / NodeJS tools which subset / optimize the inclusion of CSS. After trying out a couple, we decided to use UnCSS.

Based on the default output directory generated by Eleventy, _site, the UnCSS command is:

uncss _site/index.html _site/*/index.html -H _site -C _site/assets/css

We needed to figure out a couple of edge cases. The primary issue we needed to resolve was regarding dynamic addition of CSS styles on HTML elements. Bulma is pure CSS, there is no JavaScript in the framework. Except for one particular scenario. The responsive navigation bar used on smaller screen sizes recommends use of small chunk of JavaScript to detect click on the hamburger menu, and to display the drop down navigation. This JavaScript fragment dynamically adds the 'active' CSS style to some elements. UnCSS does not detect this without some help, and drops .active styles.

To prevent the deletion of the needed CSS rules, we had to actually read the documentation! And found it to be less than satisfactory. In particular, the author is using 'ignore' in multiple options, in contradictory ways. In this case, ignore should have been named 'keep' or 'preserve'. The option we needed was --ignore or -i:

-i '/.navbar-menu.is-active/,/.navbar-burger.*/'

By default, UnCSS combines various referenced CSS files into one, and leaves useful comments denoting which file(s) the content is pulled from, e.g. /*** uncss> filename: _site/assets/css/custom-bulma.css ***/. We did not want CSS used on just a couple of pages on the combined CSS file. The option to do this is '--ignoreSheets'. In this case, 'ignore' meant skip, as opposed to keep, as in the previously discussed option. The option looked like:

-S /timeline.css/ 

The full command line, which became part of our build pipeline, was:

uncss _site/index.html _site/*/index.html
    -H _site
    -C _site/assets/css
    -S /timeline.css/
    -i '/.navbar-menu.is-active/,/.navbar-burger.*/'
> smaller.css

The result in Lighthouse:

The result in Webpagetest:

In the current development methodology of Google search / copy / paste / adapt, hope this recipe saves somebody a few minutes.

← Home