Add ServerStyleSheet to ServerRenderer.ts

package-lock.json

@@ -2604,6 +2604,16 @@
         "@types/react": "*"
       }
     },
+    "@types/react-native": {
+      "version": "0.60.16",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.60.16.tgz",
+      "integrity": "sha512-IH9QvrvlZRrtfVi5XiMuh+hT5SvgcGzx4szEi+Vge3qmvU3jlboEsXg4iWRPtgFx3eMIZoAksR3kbgVrB8ctLA==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/react-redux": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.2.tgz",
@@ -2696,6 +2706,17 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@types/styled-components": {
+      "version": "4.1.19",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-4.1.19.tgz",
+      "integrity": "sha512-nDkoTQ8ItcJiyEvTa24TwsIpIfNKCG+Lq0LvAwApOcjQ8OaeOOCg66YSPHBePHUh6RPt1LA8aEzRlgWhQPFqPg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*",
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/superagent": {
       "version": "3.8.6",
       "resolved": "https://registry.npmjs.org/@types/superagent/-/superagent-3.8.6.tgz",

package.json

@@ -48,6 +48,7 @@
     "@types/sanitize-html": "^1.18.3",
     "@types/shortid": "0.0.29",
     "@types/std-mocks": "^1.0.0",
+    "@types/styled-components": "^4.1.19",
     "@types/supertest": "^2.0.7",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^2.2.0",

packages/client/src/renderer/ServerRenderer.tsx

@@ -5,6 +5,7 @@ import { StaticRouterContext } from 'react-router'
 import { StaticRouter } from 'react-router-dom'
 import ssrPrepass from 'react-ssr-prepass'
 import { Store } from 'redux'
+import { ServerStyleSheet } from 'styled-components'
 import { ClientConfig } from './ClientConfig'
 import { Renderer } from './Renderer'
 
@@ -21,15 +22,15 @@ export class ServerRenderer<Props> implements Renderer<Props> {
     store: Store<State>,
     props: Props,
     config: ClientConfig,
-    host = '',
-    headers: Record<string, string> = {},
   ) {
     const {RootComponent} = this
     // TODO set cookie in headers here...
 
     const context: StaticRouterContext = {}
 
-    const element = (
+    const sheet = new ServerStyleSheet()
+
+    const element = sheet.collectStyles(
       <Provider store={store}>
         <StaticRouter
           basename={config.baseUrl}
@@ -38,15 +39,15 @@ export class ServerRenderer<Props> implements Renderer<Props> {
         >
           <RootComponent {...props} />
         </StaticRouter>
-      </Provider>
+      </Provider>,
-    )
+      )
 
     await ssrPrepass(element, async (el, component) => {
       if (component && 'fetchData' in component) {
         await (component as ComponentWithFetchData).fetchData()
       }
     })
-    const stream = renderToNodeStream(element)
+    const stream = sheet.interleaveWithNodeStream(renderToNodeStream(element))
     return stream
   }
 }