- 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
nomodule pattern for differential serving.
babelfor transpiling to ES5 where necessary
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
- 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
Dev mode with Live Reload and Source MapsPermalink to heading 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
There are also Source Maps to ease understanding of the styles origin.
You can watch this hilarious video by Heydon Pickering, about ES modules, for a few minutes of fun. ↩︎