Inline PostCSS generated CSS with Eleventy

2020-03-15

Inlining CSS is a common practice for optimizing the critical rendering path. Once you've analyzed and factored out styles blocking rendering, you'll likely want build time enhancements provided by tooling like PostCSS, before inlining.

Eleventy shortcode

Eleventy can extend the static site generation with definitions for reusable content. You can utilize this capability to generate your web's critical path CSS. Configure 11ty with an universal template shortcode for processing render blocking styles.

PostCSS shortcode

js
eleventyConfig.addPairedShortcode(
"postcss",
async code => {

// for relative path CSS imports
const filepath = path.join(
__dirname,
"src/_includes/critical-path.css");

return await postcss([
// PostCSS plugins
require("postcss-import"),
require("precss"),
require("autoprefixer"),
require("cssnano")
]).process(
code,
{ from: filepath })
.then(result => result.css);
});

The above shortcode configures PostCSS to process files imported to an entry point, for which vendor prefix are generated, and finally minified.

Inline styles

The shortcode is available to be referenced in a page layout, and fed the critical rendering path CSS. An entry file is specified, which in turn enables inlining of required component styles with the @import directive.

Shortcode in page layout

liquid
<html>
<head>
<!-- ... -->
<style>
{% postcss %}
{% include critical-path.css %}
{% endpostcss %}
</style>
</head>
<!-- ... -->
</html>

Template shortcodes can be used for definitions of styles for specific pages or for inlining all CSS. What granularity you aim for, mostly becomes a matter of prioritizing maintainability or performance requirements.