Add support for "at"

[Menardi]

Thanks for this polyfill, it's great and slots in perfectly. I notice the docs say that setting the centre point isn't supported. Is adding support for it likely?

Currently the use of at seems to be interpreted as a colour somehow. Gradients using the polyfill with a conic gradient which includes at do not fall back in the way I expect. I would expect that the gradient renders normally at the centre, but instead the behaviour is a bit different.

For example, the following gradient:

background: conic-gradient(at 50% 25%, yellow, lime, blue, violet, red);

It renders correctly natively in Chrome:

But renders like this in Firefox using the polyfill:

Additionally, if used with from, it throws a JS error, which prevents later conic gradients from rendering.

background: conic-gradient(from 90deg at 50% 25%, yellow, lime, blue, violet, red, yellow);

The error:

TypeError: prevStop.color.map is not a function (conic-gradient.js:184:12)

[LeaVerou]

I don't have the time to work on the polyfill, but I would be glad to review and merge PRs if anyone wants to do it!

[kumarharsh]

@Menardi you can look into the closed PR #13 which had this fix for some pointers.

[Menardi]

At a quick glance, that PR correctly renders the gradient as shown in the first post. :+1: However, since the branch is 3 years old now, it has diverged quite a bit from this version. It would need a refactor to get it working with the current version (including support for from).

[kumarharsh]

Yeah, that's why I just pointed to it instead of fixing it myself 😛 The diversion is mostly due to a rewrite in es6 I believe, but the core structure should be the same since the plugin hasn't changed it's architecture much.