use CSS Custom Property for alpha value

[FezVrasta]

Hi, I was using this module to assign a custom alpha value to some HEX values:

--opacity: .5
$black: #000

color: color($black alpha(var(--opacity)))

I actually remember it worked just fine a week ago, and it transpiled it to:

color: rgba(0,0,0, var(--opacity))

But today I tried it again and now I see that it simply ignores the alpha modifier and outputs:

color: rgb(0,0,0)

Am I doing something wrong, does this plugin supports this? If not, why? I understand that it can't work if I wanted to do color(var(--red), .5) because the plugin can't know the value of --red, but in this case it's simply a matter of keep the var instead of the alpha value.

[MoOx]

This module does not handle custom props, so you must use custom props plugin before this one.

[FezVrasta]

If I use the plugin they are converted to static properties, what I'd like to do is to keep the var(--opacity) in the final result.

[MoOx]

In your example you use non valid $var, so same rule for this plugin.

[FezVrasta]

Sorry, let's make the example simpler:

color: color(#000 alpha(var(--opacity)))

I can't see why this is something that can't be done with this plugin since it would get transpiled to:

color: rgba(0, 0, 0, var(--opacity))

[MoOx]

It's just probably not handled. Please contribute to https://github.com/ianstormtaylor/css-color-function

[FezVrasta]

Okay thank you, I'll do.