# PurgeCSS and highlighting

**URL:** <https://discourse.gohugo.io/t/purgecss-and-highlighting/41021>\
**Category:** support\
**Tags:** highlight, purgecss\
**Created:** [October 20, 2022, 2:44pm UTC](https://discourse.gohugo.io/t/purgecss-and-highlighting/41021 "2022-10-20T14:44:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [October 20, 2022, 2:44pm UTC](https://discourse.gohugo.io/t/purgecss-and-highlighting/41021/1 "2022-10-20T14:44:16Z")

</div>

I am configuring my PurgeCSS via PostCSS setup, as described [in its Hugo-focused documentation](https://purgecss.com/guides/hugo.html), 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:

```nohighlight
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).

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [October 20, 2022, 2:51pm UTC](https://discourse.gohugo.io/t/purgecss-and-highlighting/41021/2 "2022-10-20T14:51:55Z")

</div>

[https://github.com/gohugoio/hugo/issues/10338](https://github.com/gohugoio/hugo/issues/10338)

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [October 20, 2022, 3:34pm UTC](https://discourse.gohugo.io/t/purgecss-and-highlighting/41021/3 "2022-10-20T15:34:54Z")

</div>

Here’s my current workaround:

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

```

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 22, 2022, 3:35pm UTC](https://discourse.gohugo.io/t/purgecss-and-highlighting/41021/4 "2022-10-22T15:35:51Z")

</div>

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