Add full-support for radial-gradients

[yagudaev]

Add full-support for radial-gradients as defined by w3c: https://w3c.github.io/csswg-drafts/css-images-3/#radial-gradients.

To do this, we will need to update the parser to support radial gradients. https://www.npmjs.com/package/gradient-parser.

The plan is to hard-fork the repo, combine it with the typescript definitions and add types and parsing based on the W3C spec.

[gluck]

May I suggest using a pure css value parser (such as postcss-value-parser) ? Seems more robust and flexible.

[yagudaev]

Thanks Francois, I really like that idea it does seem a lot more reliable than arbitrary regexes. It would be nice to find something higher level that conforms to the CSS spec. Maybe the postcss world has something like that 🤔

[gluck]

Unfortunately I didn't find any project with higher level normalization. Though TBH gradient-parser output isn't very far from the AST, except when it fails, which was pretty common in my tests:

• color names not supported
• diagonal orientations not supported (supposedly fixed but not released)
• positions w/o unit (px is implicit) unsupported

I can maybe work on a PR to migrate if you're interested.

[yagudaev]

Yeah, that would be amazing @gluck, maybe we can keep it in lib/gradientParser.ts and it can be it's own package later.

It would be a good place to start adding some automated tests.

I've done some tests in Jest for another Figma plugin I was working on, small gist here: https://gist.github.com/yagudaev/0c2b89674c6aee8b38cd379752ef58d0.

It can be simple and just parse pieces like the spec specifies: https://w3c.github.io/csswg-drafts/css-images-3/#gradients.

I don't have any experience working with ASTs so if you want to give it a shot that would be awesome.

P.S. I've also included a task for creating functional tests for later #15

[gluck]

first shot done in #16 , let me know if that's what you expected