Convert LCH colors in my CSS to RGB using PostCSS

support
1

I’m trying to use the postcss-lab-function module to convert LCH colors in my CSS code, but I can’t seem to get it working. In my <head> partial, I have:

    {{ $postCSSOptions := dict "config" "./postcss.config.js" "use" "postcss-lab-function" }}
    {{ with resources.Get "css/colors.css" | resources.PostCSS $postCSSOptions | fingerprint "sha512" }}
        <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{ end }}

In postcss.config.js I have (according to their docs):

const postcssLabFunction = require('postcss-lab-function');

module.exports = {
    plugins: [
        postcssLabFunction(
            preserve: true
        ),
    ],
};

And then in assets/css/colors.css I have:

:root {
  --background-0: lch(5, 0, 0);
}

But if I look at the stylesheet tab on Firefox DevTools, I just see the raw lch command in the CSS, which didn’t get changed at all. What am I doing wrong?

2

Maybe because lch is not supported by most browsers at the moment?

3

See:
https://www.w3.org/TR/css-color-4/#color-syntax

Change this:

:root {
  --background-0: lch(5, 0, 0);
}

To this:

:root {
  --background-0: lch(5 0 0);
}
4

Yes, that’s why I’m trying to use PostCSS to convert them to RGB values instead.

Tried this and it didn’t get converted by postcss-lab-function, however somehow it works fine in Firefox even though caniuse.com says it’s only supported in Safari.

Although last night I ended up manually converting the 60-something colors using GIMP anyways.

5

Then you’re doing something different, because it works fine for me.