Use inline-style-prefixer

[ianobermiller]

Instead of Radium's DOM-based prefixer, which does not work on the server, we should use inline-style-prefixer, which does prefixing based on user agent (using the same data as autoprefixer). This library will make prefixes rendered on the server identical to those on the client, as long as the user agent is the same.

I'm working with @rofrischmann to clean up the API and reduce the size of the library, but as it stands it will not add too much bulk to Radium, maybe 1k or 2k more.

This will solve a number of issues: #201, #301, #311, #328, #342, #350, #351.

[alexlande]

👍 This makes a ton of sense

[stevewillard]

This looks awesome! Excited for this.

[geoRG77]

@ianobermiller Hey Ian, how it goes with this? Any help needed? I'm really excited about this feature as it will finally fix the server rendering issue of our isomorphic app.

[sf-old]

Also interested in the status of this and how universal rendering should be handled with regards to Radium in general.

I'm currently creating a inline-style-prefixer Prefixer instance when a server requests comes in and then passing it to each component via a React context prop. I'm then using a custom Radium plugin to inspect the component (getComponentField) to find the prefixer instance to perform the prefixing (along the lines of https://gist.github.com/Simonify/3f5a9934ab8886cd7b88).

While this seems to work, it's a bit messy (though I'm not really sure how else to provide the plugin with the right prefixer/UA when it comes to server requests without using context). Any guidance would be appreciated.

[ianobermiller]

It's almost ready. Chime in on #397 if you'd like to help me solve the configuration issues that are preventing me from landing it. @simonify, ideally you don't have to create such a workaround just to prefix correctly!

[vijayrawatsan]

👍 for this feature.