Pipes, postCSS & postcss-import - how to keep filesystem context

support
1

I’m working on migrating as much of my Gulp based workflow onto Hugo pipes. To that end I’m converting my existing code to a new base theme (codes on github ).

I’m adding the main.css like so:

  {{ $postcssed := resources.Get "css/main.css" | postCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $postcssed.Permalink }}">

Which pulls the stylesheet in from assets and processes it. The problem is I like using postcss-import to keep css modular and postcss-import doesn’t seem to know where to look for imported stylesheets when run via hugo pipes.

Building sites … Error: Failed to find 'normalize.css'
in [/home/adrian/Admin/hugoBasicExample]
at resolveModule.catch.catch (/home/adrian/Admin/hugoBasicExample/themes/Pippy/node_modules/postcss-import/lib/resolve-id.js:35:13)

The import occurs at the start of main.css like so:

@import 'normalize.css';
@import 'vars.css';

It works if postcss-import is run via gulp or on the cli with postcss-cli like:

postcss "assets/css/main.css"  --verbose  -o "main-post.css"

postcss-import will search in the directory of the file passed to it by default and the imported stylesheets are sitting right there. So it seems that hugo postCSS is losing the context along the way, or at least not passing it on to postcss.

The postcss-cli docs describe using a function to pass context in postcss.config.js see here but trying that results in this error:

Building sites … TypeError: Cannot read property 'dirname' of undefined
at module.exports.ctx (/home/adrian/Admin/hugoBasicExample/themes/Pippy/postcss.config.js:4:40)
at config.load.then (/home/adrian/.npm-global/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js:62:18)

So it would seem that hugo postCSS isn’t passing or setting the context for that to work.

The only workaround I’ve found so far is to specify the @import with the full root filesystem path to the imported stylesheets. Not very portable.

So is there some feature I’m missing or is this pointing to an underlying bug/missing feature in hugo’s postCSS inclusion?

1 Like
2

Add the css assets path to the postcss-import config inside postcss.config.

  plugins: [
    require('postcss-import')({
      path: 'themes/pippy/assets/css'
    }),
1 Like
3

This is a great post from @regis:
Hugo Pipes Revolution

And this:
How to use Hugo template variables in SCSS files (in 2018)

4

@holehan Doesn’t work I’m afraid. Same error, cant find normalize.css

@Leo_Merkel it is a nice article, already had it open in a tab :wink:

1 Like
5

@adrinux Hm, I cloned your theme and tested it myself before posting. In fact your latest commit fixes it. Hugo builds my own site with your theme just fine:

screenshot_89
screenshot_89.png439×747 29.4 KB

6

@holehan ^^ and yet doesn’t work for me :frowning:

Now to figure out why!

Thanks for the suggestion looks like it works in principle then.
fwiw I’m running it in the hugo basic example site whilst developing.

7

@adrinux Said example site builds here with the pippy theme too :thinking:

8

@holehan Thanks. Which hugo version?

9

@adrinux
Hugo Static Site Generator v0.50/extended darwin/amd64 BuildDate: unknown
GOOS=“darwin”
GOARCH=“amd64”
GOVERSION=“go1.11.1”
node v10.13.0

10

@holehan thanks again. I’m using 0.52-DEV compiled this morning - possibly not extended version though. Will recompile.

11

Well that made no difference.
Also:
Tried reverting to v0.50/extended.
Tried removing and reinstalling node_modules

12

@holehan sorry. How did install node modules, postcss-cli and those used by the theme. Which ones installed globally and which ones local?

13

@adrinux I just did npm i in the theme folder and installed postcss-cli globally. I couldn’t reproduce your error on another architecture (aarch64) so I guess there’s something up with your setup.

14

@holehan Thanks. I have postcss-cli installed globally and the rest locally. I think the only difference I see now is you’re on OSX and I’m using Ubuntu.

Time for a break. Thanks for all your help.

15

@adrinux I think I got it. Make sure the theme path is correct - watch out for Pippy vs. pippy.

1 Like
16

@holehan I just noticed that difference after trying and succeeding on my other Ubuntu box - will change folder name on the broken one.

17

@holehan That’s it! Thanks for all the help. What a silly mistake.

So no capitalized theme names then?

18

@holehan So which response deserves the ‘solved’ mark the name change or the addition of path to postcss.config.js? I’m thinking the latter.

19

@adrinux The addition of the path.

btw you could just capitalize the path in the postcss config. It’s working either way as long as one’s case sensitive. I am glad it works now!

1 Like
20

Hey, I’m late to the party.

No need to hardcode the path to your themes asset folder. Which by the way would break if you change the theme name.

Take use of Node’s build in module __dirname.

Given the following folder structure:

my-site
  ├ ... // some other folder
  └ themes
    └ pippy
      └ postcss.config.js

use the module directly:


plugins: [        
    require('postcss-import')({
        path: __dirname + '/assets/css'
    }),

or use a helper variable:

const themeDir = __dirname; // results to path-to/my-site/themes/pippy

module.exports = {    
    plugins: [        
        require('postcss-import')({
            path: themeDir + '/assets/css'
            })
    ]
}
1 Like