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?

[HolisticPeanut]

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?

Using version 3.0.3

[JackieCheung]

Any progress? Same issue with "postcss-color-mod-function": "^3.0.3" and "postcss": "^8.4.12"

[Antonio-Laguna]

@JackieCheung unfortunately no progress, this plugin is discontinued so the effort is put elsewhere.

[AlecRust]

Anyone know what the most up-to-date, not-discontinued approach for shading/modifying a CSS var with PostCSS is?

i.e. in a way that transforms the value for old browsers:

input:

color: darken(var(--myVar), 0.2);

output:

color: #123456;

[Chris2011]

For devs coming from SCSS and switched over to PostCSS and seeing no progress here anymore, maybe it would good to check out the lighten/darken methods from scss, reuse them and live with that for now. But this seems out of scope of this plugin and not related to any specification.

[cyraid]

@HolisticPeanut You should totally just make a missing color functions plugin from people converting from SASS! I'm coming from SASS, and I definitely miss those color functions like blending and darken etc, etc.