Support interpolated variables in values

[dariocravero]

Support:

const val = 10;
<div style={{transform: "translateX(" + val + ")" }} />

Ref #12.

• add failing test
• fix it :)

[dariocravero]

@salzhrani I think it has do to with the fact that the value is a BinaryExpression and it would have to be "flattened down" to a literal.

[salzhrani]

What if val is passed down, shouldn't the value stay as "translateX(" + val + ")"

[dariocravero]

Oh, ok, sorry, from your example I thought you actually wanted the value converted! If you want it as a string then there's nothing to be done, it should just work as is... :)

[salzhrani]

Check my failing test ... it seems not to

[dariocravero]

This https://travis-ci.org/UXtemple/babel-plugin-react-autoprefix/builds/74038808#L138?

[salzhrani]

Yes ... I hope that that
<div style={{transform: "translateX(" + val + ")" }} />
would become something like
<div style={{transform: "translateX(" + val + ")" , webkitTransform: "translateX(" + val + ")", msTransform: "translateX(" + val + ")" }}, />

I apologize if couldn't convey my use case properly.

[salzhrani]

If you think this is out of the scope of the plugin ... feel free to close it.

[dariocravero]

Sorry for the delay in answering. I don't know if it's necessarily out of scope but I don't really have time to go through it now :(. Feel free to send a patch if you manage to get around it :), I might do at some point and will let you know when that happens. Thanks, Darío