Is it possible to use Hugo mounts within `postcss.config.js`?

support
1

I have a module for katex which hosts a PostCSS plugin assets/postcss/katex.js. I want to load this module in the site’s postcss.config.js file, however, doing

const katex = require('./assets/postcss/katex')

gives

Error: Error building site: POSTCSS: failed to transform "site.css" (text/css): Error: Cannot find module './assets/postcss/katex'
Require stack:
- /home/subaru/GitHub/hugo-yoru/postcss.config.js
- /home/subaru/GitHub/web/node_modules/lilconfig/dist/index.js
- /home/subaru/GitHub/web/node_modules/postcss-load-config/src/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/subaru/GitHub/hugo-yoru/postcss.config.js:13:15)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/subaru/GitHub/hugo-yoru/postcss.config.js',
    '/home/subaru/GitHub/web/node_modules/lilconfig/dist/index.js',
    '/home/subaru/GitHub/web/node_modules/postcss-load-config/src/index.js'
  ]
}

How do I access Hugo mounts within the site’s PostCSS config? One way I thought of doing this is by using HUGO_CACHE environment variable, but I’m wondering if there’s something better.

2

In my experience it’s possible, but only if you keep it all within assets. So what I see in your sample is already right and should work, depending on how you mount it in. In worst case mount directly from filename to filename, not folder.

Also looking into assets/jsconfig.json might give clues on what goes wrong. If that file does not exist, then the mounts aren’t right yet.

Maybe post the config for your module mounts and how you call postcss.

I think the whole require/import thingy needs you to use Javascript Building but then it should be available in postcss too… I don’t know of any use case I have to look into right now, sorry.

PS: I don’t see katex.js in the error message you posted. Just in case… are you sure it’s about that?

3

@davidsneighbour Thanks for the reply. The error is in the first line. I quickly did a warnf to verify if the file is mounted properly, and it is indeed. I guess PostCSS is not aware of files mounted by Hugo.

Here’s my config modules:

module:
  imports:
    - path: github.com/UtkarshVerma/hugo-modules/bootstrap-v5
    - path: github.com/UtkarshVerma/hugo-modules/svg-icon-system
    - path: github.com/UtkarshVerma/hugo-modules/katex

Here is how I call postcss:

const purgeCSS = require('@fullhuman/postcss-purgecss')({
    content: ['./hugo_stats.json'],
    safelist: {
        standard: ['active', 'collapsing', 'modal-backdrop', 'show'],
        deep: [/^chroma$/],
    },
    defaultExtractor: (content) => {
        let elements = JSON.parse(content).htmlElements;
        return elements.tags.concat(elements.classes, elements.ids);
    }
});

const katex = require('./assets/postcss/katex')

module.exports = {
    plugins: [
        require('autoprefixer'),
        ...(process.env.HUGO_ENVIRONMENT === 'production'
            ? [purgeCSS, katex]
            : [])
    ]
}
4

Regarding a use case, one good use case is modularity. It would allow me to import a module in the config and load just load the custom postcss plugin (inside the module) directly.