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

ESM CommonJS

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

ESM CommonJS

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>`;
};