Change call order of compileOptions.permalink and compile to support MD5 hash in permalink

[danburzo]

A common task is to add cache-busting hashes to asset filenames, such as requested here:

• How to modify outputPath via Template / Transform #2494

This could work well with config.addExtension() as it has all the necessary ingredients (as @zachleat mentions in his answer to the aforementioned discussion), but the processing order seems to make it impossible to pass things from .compile() to .compileOptions.permalink().

Here is a sample Eleventy config, based on the documentation, where I try to add MD5 hashing in the output filename for SCSS files:

const path = require("node:path");
const crypto = require('node:crypto');

function getHash(content, length = 10) {
	const hash = crypto.createHash('md5');
	hash.update(content);
	return hash.digest('hex').substr(0, length);
}

/* SASS support */
const scss_hashes = {};

config.addTemplateFormats('scss');
config.addExtension('scss', {
	outputFileExtension: "css",
	getData: inputPath => ({ _md5: scss_hashes[inputPath] }),
	compileOptions: {
		cache: false,
		permalink: function(permalink, inputPath) {
			if (path.basename(inputPath).startsWith("_")) {
				return false;
			}
			return data => {
				const { filePathStem, outputFileExtension } = data.page;
				return filePathStem + data._md5 + `.${outputFileExtension}`; 
			};
		}
	},
	compile: function(content, inputPath) {
		const result = sass.compileString(content, {
			loadPaths: [
				path.dirname(inputPath) || '.',
				this.config.dir.includes
			]
		});
		scss_hashes[inputPath] = getHash(content);
		return data => result.css;
	}
});

But compile() doesn't have a chance to populate the _md5 data property by the time permalink needs it.

Would it make sense to execute compile() before permalink()? It would probably open up a few other use-cases.

[danburzo]

A possible workaround involves processing the SCSS file at the getData() level:

config.addTemplateFormats('scss');
config.addExtension('scss', {
	read: false,
	getData: async function(inputPath) {
		const { css } = sass.compile(inputPath);
		return {
			_content: css,
			_hash: getHash(css)
		};
	},
	compileOptions: {
		permalink: function(permalink, inputPath) {
			if (path.basename(inputPath).startsWith("_")) {
				return false;
			}
			return data => `${data.page.filePathStem}.${data._hash}.css`;
		}
	},
	compile: () => data => data._content
});