Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.13
Toggle Menu
Eleventy 5.81s
Remix 40.14s

Quick Tip: Inline Minified CSS

Originally posted on The Simplest Web Site That Could Possibly 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 Jump to heading

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

Configuration Jump to heading

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 Jump to heading

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

body {
font-family: fantasy;
}

Capture and Minify Jump to heading

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 -->
<style>
{{ css | cssmin | safe }}
</style>

Using JavaScript templates Jump to heading

Contributed by Zach Green

You can also inline minified CSS in a JavaScript template. This technique does not use filters, and instead uses async functions:

const fs = require("fs/promises");
const path = require("path");
const CleanCSS = require("clean-css");

module.exports = async () => `
<style>
${await fs
.readFile(path.resolve(__dirname, "./sample.css"))
.then((data) => new CleanCSS().minify(data).styles)}

</style>
`
;

Warning about Content Security Policy Jump to heading

WARNING:
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.