Issues with CSS variables

[davshoward]

Hi there,

Great plugin, but it doesn't seem to work with CSS variables.

// Works
background: linear-gradient(to right, green, ease, red);

// Fails
:root {
--red: red;
--green: green;
}

background: linear-gradient(to right, var(--green), ease, var(--red));

[CloudPower97]

Hello @larsenwork ,
I'm experiencing the same problem described by @davshoward.
Are there any updates on this issue?

Moreover I would like to point out that I have the same exact problem when using postcss-modules-values.

Instead postcss-modules-values-replace seems to fix this problem.

I'm not sure if this helps you, but you might find this information useful.

Thanks for your time in advance

[larsenwork]

I could add support for css-variables — it would be a bit clunky syntax using color-mod with blend but it should work... I'll give it a go soon :)

[krry]

I too would love to be able to pass var(--color-name) to the gradients.

On a similar note, I thought it would be especially dope to be able to pass dynamically sensed colors (like these) to easing-gradients to make super smooth gradients based on the page's imagery. That works, and it looks great!

[bdrtsky]

Confirm, this doesn't work with variables. Frustrating :(