CSS variable not being minified

support
1

Using CSS variables in my SCSS, I noticed that some don’t get minified:

:root {
  --range-latin: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Noto Sans", sans-serif;
  src: url("/fonts/notosans-latin-400.woff2") format("woff2");
  unicode-range: var(--range-latin);
}

The :root section doesn’t seem to get minified at all, linebreaks and spaces persist. The @font-face section is appended to it in the usual minified state.

My CSS bundling partial:

{{ $opts := dict
  "transpiler" "dartsass"
  "targetPath" (printf "css/style.%x.css" now.Unix)
}}
{{ with resources.Get "scss/style.scss" | toCSS $opts | minify }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

I’m using Dart Sass, but I don’t think it has any issues with the content — the minification step is done by Hugo from what I understand. Any idea where the issue might lie?

2

Assuming Hugo uses libsass for the minification step, I think this use case might be unsupported.

3

I have now switched to the Dart Sass compression option, which fixes it:

{{ $opts := dict
  "transpiler" "dartsass"
  "outputStyle" "compressed" // ← Added
  "targetPath" (printf "css/style.%x.css" now.Unix)
}}
{{ with resources.Get "scss/style.scss" | toCSS $opts }} // Removed
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

I think I had the trailing minify step from past projects where I concatenated SCSS + CSS. There are other solutions for that I reckon, like minifying separately before concatenation (or just minifying redundantly).

4

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