Trying to architect CSS modules for HUGO

support
1

So I’m trying something pretty wacky at the moment; I’m using webpack to digest scss files in my build process, then passing the result through postcss-modules and writing the resultant map of {classname: namespaced classname} to a json file in the data directory.

What I would really like to do is create some kind of shortcode/partial or helper method to fetch those classnames. Of course shortcodes aren’t available outside of page content, and partials can’t be passed variables unless you use some pretty extended syntax.

I think there’s a pretty interesting challenge here that could potentially provide something useful; so I just wanted to see if anyone here thinks what I’m trying to do might be possible or how to go about it. The easiest way I can see to provide this is to write some kind of plugin or extension for HUGO, but I know there isn’t really a formal plugin system as of yet; so I don’t really know if this is a support request or a feature request (I’m still fairly new to HUGO at this time). Feel free to recategorise/ask me to recategorise this post.

Any ideas or feedback would be really appreciated… even if it’s to tell me that what I’m trying to do here is just silly and not of interest to the community :sweat_smile:

2

Why not just use Hugo pipes to compile the scss and get rid of webpack?

3

Apologies, I think I buried the lede somewhat. I chose webpack simply for my convenience (can Hugo pipes also handle module bundling? I’m also using able so it just made sense to me to use webpack for now at least)

However, even if I were to use Hugo pipes, the bigger issue is how to namespace CSS class names using CSS modules.

4

Not sure what exactly you are looking for but here is a list of all the things Hugo Pipes can achieve, good luck.

1 Like
5

Do you have a document laying out what you exactly wish to achieve?

Where do you store those classnames? Are their randomly generated? Do you need to send them to webpack or inject them in the computed markup inline…

Lot of questions. Maybe some one as documentation on the “official” definiation of css modules I could read through :slight_smile:

1 Like
6

Not a specific layout as such; it’s more that I’m making my first steps into static site generation and am trying to set some standards for my workflow. Scoped CSS is arguably not the most hotly requested/needed feature for static sites but I wanted to see if I could give it a try.

The classnames are generated based on a pattern that you pass to the webpack loader, so for example the .title class in the article.scss file might become .article__title__29fhe (from the pattern ‘[filename][class][hash]’). At the moment I am storing these as key value pairs in a json file in the data directory, so a specimen file might look like this:

{
    "article": {
        "title": "article__title__29fhe"
    }
}

Ideally, it would be great to pass a partial a component name and a list of class names and then have the partial pull the values for those keys in for the class attribute of an html element.

I’m hardly pinning my entire career on this idea and I fully acknowledge it’s a bit wacky but I wanted to at least bring it up here and see what people’s thoughts were here as I think it could be nice to be able to do stuff like this. (Not necessarily exactly this of course, but I can see use cases for being able to define helper methods or some such).

At the moment the usage pattern I guess would look something like this:

<div class="{{ partial "cssmod"dict("context" . "component" "article" "classes" "title")}}">

(Forgive me if my dict syntax is funky - I’m still a little new to writing go!)

Which could certainly work, but it’s not very practical - to the point of not being worth the effort of doing for every single class attribute on the site!

Also, thanks for taking my crazy idea somewhat seriously! :smiley:

7

Ok so for the problem at hand:
Grabbing element classnames from a json file:

I’m not sure when this class manifest is created but if it’s before Hugo’s build then you could create a copy of it in the data directory.

This way, from any component, you could access it with .Site.Data.classes.

You’d have to pass the component name to the partial though alongside your “props” for there is no way that I know of the grab the partial name from within it.
Ex:
Calling the partial.

{{ $props := . }}
{{ partial "article" (dict "name" "article" "props" $props) }}

Inside the partial

{{ $classes := index .Site.Data.classes .name }}
{{ with .props }}
	<article class="{{ $classes.base | safeHTMLAttr }}">
		<h2 class="{{ $classes.title | safeHTMLAttr }}">{{ .Title }}</h2>
		<div class="{{ $classes.content | safeHTMLAttr }}">
			{{ .Content }}
		</div>
	</article>
{{ end }}

Not sure if I’m really aligned with what you want to achieve, but I guess this could be tweaked and refactored.

1 Like