Trying to make theme colors configurable in CSS with Hugo Pipes but getting a CSS Syntax Error?

support
1

I’m trying to be able to change the site colors (primary and secondary colors, for example) from values I set in a data file I’m calling theme.yml. I’m using Forestry for the CMS so I want the people updating the content on the site to be able to easily update things like colors through Forestry. I thought putting those options in a data file would be the way to go. But, if there is a better way to do this, please let me know!

Anyway, the way i’m doing it though doesn’t seem to be working. I’m getting an error saying:
POSTCSS: failed to transform “css/styles.css” (text/css): CssSyntaxError: postcss-import: Unknown
Word

theme.yml:

primary: #129b49;
secondary: #f8f8f8;

site.css:

:root {
  --color-primary: {{ .Site.Data.theme.primary }};
  --color-secondary: {{ .Site.Data.theme.secondary }};
}

head.html:

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

Any thoughts on how I could fix this?

2

@tanderson , +1 I’m looking at doing something similar with Forestry and curious to see the best approach for supporting theme configuration.

3

Okay, I figured out a way to do this, without using Pipes.

So, I’m doing something pretty similar to what Hash_Borgir suggested here.

Instead of using the front matter params in my actual css file, I created partial called theme_settings.css and assigned my color variables within style tags there and called the partial right before my main css file. Like this:

theme_settings.css

<style>
  :root {
    --color-primary: {{ .Site.Data.theme.primary }};
    --color-secondary: {{ .Site.Data.theme.secondary }};
  }
</style>

head.html

{{ partial "theme_settings.css" . }}

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

Then in Forestry, I just create a front matter template for my theme.yml data file so it can be edited from Forestry.

---
label: Theme Settings
hide_body: true
fields:
- type: file
  name: logo
  label: Site Logo
  description: Set the site logo
- name: primary
  type: color
  label: Primary Color
  config:
    required: false
    color_format: Hex
  description: Changes the site primary color
- name: secondary
  type: color
  label: Secondary Color
  config:
    required: false
    color_format: Hex
  description: Changes the site secondary color
pages:
- data/theme.yml

Now, I’m able to edit things like colors and logos without going into the css file. So, the people who will be managing the content for the site can make small styling edits without the need of a developer.