Quick Tip #001—Inline Minified CSS

• Related: Quick Tip #002—Inline Minified JavaScript

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

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

All Quick Tips

• Quick Tip #002—Inline Minified JavaScript
• Quick Tip #003—Add Edit on GitHub Links to All Pages