PostCSS & postcss-import, loosing file system context in theme folder

[dirkolbrich]

Hugo version v0.55.5

This issue relates to Hugo pipes, postCSS & postcss-import - file system context, part 2 on the Hugo discussion forum.

There seems to be a problem with path context while using Hugo pipes with postcss and postcss-import.

I created a Tailwindcss-starter theme repo (see github.com/dirkolbrich/hugo-theme-tailwindcss-starter) to speed up the development of themes with the use of tailwindcss.

The theme uses a Hugo Pipes setup to bundle the resources within a styles.css and uses postCSS for this task.

{{ if .Site.IsServer }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">
{{ else }}
    {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/postcss.config.js") | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
{{ end }}

See Regenerating assets directory for Hugo Pipes for context.

Here is the error I encounter:

If I clone the theme repo as a seperate project with the folder structure:

my-theme/
  ├ assets/
  │ └ css/
  │   ├ dev/
  │   │  └ postcss.config.js
  │   ├ postcss.config.js
  │   ├ site.css
  │   ├ styles.css
  │   └ tailwind.config.js
  └ exampleSite
      └ content

and start it from within the theme repo folder using the exampleSite directory for the content with:

hugo server -s exampleSite --themesDir=../.. -w --disableFastRender

everything works fine. postCSS and postcss-import handle the imports as expected.

However, if I clone the repo as a theme into the themes directory of a new Hugo site with the following folder structure:

my-site/
  ├ content/
  ├ ... // some other folders
  └ themes/
    └ my-theme/
      ├ assets/
        └ css/
          ├ dev/
          │  └ postcss.config.js
          ├ postcss.config.js
          ├ site.css
          ├ styles.css
          └ tailwind.config.js

and start the project from within the site root with:

hugo server -v

I receive the following error:

INFO 2019/05/16 10:48:58 postcss: use config file /Users/username/my-site/themes/my-theme/assets/css/dev/postcss.config.js
Error: Failed to find 'tailwindcss/base'
  in [
    /Users/username/my-site,
        /Users/username/my-site/themes/my-theme
  ]
    at /Users/username/my-site/themes/my-theme/node_modules/postcss-import/lib/resolve-id.js:35:13
ERROR 2019/05/16 10:48:59 error: failed to transform resource: exit status 1

The postcss.config.js is successfully found, as well as tailwind.config.js (specified in posts.config.js) and styles.css under /assets/css . styles.css consist of the following setup, it pulls in the different tailwind sub-files:

/* Tailwind base - put variables under: tailwind.config.js */
@import "tailwindcss/base";
/* Tailwind component classes registered by plugins*/
@import "tailwindcss/components";
/* Site Specific */
@import "assets/css/site";
/* Tailwind's utility classes - generated based on config file */
@import "tailwindcss/utilities";

postcss suddenly does not find the tailwind package under the themes node_modules folder. It does knows where to look for the themes local postcss-import, as seen in the error message.

It seems like postcss is loosing the context, that it was called from within the themes folder and uses instead the my-site root path. It does not sees the node_modules/ folder within the theme folder.

If I change the import paths in styles.css to point to the themes node_modules/ folder, the setup works:

/* Tailwind Base - Variables: tailwind-config.js */
@import "node_modules/tailwindcss/preflight";
/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";
/* Site Specific */
@import "assets/css/site";
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";

This change even works for the standalone theme repo as described above.

I think the error is in a Hugo core function in hugo/resources/resource_transformers/postcss/postcss.go:

func (t *postcssTransformation) Transform(ctx *resources.ResourceTransformationCtx) error {

    const localPostCSSPath = "node_modules/postcss-cli/bin/"
    const binaryName = "postcss"

    // Try first in the project's node_modules.
    csiBinPath := filepath.Join(t.rs.WorkingDir, localPostCSSPath, binaryName)

    binary := csiBinPath

    if _, err := exec.LookPath(binary); err != nil {
        // Try PATH
        binary = binaryName
        if _, err := exec.LookPath(binary); err != nil {
            // This may be on a CI server etc. Will fall back to pre-built assets.
            return herrors.ErrFeatureNotAvailable
        }
    }

    // rest of file left out
}

Here Hugo tries the projects path and then the global PATH.

Maybe this function should be refactored to first try the projects theme path (if a theme is used), than the projects root path and after that the global PATH.

[bep]

Maybe this function should be refactored to first try the projects theme path (if a theme is used), than the projects root path and after that the global PATH.

We're not executing any binaries found in the themes, which is by design. So, if you want postcss installed locally, that will have to come in via npm install in the project itself. There are certainly improvements to be had in that area, but I don't think that will ever be depending on some node_modules merging.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.