Skip to navigation Skip to main content
These docs are for an upcoming version of Build Awesome and are subject to change—take extra care before linking here as URLs may change! Look to the latest stable docs instead (or the full release history).
Blog
Back Build Awesome Pro and make it easier to build for the web!
Versions
Stable
3.1.6
Canary
4.0.0-alpha.10

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

npm install lightningcss --save-dev to make the CSS minifier available in your project.

Configuration

Add the following cssmin filter to your Eleventy Config file:

eleventy.config.js
import { transform } from "lightningcss";

export default function ($config$) {
	$config.addFilter("cssmin", function (inputCode) {
		if (process.env.ELEVENTY_RUN_MODE === "build") {
			let { code } = transform({
				// filename: undefined,
				code: Buffer.from(inputCode),
				minify: true,
				sourceMap: false
			});
			return code;
		}

		return `/* [buildawesome] cssmin skipped during --watch and --serve */\n${inputCode}`;
	});
};

const { transform } = require("lightningcss");

module.exports = function ($config$) {
	$config.addFilter("cssmin", function (inputCode) {
		if (process.env.ELEVENTY_RUN_MODE === "build") {
			let { code } = transform({
				// filename: undefined,
				code: Buffer.from(inputCode),
				minify: true,
				sourceMap: false
			});
			return code;
		}

		return `/* [buildawesome] cssmin skipped during --watch and --serve */\n${inputCode}`;
	});
};

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

Warning about Content Security Policy

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.

Or: use an 11ty.js Template

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:

eleventy.config.js
import fs from "node:fs/promises";
import path from "node:path";
import { transform } from "lightningcss";

export default async function (data) {
	return `<style>
	  ${await fs
			.readFile(path.resolve(__dirname, "./sample.css"))
			.then(inputCode => {
				let { code } = transform({
					// filename: undefined,
					code: Buffer.from(inputCode),
					minify: true,
					sourceMap: false
				});

				return code;
			})}
	</style>`;
};

const fs = require("node:fs/promises");
const path = require("node:path");
const { transform } = require("lightningcss");

module.exports = async function (data) {
	return `<style>
	  ${await fs
			.readFile(path.resolve(__dirname, "./sample.css"))
			.then(inputCode => {
				let { code } = transform({
					// filename: undefined,
					code: Buffer.from(inputCode),
					minify: true,
					sourceMap: false
				});

				return code;
			})}
	</style>`;
};