Regenerating assets directory for Hugo Pipes [solved]

support
1

v0.45/extended

Intro:

I’ve made an implementation of Tailwind CSS for Hugo Pipes, using PostCSS, along with a PostCSS plugin called PurgeCSS.

PurgeCSS removes everything from your CSS file that’s not referenced in your templates.

Tailwind is a utility-class CSS library that essentially allows you to just write small, single-purpose classes in your templates, and not necessarily write any CSS.

Note here I’m referring to the Hugo PostCSS implementation, not SASS/SCSS.

Issue:

Hugo Pipes appears to regenerate CSS files when the assets directory changes. This seems correct to me, yet,—because my CSS file only contains classes that are in my templates—if I add a new class, I need my CSS file to update when I change a file in my layouts directory.

Is it possible to initiate an update on a change in layouts/themes? Perhaps it would be a PostCSS-CLI option, where the --watch flag does the work here?

4 Likes
2

I was wondering about if it could be possible to implement Tailwind! Before Hugo Pipes was released, I build a test project using Laravel Mix with PurgeCSS and it works, but Hugo Pipes would mean a lot less dependencies I’m guessing.

3

I have no idea how your setup looks like, but there is obviously is a cache involved here, and there are some fairly simple rules for invalidation on reloads:

  • Pipes starting from a file with a suffix will flush all with that suffix on rebuilds
  • All others will always be flushed
  • A change to config.toml will do a full rebuild

The first may possibly be too fine grained, not sure… But that is what you have. So if you store your variables in the file that starts the pipe (or one with the same file suffix) it should work.

1 Like
4

So if you store your variables in the file that starts the pipe (or one with the same file suffix) it should work.

My issue is that I’m not updating any file in the pipe, I’m updating templates. But I’ll look closely at what you’ve posted here already. I have a minimal test case set up and may post that If I think it would be helpful.

thanks for the help!

5

I understand, but it should be possible to refactor this. Also have a look at the ExecuteAsTemplate func, which should be a nice way to store your variables.

6

Good to know, I’ll work on this. Thanks again

7

But are you running PurgeCSS at all moments, not only when building for production?

8

Right. I have a Webpack implementation where I only run Purge in production, but here I’m trying to keep one build

1 Like
9

Would love to see how you implemented all of this once you get it working

1 Like
10

@Randy_Lough Here’s the repo, though I’ve yet to figure out the issue: https://github.com/budparr/hugopipes-tailwindcss

5 Likes
11

Huge thank you @budparr! I’ve been trying to get Uncss to work as a PostCSS but kept failing. I decided to give purgecss a try after yours, it works beautifully (with some minor customization)!

Now just need to wait patiently for Netlify to enable the extended version of Hugo.

1 Like
12

I’ve updates my repo to reflect the workaround for this issue, which is to create a separate config file for development and production. https://github.com/budparr/hugopipes-tailwindcss

I’ll mark the issue as solved. Thanks everyone!

3 Likes
13

@budparr, this appears to be a solution only for PostCSS, is that correct? I’m a little lost here and wondering how this pertains to SCSS.

Have been really happy to move to Hugo Pipes in replace of Gulp for processing SCSS, but still having trouble to get the browser to reload and wondering if it’s possible.

Thanks.

14

Here’s the project I was talking about. :slight_smile:

Tailwindcss + custom css => purgecss => 5k gzipped file

2 Likes
16

That’s right. It’s specific to the postCSS config file, but also to the fact that those of us using utility class CSS (i.e. Tailwind) need to rebuild CSS when our HTML templates are updated to activate PurgeCSS. So it’s a niche within a niche problem :slight_smile: My solution is not perfect, but it works so far.

1 Like