Best practices for PostCSS generation

support
1

I am a theme creator and I created a theme usingPostCSS and tailwind. And according to my understanding, users of my theme may need to use npm to install all the components that tailwind needs.

But this will bring inconvenience to users. Especially for users who don’t have npm.
And for most users, they don’t need to modify the css file. If I can directly generate the css file and provide it to the user, they can save a lot of energy.

The way I think about it now is to add the final generated css file to the theme. Is there a best practice to solve this problem?

2

Not a real response to your question, but I think you can use modules (see Bep’s tailwind module & hugo mod npm pack) and then use hugo mod vendor.

So everything (code wise) will be provided by the theme.

[EDIT] I think I remember vaguely Bep talking about using modules for providing CSS, but I never tried this.

3

You would still need npm installed for that. What hugo mod npm pack does is that it looks through your modules and creates a consolidated package.json file with the dependencies.

4

To me it seems like you have to commit a built CSS file to your repo (but this will not work well with something like PurgeCSS).

One option would be to use a specific environment for those users who do not have npm and load Tailwind via CDN, but there are many downsides to that as well.

You can also just build the site in the cloud (Netlify or Github Actions) for instance.

5

My understanding (but I should be wrong) is that using modules plus both hugo mod npm pack plus hugo mod vendor will avoid to have npm installed for theme user (only needed for you, the creator).

But I should be wrong.

6

hugo mod vendor saves the Hugo module locally in your site directory, it does not do any dependency management. If you are using PostCSS to build the CSS file of your theme, you would still need to have that installed (and other npm dependencies such as tailwind).

7

OK. My bad. Sorry for the wrong advice

8

As a side note, this is the post I was thinking about.

9

Then you would need to have a compiled CSS file in the repo, but this would not work if using PostCSS in Hugo as you need to have PostCSS installed.

10

Thank you so much for your help :stuck_out_tongue_closed_eyes:I take the opportunity to learn a lot about hugo modules

11

I am thinking about checking the generated css file first. If exists, I will just use this file and use PostCSS if it does not exist. I think this may solve the problem? And I am also wondering if it is a best practice for this case.

12

You can also commit the content of /resources/_gen/something

1 Like
13

Also see https://github.com/gohugoio/hugoThemes#resources

14

Do you mean the style.css_fingerprint.content and style.css_fingerprint.json?

I have commited those files. But if the user does not use npm install to install modules, user will get error like Error: Cannot find module 'xxx'. And my code to import css is like this:

{{ $my_css := resources.Get "css/eureka.css" | postCSS (dict "config" "./assets/css/postcss.config.js") }}
{{ $my_css := $eureka_css | minify }}
<link rel="stylesheet" href="{{ $my_css.Permalink }}">

Is there any problem with these code？And I’m looking for a way for people who do not have/like npm to use my theme.

1 Like
15

Those names doesn’t match particulary well with your template code you posted. But the gist of that is correct. There is some more info here:

Beyond that I don’t think I’m able to guess-help you anymore without seeing the actual project.

16

I find that if I use useResourceCacheWhen = "always", it can perform well. But fallback does not.

In my understanding, fallback use cache when the build falls (do not have extended version, modules for PoatCSS, etc.)? But when I use fallback, I just get those normal errors like: Error: Cannot find module 'xxx' and it seems that the cache has not been used.