Howto combine color() and css variables

[henryruhs]

Hello,

I'd like to combine postcss-color-function and postcss-css-variables in a single declaration:

:root
{   --color-primary: #f00;
    --color-primary-light: color(var(--color-primary) l(50%));
}

This results a fatal error:

 Unable to parse color from string "var(--color-primary)"

Thank you

[MoOx]

This is working with postcss-custom-properties

:root
{   --color-primary: #f00;
    --color-primary-light: color(var(--color-primary) l(50%));
}

body
{
  color: var(--color-primary-light);
}

Gives

body
{
  color: rgb(255, 0, 0);
}

(No error, even if the color is unchanged. Try with a(50%)).

Try by yourself on cssnext playground

---

postcss-css-variables is harmful in too many way, so I won't do anything special for this plugin. It's exlpained in postcss-custom-properties readme

[henryruhs]

Looks like a battle between two or multiple developers. Thanks for pointing it out.

[MoOx]

It's not a battle. It's allowing future-proof code. postcss-css-variables allow you to write code that will never work in any browser according to specifications, and even worst, that behave in a different way. By using postcss-css-variables you will not be able any time soon to just "remove this plugin" to benefit from native custom properties support in browsers. And that's a shame for a plugin that use the name "css variables".

[henryruhs]

I understand the issue and totally agree that a css4 polyfill should follow the W3C specifications. However, I switched to postcss-custom-properties and everything is working fine.

Have a nice weekend