{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/2007","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/2007/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/2007/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/2007/events","html_url":"https://github.com/callemall/material-ui/pull/2007","id":114028673,"number":2007,"title":"Universal Rendering Support","user":{"login":"Cavitt","id":2079305,"avatar_url":"https://avatars.githubusercontent.com/u/2079305?v=3","gravatar_id":"","url":"https://api.github.com/users/Cavitt","html_url":"https://github.com/Cavitt","followers_url":"https://api.github.com/users/Cavitt/followers","following_url":"https://api.github.com/users/Cavitt/following{/other_user}","gists_url":"https://api.github.com/users/Cavitt/gists{/gist_id}","starred_url":"https://api.github.com/users/Cavitt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Cavitt/subscriptions","organizations_url":"https://api.github.com/users/Cavitt/orgs","repos_url":"https://api.github.com/users/Cavitt/repos","events_url":"https://api.github.com/users/Cavitt/events{/privacy}","received_events_url":"https://api.github.com/users/Cavitt/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/callemall/material-ui/labels/Review:%20review-needed","name":"Review: review-needed","color":"fbca04"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-10-29T11:17:45Z","updated_at":"2015-11-02T13:45:56Z","closed_at":"2015-11-01T19:15:40Z","pull_request":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/2007","html_url":"https://github.com/callemall/material-ui/pull/2007","diff_url":"https://github.com/callemall/material-ui/pull/2007.diff","patch_url":"https://github.com/callemall/material-ui/pull/2007.patch"},"body":"I've implemented [inline-style-prefixing](https://github.com/rofrischmann/inline-style-prefixer), a user agent based prefixer for client and server side rendering.\r\nWhen rendering server-side define `navigator.userAgent` after receiving request headers but before rendering styles.\r\nThis may seem a bit hacky, but it's the best short-term solution I could come up with that is backwards compatible and is an easy drop-in solution.\r\nThere may be an easier way I'm missing though, feedback is welcome.\r\nA better long-term solution would be to replace the custom framework with [Look](https://github.com/rofrischmann/react-look) *(or [Radium](http://projects.formidablelabs.com/radium/) once [this issue](https://github.com/FormidableLabs/radium/issues/374) is resolved)*.\r\n\r\nA warning will be shown when attempting to use server-side rendering without defining a user agent.\r\nClient side rendering should automatically work like before, as all modern browsers provide user agent via the navigator property.\r\n\r\nExample:\r\n```javascript\r\nfunction render(req, res, next) {\r\n  const {headers} = req;\r\n\r\n  global.navigator = {\r\n    userAgent: headers['user-agent']\r\n  };\r\n\r\n  const styledHtml = getAppHtml();\r\n\r\n  return '<!DOCTYPE html>' + ReactDOMServer.renderToStaticMarkup(\r\n    <Html\r\n      bodyHtml={`<div id=\"app\">${styledHtml}</div>`}\r\n    />\r\n  );\r\n}\r\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/153020781","html_url":"https://github.com/callemall/material-ui/pull/2007#issuecomment-153020781","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/2007","id":153020781,"user":{"login":"rozzzly","id":2515134,"avatar_url":"https://avatars.githubusercontent.com/u/2515134?v=3","gravatar_id":"","url":"https://api.github.com/users/rozzzly","html_url":"https://github.com/rozzzly","followers_url":"https://api.github.com/users/rozzzly/followers","following_url":"https://api.github.com/users/rozzzly/following{/other_user}","gists_url":"https://api.github.com/users/rozzzly/gists{/gist_id}","starred_url":"https://api.github.com/users/rozzzly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rozzzly/subscriptions","organizations_url":"https://api.github.com/users/rozzzly/orgs","repos_url":"https://api.github.com/users/rozzzly/repos","events_url":"https://api.github.com/users/rozzzly/events{/privacy}","received_events_url":"https://api.github.com/users/rozzzly/received_events","type":"User","site_admin":false},"created_at":"2015-11-02T13:45:56Z","updated_at":"2015-11-02T13:45:56Z","body":"I've got a project I'm using MUI for and I'm at v0.12.1. Going through the React v0.14 update, dealing with everything breaking, is not something I want to do atm. Gonna wait it out until some of my other deps (have nearly) finished their updates. Anyway, I don't have the luxury of being able to pull in these changes but I am still affected with the same issue. \r\n\r\n**For anyone who doesn't want to/can't commit to bumping their build up: here's a quick little hack that worked for me.** This just disables the autoprefixer so everything is the same client/server.\r\n\r\n```js\r\n// -------------------------------------\r\n// neuter MUI AutoPrefixer >:D\r\n// -------------------------------------\r\nMUI.Styles.AutoPrefix.all = (val) => val;\r\n//MUI.Styles.AutoPrefix.set = ... looks like this one might break something. leaving it as it is.\r\nMUI.Styles.AutoPrefix.single = (val) => val;\r\nMUI.Styles.AutoPrefix.singleHypenated = (val) => val;\r\n```\r\n\r\nThat code hijacks [**`[callemall/material-ui]`**/src/styles/auto-prefix.js](https://github.com/callemall/material-ui/blob/085ef01d8029568163c1371b44e68be9d9f1f10e/src/styles/auto-prefix.js) and just hands back the value passed to it. I placed this right above my `injectTapEventPlugin();` but anywhere should work as long as it can overwrite before the rendering begins.\r\n\r\nI don't get autoprefixer, but at least SSR is working again so that's what I'm interested atm. I'm sure someone else will find this useful. \r\n\r\n\r\nAlso, what if (given the current implementation) if rendered markup loads on a browser that it didn't get prefixed for, it auto-disables itself. That way you could get the initial render out, then flip the prefixer back on. I'm sure that's not that big of an advantage, but it's got to be better than throwing out the entire render tree. Not a solution, just a thought. Do with it as you will :wink: :"}}