BUG: minify outputs invalid hex codes for rgba and transparent values


#1

When css being processed with safeCSS function all rgba colors changing to hexadecimal, and w3c doesnt like hexademical color like #0000 or #00000012. Im preprocessing styles like this
{{ with resources.Get “layouts/shortcodes/styles.scss” | toCSS | postCSS | minify}}

{{.Content | safeCSS}}

{{end}}

Is there a way to inline styles similar way but without rgba preprocessing?


#2

I use the tachyons CSS (lihe gohugo.io) and have no problems with hex colors.
Can you post the error messages?


#3

Yeap, sure


#4

https://www.w3.org/wiki/CSS/Properties/color

the hex colors must hav 3 or 6 digits, you have 4 or 8 digits.
transparency must coded with rgba.

#0000 can easy reduced to from rgba(0,0,0,0) to 0 or black`
Do you need transparency?

If your source has rgba, post an error on the github page https://github.com/gohugoio/hugo


#5

References

https://www.w3.org/TR/css-color-3/#rgba-color

quote:
Unlike RGB values, there is no hexadecimal notation for an RGBA value.


#6

So, as I understand now what and I didnt noticed before that the problem is not with safeCSS but with | minify, I didnt even checked | minify because I could not think that this pipe could cause such problem… My styles not minified but my rgba colors is not being preprocessed in hex alpha color


#7

This resolves my issue, but I think its not appropriate behaviour and not quite obvious, at least it wasnt for me


#8

I use minify without problems. Can be there is a probleme with piping.

If you have the time make an minimalistic site to check this out.
Put it on github for analysis.


#9

Sure, at this moment I need to finish project ASAP, but Ill try to make some example, I have no idea why is this happening, maybe I’ll find out when I’ll be doing an example. Any way, at this moment thank you for your help)


#10

Actually I was also beaten by this.

It seems that for any rgba value e.g. rgba(000, 000, 000, 0.7); and also if a color value is set to transparent @tdewolff 's minifier outputs invalid hexadecimal numbers that fail W3C validation.

I have amended the title of this thread because this is a bug.

However I am busy as hell (and will be from now on) I certainly do not have the time to make test repos, open a bug upstream etc. Time is scarce for me.

EDIT

Filed bug report upstream myself. Feel free to participate:

EDIT II
I closed the above issue because I had a look at the minifier’s Docs and there is already a flag that addresses the invalid CSS output.

So I opened the following issue in Hugo’s main issue tracker:


#11

This bug was fixed with commit https://github.com/gohugoio/hugo/commit/4b5f743959394d443c4dcaa0ccae21842b51adaf

Also there is an issue https://github.com/tdewolff/minify/issues/238 regarding the default behavior of the minifier and rgba HEX values (for anyone who is interested in tracking it).

Again, a very big thanks to @bep for issuing a fix so quickly. This will be available in the next Hugo release.


Asset minification options (CSS)