SASS Filter & HTMLNano Transform in Eleventy

OLD (UTC)

  1. page.date => Sat Apr 02 2022 20:34:05 GMT+0530 (India Standard Time)
  2. dateToISO => 2022-04-02T15:04:05.212
  3. dateToFormat('yyyy-LL-dd') => 2022-04-02

NEW (IST)

  1. page.date => Tue Dec 02 2025 17:50:40 GMT+0000 (Coordinated Universal Time)
  2. dateToISO => 2025-12-02T23:20:40.787
  3. dateToFormat('yyyy-LL-dd') => 2025-12-02

Story

I was using a mailto: email link at Kalc Tools Contact page to let visitors contact me (it was just forwarding emails to my personal gmail using an alias in Cloudflare DNS) but I wanted a proper contact form and don't want to mess around with any external services.

I was missing the feature rich ecosystem of Netlify including its form submission with captcha verification. After some time I thought to just make the contact form hosted on netlify and iframed it in the contact page and use postMessage to dynamically adjust the height of iframe as the <textarea> grows or window resizes.

In the making of the project I planned to inlined compiled SCSS & JS (a very simple task !), thus making a single http request. But being only a "frontend" JavaScript developer for over a year I always get into trouble, after some hours of try & error I finally figured out the solution:

SASS Filter

I saw this example of making a css minification filter on 11ty docs.

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

Then after viewing SASS documentation couple of times I found the solution:

// .eleventy.js
const sass = require("sass");
module.exports = function (eleventyConfig) {
	eleventyConfig.addFilter("sass", code => {
		return sass.compileString(code).css.toString();
	});

	...
}

Usage:

{% set style1 %}{% include "./style.scss" %}{% endset %}
<style>
	{{ style1 | sass | safe }}
</style>
{% endraw -%}
⚠ Warning, Don't use this filter if...

Don't use this filter if you have multiple pages with inlined SCSS, as it will increase the build time.

Instead you can make a separate folder for SCSS files, keeping same folder structure like pages (for discoverability), compiling them before running 11ty (with gulp, npm scripts or anything else) and making reference to the compiles CSS files in your pages {% raw %}`{% include "complied/css/page1.css" %}`{% endraw %} tags.

HTMLNano Transform

I was using html-minifier-terser to minify HTML only in prodcution but just thought to use htmlnano in this project.

const htmlnano = require("htmlnano");
const options = {
	...
}

module.exports = function (eleventyConfig) {
	...

	eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
		return htmlnano.process(content, options).then(result => { return result.html }).catch(err => { console.error(err) });
	});

	...
}

Note that in order to minify HTML along with inlined CSS & JS you have to install cssnano(& postcss) & terser separately.

If it helps you then share it or re/tweet it (or just give me a backlink :) ).