Using PurgeCSS (From Scratch)

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.

10 Likes

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

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

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.

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

1 Like

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

2 Likes