Replace our CSS parsers with an external parser

[kdzwinel]

Background: We are doing a bit too much work than we should by writing our own parsers for css property values (e.g. gradient, shadow, background).

Task: Research css parsers (e.g. https://github.com/reworkcss/css ), and replace our parsers.

🤔does any CSS parser parses property values? 🤔can we use the native CSSOM instead?

[tlenex]

https://github.com/niklasvh/html2canvas/tree/master/src/css can be helpfull if we stick to parsing things internally

To use CSSOM you'd need to use some kind of headless-browser working as child-process, since nodejs does not support CSSOM API natively. Additionally CSSOM is not a value parser. EDIT: Well I've found out it is: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleValue/parse

For parsing values I'd recommend using PostCSS with this plugin: https://github.com/shellscape/postcss-values-parser Main postcss.parse() runner can parse whole stylesheets too. It runs as nodejs process so it can be tricky to get web stylesheets into it from rendered document, but hey... it's nodejs, we can set up a temp http server to receive that data. https://postcss.org/api/#postcss-parse https://github.com/postcss/postcss#syntaxes

I hope this helps @kdzwinel