CSS and JavaScript assets

Both CSS and JavaScript are split (manually) in two parts:

  • one critical for performance is included inline in all HTML pages
  • one additional, less important for performance, is loaded in the end of the HTML, with a hash to prevent caching issues

JavaScript

Additional JavaScript is loaded as ECMAScript module in modern browsers, and as Immediately Invoked Function Expression (IIFE) in older ones, using the module/nomodule pattern for [differential serving](https://css-tricks.com/differential-serving/.

JavaScript is compiled with Rollup, with a few plugins:

  • babel for transpiling to ES5 where necessary
  • terser for minification

CSS

CSS is compiled from Sass code with Dart Sass CLI.

For production build, CSS is then processed with a few PostCSS plugins:

  • autoprefixer adds vendor prefixes to some rules, depending on targeted browsers. See the /.browserslistrc file.
  • cssnano "runs the CSS through many focused optimisations, to ensure that the final result is as small as possible for a production environment".
  • postcss-hash then creates copies of the CSS files with hashed filenames, for cache busting.

Pack11ty previously used postcss and a few plugins to generate CSS, but it was not as complete as full Sass, and the npm scripts were a mess. It then used Rollup and Sass, which was not ideal because critical and additional CSS were tied to their JavaScript counterparts.

Dev mode with Live Reload and Source Maps

In development mode, when Sass code is modified, the resulting CSS is automatically updated in the browser with Eleventy's browsersync instance.

The same behavior for JavaScript is still WIP.

There are also Source Maps to ease understanding of the styles origin.