Radium: Prefixed inline styles are not resolved

[sunny]

Inline styles do not generate valid CSS properties, when using the (default) prefix plugin.

const React = require("react") // v16.2.0
const Radium = require("radium") // v0.19.6
const ReactDOMServer = require("react-dom/server") // v16.2.0

const Foo = () => <div style={{display: "flex"}} />
const StyledFoo = Radium()(Foo)

ReactDOMServer.renderToString(<StyledFoo />)

The generated style (tested in RunKit) gives invalid CSS properties :

<div style="display:-webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex" … />

When it should be :

<div style="display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex" … />

According to the inline-style-prefixer documentation, array values should be resolved, using something like css-in-js-utils's resolveArrayValue, instead of joining the values by ;.

[ryan-roemer]

@sunny -- Would you be able to take a fork of Radium and create a failing unit test and open a work-in-progress PR? That would be great for helping us identify exactly what is going wrong. Here's the folder where our SSR tests reside: https://github.com/FormidableLabs/radium/blob/master/test/

[sunny]

Hey @ryan-roemer! Sure, here is a PR with a failing test -----^

This seems related to #951, which was resolved by… removing prefixes altogether.

[ryan-roemer]

@sunny -- Thanks! We'll hopefully dig in next week!

[sunny]

\o/ Thank you for the timely fix 🎉