Using PurgeCSS (From Scratch)

tips & tricks
1

I recently added PurgeCSS to a few of my repos. I followed the docs and it worked out swell. (Yes, I’m still catching up to all the new Hugo features :slightly_smiling_face:).

But, in case less savvy users wanted to give it try, I wrote a small “from scratch” tutorial that holds your hand along the way.

Feedback welcomed.

11 Likes
2

Thanks for that. I’d like to suggest that you add (time permitting, of course) a section on manually excluding elements/ids/classnames from the purge.

Rationale: There are JS libraries out there that add class names to HTML elements at run time, i.e. after the HTML has been generated. Those classnames would be included in the purge by default (since they seem not to be used), which makes the site behave unexpectedly at run time.

1 Like
4

@tut works for me; either temporary or something on your end.

5

Maybe reading the purgecss docs helps :wink: hint: there is a config parameter that whitelists classes.

interface UserDefinedOptions {
  content: Array<string | RawContent>;
  css: Array<string | RawCSS>;
  defaultExtractor?: ExtractorFunction;
  extractors?: Array<Extractors>;
  fontFace?: boolean;
  keyframes?: boolean;
  output?: string;
  rejected?: boolean;
  rejectedCss?: boolean;
  stdin?: boolean;
  stdout?: boolean;
  variables?: boolean;
  safelist?: UserDefinedSafelist;
  blocklist?: StringRegExpArray;
}

There is much more useful stuff under the hood.

6

Thanks. I’m aware of that. I was suggesting to the OP that they might want to add this to their explanation.

1 Like
8

@chrillek - I like the idea. It’s updated.

2 Likes
9

Ok, I’m using this on Netlify and Render too. Works like a charm.
What about cases when sites are served using S3? So, just static files already rendered with a simple hugo command replicated to various servers? I can’t find a solution to this

10

I don’t know of a solution for that specific situation.

But what is keeping you from building the site (with hugo + purgecss) before serving it from S3 ?

11

I assume this depends on the postcss.config.js. My current is from PurgeCSS Hugo guide and basically do not help for this.

12

What is your question?