Extra closing parenthesis when using RGBa(), HSLa() as fallback value

Hi,

This is how my vars look like:

--color-background-transparent-9: hsla(200, 20%, 25%, 0.9);
--color-background-tint: hsla(200, 15%, 90%, 1);

This is how I use them on an element:

background: var(--color-background-transparent-9, rgba(51, 68, 77, 0.9));
color: var(--color-background-tint, #e2e7e9);

This is how css-vars-ponyfill converts them:

background: hsla(200, 20%, 25%, 0.9));
color: hsla(197, 14%, 90%, 1);

Notice the extra closing parenthesis in the background property.

After a bit of investigation, it seems that the issue is the fallback value. If I replace the rgba(51, 68, 77, 0.9) with #e2e7e9 it works.

Does anyone have this issue before? Do you may know any workaround?

Thanks in advance! George

[jhildenbiddle]

Fixed in 1.15.3.

Thanks for the excellent description and debugging efforts. Made the fix much easier. 😄

Let me know if the fix resolves your issues. I’ll hold off closing the issue until then.

[georgechond94]

Yep, it works great for me too! Many thanks for the instant fix!