PurgeCSS and highlighting

support
,
1

I am configuring my PurgeCSS via PostCSS setup, as described in its Hugo-focused documentation, and ran into an interesting issue. It appears that Hugo does NOT add classes that are created using highlighted code. .chroma and .highlight are appearing in hugo_stats.json, but not classes like ln, c, px etc. All the subclasses are ignored and PurgeCss thus purges these classes and breaks the highlighting code.

My current manual solution is using a safelist:

purgecss({
	content: ['./hugo_stats.json'],
	safelist: {
		greedy: [/highlight/, /chroma/]
	},
	defaultExtractor: content => {
		const els = JSON.parse(content).htmlElements;
		return [
			...(els.tags || []),
			...(els.classes || []),
			...(els.ids || []),
		];
	}
}),

Disadvantage: it will keep ALL highlighting CSS (also the unused parts).

Another “easy fix” would be to set noClasses = true in [markup.highlight] which will lead to no classes being used and inline style-attributes instead being used, which, let’s be honest, is not very desirable. (It also breaks potential safety audits that deem unsafe-inline CSS, ehm, unsafe, and disallow it via CSP.)

Long story short. My question: is this a bug/oversight/something that can be fixed or one of the things we have to live with due to the way the pipes work? Maybe there is an obvious solution/method that evaded me?

Note: I tried adding 'public/**/*.html' to the content parameter and running Hugo with --renderToDisk, but that breaks the server start with (potentially) unrelated issues in the generated code (too much work to find out right now, it’s a weird “can’t parse JSON at position 0” error).

2

https://github.com/gohugoio/hugo/issues/10338

3

Here’s my current workaround:

/* purgecss start ignore */
@import "chroma.css";
@import "chroma_dark.css";
/* purgecss end ignore */
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.