Hugo

[SOLVED] No sourcemap with PostCSS (0.46)

I’m trying to use sourcemaps, but can’t find a way to output them. I’m only using PostCSS, not Sass.
I tried to set noMap to false:

{{ $styles := resources.Get "css/main.css" | resources.PostCSS (dict "noMap" false) }}

with no result. Is this possible?

I don’t think so.

Thanks! Is there a reason why it is only available for Sass? Or is it just because a need for it hasn’t emerged yet?

Time/priorities. I can add that if the implementation had been really simple/obvious, I would probably have added it while I was adding general PostCSS support. But it wasn’t, and I didn’t need it.

Makes sense.
In my npm/PostCSS config, sourcemaps were just a matter of setting map: true. But I have no idea what Hugo needs.
Marking this as solved since it answered the original question. Thanks!

PostCSS sourcemaps are indeed possible with Hugo Pipes. From my experience it’s best to ignore the PostCSS options Hugo Pipes offers and just use a postcss.config.js file. Setting map: { inline: true } there should embed the sourcemap into your style file:

module.exports = {
  map: { inline: true },
  plugins: {
    ...
  }
};

If you want to configure PostCSS the Hugo Pipes way with postCSS (dict "noMap" false) you’d have to use a separate config file anyway according to the postcss-cli maintainers: “If you want to set options via CLI, it’s mandatory to reference ctx.options in postcss.config.js”.

module.exports = ctx => ({
  map: ctx.options.map,
  plugins: {
    ...
  }
});

Thank you! It almost works: sourcemaps are now generated at the end of the css file, but in Chrome’s Dev Tools instead of the filename I get things like stdin:11.
I tried many combinations, but no luck so far.

That’s due to the piping. I am working around this by organising the css in several files and @importing them with postcss-import. My css files are in themes/mytheme/assets/css. The corresponding postcss configuration looks like this:

plugins: {
  'postcss-import': {
    path: 'themes/mytheme/assets/css'
  }
}

That did the trick. I was surprised, Hugo seems to pass the required information for PostCSS to generate sourcemaps (from and to), but somehow it doesn’t automagically work.
Thank you so much!

1 Like