Pipes' PostCSS imports and Hugo Modules

support
1

There are several threads regarding PostCSS and the file system context when using postcss-import.

But I did not find anything about using postcss-import with Hugo Modules.

In the context of https://github.com/theNewDynamic/gohugo-theme-ananke/issues/379 I’m trying to have the theme handle all PostCSS processing without Webpack (Hugo Pipes only). Which means the project will only need to install the required npm packages (hugo mod npm pack etc…) and run hugo.

But any css files living in the module rather than the project will fail to be imported with the @import statement and postcss-import.

My guess is that contrary to js.Build, resources.PostCSS might not be aware of assets living under a Hugo Module but I’d rather make sure I’m not missing anything before requesting the feature.

I have a non-working branch here: https://github.com/theNewDynamic/gohugo-theme-ananke/tree/379-hugo-pipes

I have the postcss.config.js file at the root of the project and it looks like:

module.exports = {
	plugins: [
		require("postcss-import")({
			path: ["assets/ananke/css"],
		})
	],
};
2

I am working on this (webpack and hugo) too right now. My webpack setup currently is a double-thingy doing it’s stuff and then being imported as updated file from assets/ to my hugo pipeline. This is the first time I heard about postcss-import :wink: I’ll add info how it works into my workflow in a bit.

3

That would be news to me. My system is a root-repo for the site, then a module for the theme, and modules for shortcodes and themeblocks from the theme module and all of them run nicely with postcss. You need to have all postcss packages/plugins installed in root though.

4

Thanks for your replies! Can I check your repo?

5

send me your github username via dm and I’ll add you… it’s work in progress, so making it public might embarass me too much :wink:

6

What about setting inlineImports=true.

7

If I do that (and unset postcss-import plugin), this will work for file imports but not node_modules imports. Is there a way to add node_modules dir to the inlineImports list of paths?

8

You need to mount it into /assets.

9

If I set the mount configuration from the theme’s config.yaml it does not work. But if I add it on the project’s config.yaml level, then it’s fine. I suppose it is because the source directory does not exist on the theme…

But sadly I need media queries and inlineImports ignores them… bummer.

10

I had a look at this plugin now and think I finally understand your problem. What about @importing those stylesheet files not in postcss, but before via .toCSS? That way you can load stylesheets from node_modules.

with stylesheet partial

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $style := resources.Get "theme.scss" | resources.ToCSS $options | resources.PostCSS (dict "config" "postcss.config.js") | resources.Minify |  resources.Fingerprint "sha512" }}
{{ return $style }}

and theme.scss

@import "somepackagename/dist/style";
@import "bootstrap/scss/utilities";
@import "scss/settings/colors";

it imports the stuff and later postcss can work it’s magic. I had it working this way before, but not in my repo from yesterday you will see most stuff that you would expect in node_modules in it’s own hugo-module.

11

Thanks! @davidsneighbour looks like the right solution! I’ll take it for a spin later today!

12

Your solution worked and I’m using the use option instead of a configuration file for PostCSS as it seems this file has to live in the project and not the module/theme.

Next problem is to make sure the user only needs node_module if they want to customize the css, if not they should be able to access something already build altogether… but that’s for another thread…

13
1 Like
14

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.