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}}
{{end}}
Is there a way to inline styles similar way but without rgba preprocessing?
I use the tachyons CSS (lihe gohugo.io) and have no problems with hex colors.
Can you post the error messages?
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
References
https://www.w3.org/TR/css-color-3/#rgba-color
quote:
Unlike RGB values, there is no hexadecimal notation for an RGBA value.
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
This resolves my issue, but I think its not appropriate behaviour and not quite obvious, at least it wasnt for me
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.
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)
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:
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.
