Eleventy The possum is Eleventy’s mascot

Eleventy Documentation

This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/quicktips/inline-css/) or the full release history.

Quick Tip #001—Inline Minified CSS

Originally posted on The Simplest Web Site That Could Possible Work Well on zachleat.com

This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for Critical CSS approaches.

Installation #

npm install clean-css to make the CSS minifier available in your project.

Configuration #

Add the following cssmin filter to your Eleventy Config file:

const CleanCSS = require("clean-css");
module.exports = function(eleventyConfig) {
eleventyConfig.addFilter("cssmin", function(code) {
return new CleanCSS({}).minify(code).styles;

Create your CSS File #

Add a sample CSS file to your _includes directory. Let’s call it sample.css.

body {
font-family: fantasy;

Capture and Minify #

Capture the CSS into a variable and run it through the filter (this sample is using Nunjucks syntax)

<!-- capture the CSS content as a Nunjucks variable -->
{% set css %}
{% include "sample.css" %}
{% endset %}
<!-- feed it through our cssmin filter to minify -->
{{ css | cssmin | safe }}

Warning about Content Security Policy #

If you are using a Content Security Policy on your website, make sure the style-src directive allows 'unsafe-inline'. Otherwise, your inline CSS will not load.