PostCSS with main.css located in theme

Hey,

I just read the release notes (https://gohugo.io/news/0.69.0-relnotes/) and was excited to try out CSS purging.

I set everything up and it works on my customCSS. But if if I try to do it for the main.css like this:

	{{ $css := resources.Get "css/main.css" }}
	{{ $style := $css | resources.PostCSS }}
	a: {{ $style }}

It just tells me:

error calling PostCSS: type <nil> not supported in Resource transformations

I’m assuming that’s because $css is actually nil, I confirmed this by printing it. I don’t have a “main.css” in my static folder as it’s coming from my theme:

ls themes/hugo-ink/static/css
dark.css      main.css      normalize.css

Am I supposed to do a resources.Get "themes/hugo-ink/static/css/main.css" or something else? I don’t really want to copy the whole file into my normal static directory as then every time I’m updating the theme from upstream I would have to repeat this step. I thought that by using PostCSS this is actually done after the step where Hugo copies everything into the public folder that didn’t get overwritten by my own files in the blog root.

Is there something I’m doing wrong in approaching that?

Thanks!

Read more on Hugo Pipes.

You need to put your assets (css) inside assets directory.

I set assetDir: "static" in my config file so that resources.Get can for example find my customCSS which is in /static/css/theme-custom.css by using the following which works:

{{ $css := resources.Get .Site.Params.customCSS }}

What I’m trying to avoid is:

  • Changing anything in themes/hugo-ink as this is a git submodule and I’d like to be able to update it from upstream easily
  • Copying themes/hugo-ink/static/css/main.css to /static/css/main.css so it would get picked up by resources.Get and it would work like it does for customCSS right now

Your solution would mean that I have to copy the main.css from the theme every time I’m updating it from upstream (to either /assets/ or my /static/css/ directory. I don’t want to do that.

Is there a way to accomplish that?

I haven’t tested this, but this will probably work. You could create a symlink from

/path/to/your/site/assets/

which points to

/path/to/your/site/themes/hugo-ink/static/

Then whenever you update the submodule, the link should still work since the folder wouldn’t change, and you could leave the assetDir pointing to the default location.

That would probably work too, I could also just have it copy the theme css folder into my css folder but I was more hoping for a more elegant solution.

Isn’t that the main use case to strip unused CSS from the theme’s CSS (that’s maybe based on some CSS framework even) that comes with a lot of extra weight that’s maybe not used.

I believe this problem can be solved easily using Hugo Modules, but because i’m still learning this new feature, I can’t really give correct answer. and you need Golang installed for working with Hugo Modules.

But i think, we can use module.mounts (no need golang installed) to fix this. (just rough idea, not tested it yet)

  1. change the hugo-ink git submodule location to other directory as long is not themes directory.

lets say you clone it to:

/your-hugo-project
  - my-theme/
   - hugo-ink
  1. Configure module.mounts to mount hugo-ink/static into to assets
[module]

 # Mount `hugo-ink/static` content to `assets`
  [[module.mounts]]
    source = "my-theme/hugo-ink/static"
    target = "assets/hugo-ink"

  [[module.mounts]]
    source = "assets"
    target = "assets"

  [[module.mounts]]
    source = "content"
    target = "content"

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "layouts"
    target = "layouts"

  [[module.mounts]]
    source = "data"
    target = "data"

  [[module.mounts]]
    source = "i18n"
    target = "i18n"

  [[module.mounts]]
    source = "archetypes"
    target = "archetypes"