How to Concatenate CSS Files with File Name Comment Separators?

[asterling]

Hi everyone,

I’m trying to concatenate my CSS files into one during the build process for my site. The catch is that I want to include comment separators to clearly indicate where each file begins.

Ideally, it would look something like this:

css

/* page-styles.css */

body {
    background-color: #f0f0f0;
}

/* heading-styles.css */

h1 {
    color: #333;
}

/* image-styles.css */

img {
    max-width: 100%;
    height: auto;
}

Currently, I am using the following:

html

{{ 
   $css := resources.Match "css/**.css" |
   resources.Concat "styles.css" |
   resources.Fingerprint 
}}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

Does anyone know how I could implement the comment separators with the file names in the concatenated CSS? Any guidance would be greatly appreciated.

Thanks in advance.

[irkode]

here are two solutions with looping over your resources:

One: new resource holding the comment

create a new temporary resource for the comment and add that before each css file

{{ $resources := slice }}
{{ range  resources.Match "css/**" }}
   {{ $fileName := printf "%s.name.css" .Name }}
   {{ $fileComment := printf "/* %s */\n\n" (path.Base .Name) }}
   {{ $commentResource := resources.FromString $fileName $fileComment }}
   {{ $resources = $resources | append $commentResource . }}
{{ end }}

Two: new resource with modified (complete) content

create a new temporary resource with new content holding both the comment and the style

{{ $resources := slice }}
{{ range resources.Match "css/**" }}
   {{ $fileName := printf "%s.name.css" .Name }}
   {{ $fileContent := printf "/* %s */\n\n%s" (path.Base .Name) .Content }}
   {{ $contentResource := resources.FromString $fileName  $fileContent }}
   {{ $resources = $resources | append $contentResource }}
{{ end }}

after each

you can process the list as usual using concat, then fingerprint …

{{ with $resources | resources.Concat "css/new-resource.css" }}
   <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{ end }}

[asterling]

Thanks so much for your input.

Based on your code, I implemented the following to meet my needs:

   {{ $styles := slice }}
   {{ range  resources.Match "css/**" }}
      {{ $fileName := printf "%s.name.css" .Name }}
      {{ $fileComment := printf "\n\n/* ---- %s ---- */\n\n" (path.Base .Name) }}
      {{ $commentResource := resources.FromString $fileName $fileComment }}
      {{ $styles = $styles | append $commentResource . }}
   {{ end }}

   {{ with $styles | resources.Concat "css/styles-merged.css" | fingerprint "md5" }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" />
   {{ end }}

Result:

/* ---- page-styles.css ---- */

body {
    background-color: #f0f0f0;
}

/* ---- heading-styles.css ---- */

h1 {
    color: #333;
}

/* ---- image-styles.css ---- */

img {
    max-width: 100%;
    height: auto;
}

I noticed one small issue: at the start of the file, there are two empty lines. It would be better if these were not included at the beginning. I’ll look into skipping this for the first concatenation, but any suggestions would be appreciated. Thanks again.

[jmooring]

Look at the white space removal notation:
https://gohugo.io/templates/introduction/#whitespace

[asterling]

Does this apply when new lines are deliberately added, as in this case?

{{ $fileComment := printf "\n\n/* ---- %s ---- */\n\n" (path.Base .Name) }}

[jmooring]

I misunderstood your question. To add the lead newline characters to all but the first comment:

{{ $styles := slice }}
{{ range $k, $v := resources.Match "css/**" }}
  {{ $fileName := printf "%s.name.css" .Name }}
  {{ $prefix := "" }}
  {{ if $k }}
    {{ $prefix = "\n\n" }}
  {{ end }}
  {{ $fileComment := printf "%s/* ---- %s ---- */\n\n" $prefix (path.Base .Name) }}
  {{ $commentResource := resources.FromString $fileName $fileComment }}
  {{ $styles = $styles | append $commentResource $v }}
{{ end }}

{{ with $styles | resources.Concat "css/styles-merged.css" | fingerprint "md5" }}
  <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{ end }}

In the above, $k is zero (falsy) during the first interation.

[asterling]

Thank you, it is much appreciated.