Used color-mod() in CSS variable is not working

[nolimitdev]

Consider this webpack example

webpack.config.js

module.exports = (env, options) => {
    return {
        module : {
            rules : [
                {
                    test : /\.css$/,
                    use : [
                        { loader : 'postcss-loader' },
                    ],
                },
            ],
        },
        plugins : [
        ]
    };
};

postcss.config.js

module.exports = (api) => {
    return {
        plugins : [
            ['postcss-custom-properties'],
            ['postcss-color-mod-function'],
        ], 
    }
};

file.css

:root {
 --myvar: color-mod(#1BB749 w(+10%) s(+1%));
}

.test1 { color: color-mod(#1BB749 w(+10%) s(+1%)); }
.test2 { color: var(--myvar); }

Output is

.test1 { color: hsl(137.69230769230768, 56.4140127389%, 46.1764705882%); }
.test2 { color: color-mod(#1BB749 w(+10%) s(+1%)); }

Why color-mod() in .test2 is not processed? I have correct plugins order where postcss-custom-properties firstly process variable and secondly postcss-color-mod-function should process color-mod() but it is not processed.

The solution is only to use postcss-color-mod-function in webpack plugins section not in module.rules section but it have negative performance impact to process whole bundle with postcss-color-mod-function during watch or dev server with hot reload. So I would like it works in module.rules section as expected. Thanks.

[HolisticPeanut]

Any update on this? I'm having the same issue.

[Antonio-Laguna]

Not really, this plugin is not going to be continued since the spec has been discontinued and there are other plugins we're maintaining. I'd be keen to review something that'd fix this but I'm not so sure we'll get to do this on our own

[HolisticPeanut]

Hi,

Tried a few things, including postcss-color-function (which by the way, funnily recommends color-mod as the fix for the same problem: postcss/postcss-color-function#49 (comment) => this would lead me to think this issue was not always present in color-mod)

Also noticed postcss-hexrgba has the same issue.

Finally fixed all by installing postcss-functions:

1. Defined my own functions [using color]

import Color from 'color'

export default {
    darken: (value, frac) => Color(value).darken(frac),
    lighten: (value, frac) => Color(value).lighten(frac),
    alpha:(value, frac) => Color(value).alpha(frac).hsl()
}

2. PostCSS plugins: loading postcss-functions after postcss-custom-properties

3. Example in styles:

:root {
 --myvar: #1BB749;
}

.test1 { color: darken(var(--myvar), 0.2); }
.test2 { color: alpha(var(--myvar), 0.75); }

Output:

.test1 {
    color: #16923a;
}

.test2 {
    color: #1bb749bf;
}

Posted this in the hope it helps others find a quick fix to this

[Antonio-Laguna]

@GeneralBaduar a quick question, is the var being set on another (imported) file?

[HolisticPeanut]

@GeneralBaduar a quick question, is the var being set on another (imported) file?

Yes, in my actual project I'm using a shared file imported with postcss-custom-properties:

"postcss-custom-properties": {
            preserve: false,
            importFrom: "styles/definitions/variables.pcss",
        },

[Antonio-Laguna]

Then this might not be the case, I've just found an issue which is rather serious: csstools/postcss-plugins#132

I've found that when combined with postcss-import, variables weren't properly right. This could be your case too but hidden by another cascade of combinations.

Releasing a bugfix asap

[HolisticPeanut]

Interesting find. Thank you for the update!

[Antonio-Laguna]

@GeneralBaduar It has been released as 12.0.4, could you try in the event it solves the issue for you?

[HolisticPeanut]

Got version 12.0.4. I'm not sure if my project is to blame, but now I get an error when using var [* tried imported and also inline]:

:root{
    --color-red: red;
}

.test1{
    color: color-mod(var(--color-red) a(50%));
}

Previously it wouldn't convert, now it throws: postcss-color-mod-function: [...] Expected a color

Using an inline color works:

--brand-red:      color-mod(yellow blend(red 50%));

[Antonio-Laguna]

What version were you on for postcss?

[HolisticPeanut]

Version 8.4.5

[Antonio-Laguna]

So checking this, it could be actually conflicting since the plugin is done in a way that tries to do part of the work that custom properties does and uses a library that we don't use anymore and very old. Are you testing using main branch or are you using 3.0.3?