PostCSS Pipe Makes $styles.Content Throw

support
1

First time using PostCSS, so sorry if it’s a silly or repeat question. I’ll keep reading docs to see if I can figure it out myself.

This worked:

<head>
  ...
  {{ $style := .Resources.GetMatch "styles.css" | resources.Minify }}
  <style>{{ $style.Content | safeCSS }}</style>
</head>

My following changes do not work.

npm i -g postcss-cli precss

<head>
  ...
  {{ $style := .Resources.GetMatch "styles.css" | resources.PostCSS }}
  {{  <style>{{ $style.Content | safeCSS }}</style>  }}
</head>

// postcss.config.js at Hugo root
module.exports = {
  plugins: [
    require('precss')
  ]
}

I receive the error:

error calling Content: read /Users/dylan/Projects/portfolio-site-2/resources/_gen/assets: is a directory

If I comment out the plugins section of postcss.config.js the error goes away.

Here’s the output of {{ printf "%#v" $style }}

&resources.transformedResource{commonResource:resources.commonResource{}, cache:(*resources.ResourceCache)(0xc000271000), sourceFilename:"", linker:resources.permalinker(nil), transformation:(*postcss.postcssTransformation)(0xc000e42e40), transformInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, transformErr:error(nil), publishInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, published:false, content:"", contentInit:sync.Once{m:sync.Mutex{state:0, sema:0x0}, done:0x0}, transformedResourceMetadata:resources.transformedResourceMetadata{Target:"", MediaTypeV:"", MetaData:map[string]interface {}{}}, Resource:(*resources.genericResource)(0xc00021e160)}

I will be grateful for any help.

2

Update
As per the postcss docs I included postcss-fail-on-warn as a plugin.

npm i -g postcss-fail-on-warn

module.exports = {
  plugins: [
    require('precss'),
    require('postcss-fail-on-warn')
  ]
}

I received this error when trying to print {{ $styles.Permalink }}

Error: Cannot find module 'precss'
Require stack:
- /Users/dylan/Projects/portfolio-site-2/postcss.config.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/import-fresh/index.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/loaders.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/createExplorer.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/index.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/index.js
- /Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/bin/postcss
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/dylan/Projects/portfolio-site-2/postcss.config.js:3:5)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/dylan/Projects/portfolio-site-2/postcss.config.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/import-fresh/index.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/loaders.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/createExplorer.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/cosmiconfig/dist/index.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/index.js',
    '/Users/dylan/.nvm/versions/node/v12.2.0/lib/node_modules/postcss-cli/bin/postcss'
  ]
}
ERROR 2019/08/12 11:52:11 error: failed to transform resource: exit status 1

I definitely installed precss globally using npm.

3

Update
Installing precss and postcss-fail-on-warn locally to satisfy the require methods in postcss.config.js snuffed the previous error.

However, I still cannot access {{ $style.Content }}
error calling Content: read /Users/dylan/Projects/portfolio-site-2/resources/_gen/assets: is a directory

4

Found workaround
Instead of attempting to utilize a postcss configuration file, passing the employed parsers directly to resources.PostCSS as the use option worked.

<head>
  ...
  {{ $style := .Resources.GetMatch "styles.css" | resources.PostCSS (dict "use" "precss") }}
  <style>{{ $style.Content | safeCSS }}</style>
</head>

I suspect, then, that the problem is my postcss config file. Though since this workaround works well enough, I’ll give up trying to solve this particular problem.

6

Solution
I found out how to properly format the postcss.config.js file according to this other post about PostCSS source maps being weird.

According to their comment the following is my new configuration.

postcss.config.js

module.exports = {
  map: { inline: true }, // enables source map
  plugins: {
    'precss': {} // requires npm i precss
  }
};

html file

{{ $style := .Resources.GetMatch "styles.pcss" | resources.PostCSS }}
<style>{{ $style.Content | safeCSS  }}</style>