Support CSS3 Variables in font family

[birkir]

Currently failing when doing something like:

font-family: var(--primary-font);

This PR fixes that, see the tests.

[birkir]

Pinging @kristerkari 😁

[kristerkari]

Thanks @birkir!

I had a discussion with @jacobp100 about adding support for CSS variables in a previous pull request. There is one thing that makes supporting CSS variables tricky: a CSS variable can have so called complex values (contain multiple values):
#85 (comment)

That means that supporting longhand properties (such as font-family) is easy, but shorthand properties (like font) can not be fully supported without knowing the value of the variable.

I'm not sure what the plan is for this parser when it comes to supporting CSS variables as it can not support shorthand properties because of the possible complex values (@jacobp100 is the right person to answer that).

What I was thinking of is that I could change my own parser css-to-react-native-transform to parse any values that have var(..) to strings, and then create a runtime library to match that value (shorthand or longhand) with the value of the variable. That way I can add the support and keep the complexity outside of this parser.

[birkir]

Oh yeah, sounds good. However the parser doesn't follow any CSS Spec strictly in general so I don't feel like loosly detect css variables and passing them down as-is is necesserily a bad thing.

Thanks @kristerkari, let me know if you need help!

[kristerkari]

Also, @jacobp100 mentioned that his own library has support for CSS variables when used with React Native. I'm not sure how it's implemented as I haven't looked into it yet:
https://github.com/jacobp100/cssta#%EF%B8%8F-theming
https://github.com/jacobp100/cssta/blob/master/src/native/extractRules.js

[kristerkari]

However the parser doesn't follow any CSS Spec strictly in general so I don't feel like loosly detect css variables and passing them down as-is is necesserily a bad thing.

True, but this is more a question of does it make sense to add support for something if it can not be fully supported. People who are just writing CSS in React Native without knowing anything about the parser might not expect something to be only partly implemented.

What I see more likely (just my opinion) that css-to-react-native should do:

• Not support CSS variables at all and handle the values at runtime with a separate library.
  OR
• Parse values that contain CSS varibles to strings and handle the values at runtime with a separate library.

[jacobp100]

cssta pre-evaluates vars before putting them into css-to-react-native

I think adding them to this parser opens a can of worms, because one var can go into multiple values (e.g. --padding: 10px 20px)

[kristerkari]

cssta pre-evaluates vars before putting them into css-to-react-native

That's a quite nice way to handle it. You can still get the same end result as you would without using CSS vars.