Hugo 0.48 - no sourcemap link in css file

support
1

Is it possible that Hugo is no longer connecting the css sourcemap with the css file? I just realized in my browser that only the generated css file is shown with inspect element. That file is missing the sourcemap link at the end.

That wasn’t the case before and I didn’t change anything.

Where might that come from?

2

That is the role of the browser. I just tested this, and it works fine for me.

3

I know and found something strange out: If I have resources.PostCSS in my local dev environment the sourcemap link at the bottom of the generated css file is not generated. If I take resources.PostCSS out it works and the browser shows the source files.

I made a screenshot from the code to look at:

code
code.png2430×1408 425 KB

4

I don’t use PostCSS in my developer setup. This is one reason: I don’t see how a source map generated by LibSASS can be valid after being processed by PostCSS.

5

Ya, understand. Sorry for bothering…

1 Like
6

PostCSS claims to have “great source maps support” that “can read and interpret maps from previous transformation steps”. One reason Hugo Pipes’ postCSS can’t handle maps created by its toCSS is that postcss-cli does not support external sourcemaps if it writes to stdout. Hugo Pipes’ toCSS needs support for inline sourcemaps to make it all work. I’m not surprised there’s already an option in Hugo’s source code to do just that: options.to.EnableEmbeddedSourceMap in /resource/tocss/scss/tocss.go. I gave it a try and setting this to true actually makes Hugo Pipes’ postCSS include the sourcemaps generated by toCSS.

@bep What about adding an option to enable inline sourcemaps? :grinning:

1 Like
7

I obviously fiddled around with these settings when I implemented this, and I could not get embedded source maps to work with Chrome …

But even if it did, a source map generated from LibSass, will that map still be valid after the CSS has been processed with PostCSS? The locations must surely be different?

8

Here’s an example where I used libsass with bulma and some imported custom scss. Postcss is used with purgecss and autoprefixer to remove unused css and make old browsers happy:

  {{ $cssOpts := (dict "enableSourceMap" true "includePaths" (slice "node_modules/bulma")) }}
  {{ $styles := resources.Get "scss/main.scss" | toCSS $cssOpts | postCSS }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

Results with embedded sourcemaps: https://termuxtest.surge.sh/