Inline PostCSS generated CSS with Eleventy


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

async code => {

// for relative path CSS imports
const filepath = path.join(

return await postcss([
// PostCSS plugins
{ 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

<!-- ... -->
{% postcss %}
{% include critical-path.css %}
{% endpostcss %}
<!-- ... -->

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.