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.
Based on the default output directory generated by Eleventy, _site, the UnCSS command is:
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
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:
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.