How to make PostCSS recognize Hugo Module imports?

support
, ,
1

I have written a custom PostCSS plugin which sits inside a Hugo module. Ideally, I would prefer to simply add the module in the config and have everything work. However, what I have noticed is that the postcss.config.js in the site can not access the module’s custom PostCSS plugin. I believe this is because Hugo modules are mounted in a virtual file system.

My use case is a neat KaTeX integration. I would like to pass the HTML files generated by Hugo to the plugin, at the end of the build (using resources.PostProcess) and have it inject Math symbols in the HTML files. I know it is a bit hacky to use postcss for this, but I really like the simplicity of this method.

1 Like
2

I’m sorry I can’t help you with your module problem. But I like your idea to use KaTeX directly on the server. This should speed up pages with a large amount of LaTeX.

3

Any ideas anyone?

I made a Hugo module for KaTeX which is here:

My final goal is to have postcss.config.js access files from the modules, [assets/postcss/katex.js] in this case. It only works if I copy the file and paste it in the theme directory.

Here is my postcss.config.js:

const purgeCSS = require("@fullhuman/postcss-purgecss")({
	content: ["./hugo_stats.json"],
	safelist: {
		standard: ["active", "collapsing", "modal-backdrop", "show"],
		deep: [/^chroma$/],
	},
	defaultExtractor: (content) => {
		const elements = JSON.parse(content).htmlElements;
		return elements.tags.concat(elements.classes, elements.ids);
	},
});

const katex = require("./assets/postcss/katex");

module.exports = {
	plugins: [
		require("autoprefixer"),
		...(process.env.HUGO_ENVIRONMENT === "production" ? [purgeCSS, katex] : []),
	],
};
1 Like