{"action":"created","issue":{"url":"https://api.github.com/repos/zeit/next.js/issues/1751","repository_url":"https://api.github.com/repos/zeit/next.js","labels_url":"https://api.github.com/repos/zeit/next.js/issues/1751/labels{/name}","comments_url":"https://api.github.com/repos/zeit/next.js/issues/1751/comments","events_url":"https://api.github.com/repos/zeit/next.js/issues/1751/events","html_url":"https://github.com/zeit/next.js/issues/1751","id":222474084,"number":1751,"title":"Wrapping App and injecting styles into the head in _document","user":{"login":"philpl","id":2041385,"avatar_url":"https://avatars3.githubusercontent.com/u/2041385?v=3","gravatar_id":"","url":"https://api.github.com/users/philpl","html_url":"https://github.com/philpl","followers_url":"https://api.github.com/users/philpl/followers","following_url":"https://api.github.com/users/philpl/following{/other_user}","gists_url":"https://api.github.com/users/philpl/gists{/gist_id}","starred_url":"https://api.github.com/users/philpl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/philpl/subscriptions","organizations_url":"https://api.github.com/users/philpl/orgs","repos_url":"https://api.github.com/users/philpl/repos","events_url":"https://api.github.com/users/philpl/events{/privacy}","received_events_url":"https://api.github.com/users/philpl/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-04-18T16:30:55Z","updated_at":"2017-04-22T00:48:03Z","closed_at":null,"body":"For styled-components @geelen has worked on a new `StyleSheetManager` provider that allows the library to be used with both asynchronous and synchronous rendering. It also introduces style rehydration on the client side.\r\n\r\nThe problem we ran into with next.js is, that it's not possible to wrap the entire App in our provider and then inject the generated CSS into the head.\r\n\r\nWe found a workaround that needs us to wrap every page, and inject the styles in `style` tags in the body, which is obviously not that nice. Is there any plan to support wrapping the entire app, for every page, while still being able to manipulate the head at the same time on the server side?\r\n\r\nOur API for this will look sth like this:\r\n\r\n```js\r\nconst sheet = new ServerStyleSheet()\r\nconst html = renderToString(sheet.collectStyles(<Example/>))\r\nconst css = sheet.getStyleTags()\r\n```\r\n\r\nWhere `sheet.collectStyles` wraps that element in our provider.\r\n\r\nThe PR for the new stylesheet on the SC repo: https://github.com/styled-components/styled-components/pull/679"},"comment":{"url":"https://api.github.com/repos/zeit/next.js/issues/comments/296335092","html_url":"https://github.com/zeit/next.js/issues/1751#issuecomment-296335092","issue_url":"https://api.github.com/repos/zeit/next.js/issues/1751","id":296335092,"user":{"login":"khankuan","id":1406170,"avatar_url":"https://avatars1.githubusercontent.com/u/1406170?v=3","gravatar_id":"","url":"https://api.github.com/users/khankuan","html_url":"https://github.com/khankuan","followers_url":"https://api.github.com/users/khankuan/followers","following_url":"https://api.github.com/users/khankuan/following{/other_user}","gists_url":"https://api.github.com/users/khankuan/gists{/gist_id}","starred_url":"https://api.github.com/users/khankuan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/khankuan/subscriptions","organizations_url":"https://api.github.com/users/khankuan/orgs","repos_url":"https://api.github.com/users/khankuan/repos","events_url":"https://api.github.com/users/khankuan/events{/privacy}","received_events_url":"https://api.github.com/users/khankuan/received_events","type":"User","site_admin":false},"created_at":"2017-04-22T00:48:03Z","updated_at":"2017-04-22T00:48:03Z","body":"@philpl What do you think of this proposal:\r\n\r\n```\r\nexport default class MyDocument extends Document {\r\n  static getInitialProps ({ renderPage }) {\r\n    const sheet = new ServerStyleSheet()\r\n    const {html, head} = renderPage(sheet.collectStyles)\r\n    const styles = sheet.getStyleTags()\r\n    return { html, head, styles }\r\n  }\r\n\r\n  render () {\r\n    return (\r\n     <html>\r\n       <Head>\r\n         <style>{this.props.styles}</style>\r\n       </Head>\r\n       <body>\r\n         <Main />\r\n         <NextScript />\r\n       </body>\r\n     </html>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nThis implies a change here:\r\nhttps://github.com/zeit/next.js/pull/1776"}}
{"actor":{"display_login":"khankuan"}}