resources.PostCSS custom config not working

support
1

I currently have a postcss.config.js file in the root of my website, and the resource.PostCSS pipe seems to default to using that, which is great. But i really want to use a different config for when i’m developing locally.

Thus i’m using the enviorment variable that hugo automatically sets when using hugo server, to point to a different config using the option config.

{{ $cssTargetPath := "dist/styles.min.css" }}
{{ $sassOptions := (dict "targetPath" $cssTargetPath "outputStyle" "expanded") }}

{{ if eq hugo.Environment "development" }}
    {{ $styles := resources.Get "sass/styles.scss" | resources.ToCSS $sassOptions | resources.PostCSS (dict "config" "postcss-dev.config.js") }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}">
{{ else }}
    {{ $styles := resources.Get "sass/styles.scss" | resources.ToCSS $sassOptions | resources.PostCSS (dict "config" "postcss-prod.config.js") }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}">
{{ end }}

Note the different PostCSS config in the two code blocks. I’m trying to just have two configs, one for dev and one for prod. The files are located in the root of the website. Hugo seems to ignore those configs completly, and not using any config for postCSS when i’m doing it like this. If i rename one to be postcss.config.js both steps will use that file - but thats obvious not what i’m trying to achieve.

I’m not sure what i’m doing incorrectly, as i’m following the documentation as best i can.

I hope someone can point me to a solution.

2

Is there any repo we could clone so we could try to reproduce this?

BTW I used to have two postcss configs for dev and production, but eventually didn’t want to maintain two separate files with mostly identical content (keep it DRY). I am now checking within the posctss config which environment is used and set options accordingly:

Start the hugo server in dev mode with

env HUGO_ENV=development hugo server

postcss.config.js

const development = process.env.HUGO_ENV === 'development';

module.exports = {
  parser: postcss,
  map: development ? { inline: true } : false,
  ...
1 Like
3

Unfortunately i cannot share the repo.

But as you mentioned your self, the two files are looking much the same.
I will try a similar approach, and access the environment variable inside the postcss.config.js file instead.

Cheers.

4

Has to be named postcss.config.js

so, you’ll need to have one of them in a different directory so you change the path instead of the filename.

p.s. for more information on the file name, search issues in the postcss CLI repo.

5

It has to be named that? Odd, the documentation doesn’t specify it, and their example it’s named something odd as well.

I tried having it in a different folder (in assets) and referenced the path from there. Still, it only used the one named postcss.config.jsthat was in the root. It seems to be ignoring the option dict("config" "assets/postcss-prod.config.js" or dict("config" "postcss-prod.config.js"

Update:
I just tried renaming it postcss.config.js and in the assets folder. That seemed to be working.

Running hugo uses the postcss.config.js in the root, and hugo -e development uses assets/devconfig/postcss.config.js now. Odd, the documentation should be updated to state that it HAS to be named postcss.config.jsIMO.

6

RE: config file name

Here’s where I’ve used it with different paths: https://github.com/budparr/hugopipes-tailwindcss/blob/master/layouts/_default/baseof.html

and here’s where I’ve used it with only one config file, using environment variable in the config.