CSS purge does not work, any recommendations on how I can debug?

support
1

I am building a simple theme for blogging and project showcasing called breathe (https://github.com/BharatKalluri/breathe). It uses tailwind css as the css framework and purging is mandatory since tailwind without purging unused css is around 4MB.

I have copied all the setup from bep’s hugo-starter-tailwind-basic (https://github.com/bep/hugo-starter-tailwind-basic) repo and looks like I am doing the same thing. But for some reason, when I do

cd exampleSite && hugo --theme=../..

The css file is still around 3.7mb. Clearly I am doing something wrong in the theme. How do I debug why postcss is failing to purge unused styles?

2
  • Check if you have the module well loaded with hugo mod graph
  • Check your config
[build]
  writeStats = true

and

{{- $options := (dict "inlineImports" true) }}
{{- $styles := resources.Get "mycsstobepurged.css" }}
{{- $styles = $styles | resources.PostCSS $options | resources.PostProcess }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" type="text/css" media="screen">

And if the purge is too agressive, you have to add some options to tailwind.config.js.

For example my setup for bootstrap and aos:

options: {
         //whitelist: [ 'pl-1', 'pl-3' ],
         whitelistPatterns: [
            // pour AOS plugin (Tested OK)
            /data-aos/,
            /data-aos^/,
            /^fade/,
            /^flip/,
            /^aos/,
            // pour bootstrap (Tested OK)
            /^btn-/,
         ],
2 Likes
3

Thanks for the reply!

I do see breathe (which is the theme) as a module from examplesite

Done

After cloning git@github.com:BharatKalluri/breathe.git and running

cd exampleSite
hugo --gc --theme=../..

I am facing a new error,

Start building sites … 
Total in 38 ms
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): resource "css/css/styles.css_2a8709d836a7705956d6e18ae3e69519" not found in file cache

{{ $styles := resources.Get "css/styles.css" }}

As far as I understand, resources.Get is relative to the assets directory in the theme, right? I am not sure why this does not work. Since I had a duplicate /css I decided to remove the css/ prefix in resources.Get just to experiment. Now I encountered a new error

Start building sites … 
ERROR 2020/11/22 09:27:38 render of "page" failed: execute of template failed: template: _default/single.html:3:7: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/home/bharatkalluri/Projects/breathe/layouts/partials/head.html:28:37": execute of template failed: template: partials/head.html:28:37: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
ERROR 2020/11/22 09:27:38 render of "home" failed: execute of template failed: template: index.html:3:7: executing "index.html" at <partial "head.html" .>: error calling partial: "/home/bharatkalluri/Projects/breathe/layouts/partials/head.html:28:37": execute of template failed: template: partials/head.html:28:37: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
ERROR 2020/11/22 09:27:38 render of "page" failed: execute of template failed: template: _default/single.html:3:7: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/home/bharatkalluri/Projects/breathe/layouts/partials/head.html:28:37": execute of template failed: template: partials/head.html:28:37: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
ERROR 2020/11/22 09:27:38 render of "page" failed: execute of template failed: template: _default/single.html:3:7: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/home/bharatkalluri/Projects/breathe/layouts/partials/head.html:28:37": execute of template failed: template: partials/head.html:28:37: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation
Total in 34 ms
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:3:7: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "/home/bharatkalluri/Projects/breathe/layouts/partials/head.html:28:37": execute of template failed: template: partials/head.html:28:37: executing "partials/head.html" at <resources.PostCSS>: error calling PostCSS: no Resource provided in transformation

The error says no resource provided in transformation. I have the css file in /assets/css/styles.css right in the root of the theme dir. What am I missing?

4

Nope.

I do not see any use of Bep’s module (not as a module, or not as a theme). I think your theme is not using it.

You have to exactly follow Bep’s directives.

1 - Add this in you config.toml

[module]
[[module.imports]]
    path = "github.com/bep/hugo-starter-tailwind-basic"

2 - Remove those files (they are in Bep’s module):

  • postcss.config.js
  • tailwind.config.js
5

Then this show that you do not have Bep’s module loaded (see previous post)

6

Added, now my config.toml contents of the theme are

baseURL = "https://example.org"

disableKinds = ["page", "section", "taxonomy", "term"]


[build]
  # Used by PurgeCSS
  writeStats = true

[module]
  path = "github.com/bep/hugo-starter-tailwind-basic"

Tried updating modules

breathe git:master ❯ hugo mod get -u ./...                                                                                                                                  ✖ ✹ ✚ ✭
Update module in /home/bharatkalluri/Projects/breathe
Update module in /home/bharatkalluri/Projects/breathe/themes/hugo-starter-tailwind-basic
breathe git:master ❯ hugo mod graph --themesDir=../.. --source exampleSite                                                                                                  ✖ ✹ ✚ ✭
project breathe

Looks like the module is not present, not sure why.
And when I run the example site, I still have the same error (As you were mentioning earlier, this is because of the module is not added)

breathe git:master ❯ hugo --gc --theme=../.. --source exampleSite                                                                                                           ✖ ✹ ✚ ✭
Start building sites … 
Total in 60 ms
Error: Error building site: POSTCSS: failed to transform "css/styles.css" (text/css): resource "css/css/styles.css_2a8709d836a7705956d6e18ae3e69519" not found in file cache

On a side note, I copied the setup (file structure, important pieces) from bep’s repo. Not essentially the module. The idea I had was to use that as a reference and migrate/work on my repo. Thereby learning how post processing and pipes work in hugo. If you could help me understand how assets and post processing works in hugo by answering questions in the first reply I gave to our conversation above, That would be really helpful :smiley:

7

First you have to install Bep’s module correctly.

You miss the [[module.imports]] directive. Please check module documentation.

Unless hugo mod graph reports Bep’s module use, trying anything else is useless.

And use config.toml from your theme.

8

This is not how Bep’s module works. You have to follow exact documentation.

If you want to borrow code, then it is a different matter, but at least try to mimic the whole code and not just copy bits. It will not work partially

9

Thanks for taking out time to reply.

I will read the documentation further and figure it out.