Request: Support For JSS-in-CSS in Server-Rendered Components #922
Description
JSS-in-CSS libraries are becoming more and more popular (e.g. styled-components with 18,000 stars at the moment). These libraries work by dynamically generating styles from within components and attaching these styles to the page via a dynamically generated (and updated) <style> tag. This works great out of the box for non-server-rendered components, however for server-rendered components this poses a problem, because in addition to the rendered HTML, the rendered styles also need to be attached to the page. Currently react-rails offers no API for this, and assumes that a component will return only its own rendered HTML from react_component().
There is a workaround of sorts as outline by @bakunyo in #864 which involves returning the rendered styles inside a <style> tag alongside the component's HTML, then dynamically moving the <style> tag to the document <head> before the component is hydrated (which would otherwise result in the unexpected styles being discarded). For obvious reasons this is a very hacky fix and far from ideal.
It seems to me that some kind of additional API needs to exist to allow a component to render a <style> tag to the <head> of the document. Given that ReactRailsUJS.serverRender currently returns a string, could it also support returning an Array containing the component string as the first value and the styles as the second? If this second argument is present it could be rendered to the <head> via a helper.