search

larsenwork / postcss-easing-gradients

PostCSS plugin to create smooth linear-gradients that approximate easing functions.
https://www.npmjs.com/package/postcss-easing-gradients
MIT License
927 stars 22 forks source link

Issues with CSS variables #7

Open davshoward opened 6 years ago

davshoward commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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