Nested colors functions

[studiosciences]

It wasn't clear to me if the css4 colors would support with this or if css4 variables would cause the same issues as postcss-simple-vars.

Source:

// variables.css
$red: #0c0;
$darkred: color($red l(-20%));

// mypage.css
div {
    background: color($darkred a(50%));
}

Output from postcss-simple-vars:

div {
    background: color(color(#0c0 l(-20%)) a(50%));
}

Output from postcss-color-function:

div {
    background: rgba(NaN, NaN, NaN, 128);  // or something like this
}

Opinions? Advice?

[MoOx]

FYI you can try it here http://cssnext.io/playground/

div {
    background: color(#0c0 l(-20%));
    background: color(color(#0c0 l(-20%)) a(50%));
}

div {
    background: rgb(0, 102, 0);
    background: rgba(0, 102, 0, 0.5);
}

So it's not a postcss-color-function issue.

[studiosciences]

Thank you!