Move global styles inside the app

functions/package-lock.json

@@ -980,6 +980,26 @@
       "optional": true,
       "requires": {
         "readable-stream": "~1.0.32"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "optional": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "optional": true
+        }
       }
     },
     "bytebuffer": {
@@ -3800,18 +3820,6 @@
         "scheduler": "^0.12.0"
       }
     },
-    "readable-stream": {
-      "version": "1.0.34",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-      "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-      "optional": true,
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.1",
-        "isarray": "0.0.1",
-        "string_decoder": "~0.10.x"
-      }
-    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -4230,12 +4238,6 @@
         "strip-ansi": "^3.0.0"
       }
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "optional": true
-    },
     "stringifier": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/stringifier/-/stringifier-1.4.0.tgz",

modules/actions/serveMainPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import { renderToString } from 'react-dom/server';
 
 import MainTemplate from '../client/MainTemplate';
 import MainApp from '../client/main/App';
@@ -8,9 +8,7 @@ import getEntryPoints from '../utils/getEntryPoints';
 import renderTemplate from '../utils/renderTemplate';
 
 export default function serveMainPage(req, res) {
-  const content = createHTML(
+  const content = createHTML(renderToString(React.createElement(MainApp)));
-    ReactDOMServer.renderToString(React.createElement(MainApp))
-  );
 
   const entryPoints = getEntryPoints('main', {
     es: 'module',

modules/client/autoIndex.js

@@ -1,26 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Global, css } from '@emotion/core';
 
 import App from './autoIndex/App';
 
-const globalStyles = css`
-  body {
-    font-size: 14px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      Helvetica, Arial, sans-serif;
-    line-height: 1.7;
-    padding: 0px 10px 5px;
-    color: #000000;
-  }
-`;
-
 const props = window.__DATA__ || {};
 
-ReactDOM.hydrate(
+ReactDOM.hydrate(<App {...props} />, document.getElementById('root'));
-  <div>
-    <Global styles={globalStyles} />
-    <App {...props} />
-  </div>,
-  document.getElementById('root')
-);

modules/client/autoIndex/App.js

@@ -1,8 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Global, css } from '@emotion/core';
 
 import DirectoryListing from './DirectoryListing';
 
+const globalStyles = css`
+  body {
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif;
+    line-height: 1.7;
+    padding: 0px 10px 5px;
+    color: #000000;
+  }
+`;
+
 export default class App extends React.Component {
   static defaultProps = {
     availableVersions: []
@@ -18,6 +30,8 @@ export default class App extends React.Component {
   render() {
     return (
       <div css={{ maxWidth: 900, margin: '0 auto' }}>
+        <Global styles={globalStyles} />
+
         <header
           css={{
             display: 'flex',

modules/client/main.js

@@ -1,43 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Global, css } from '@emotion/core';
 
 import App from './main/App';
 
-const globalStyles = css`
+ReactDOM.render(<App />, document.getElementById('root'));
-  body {
-    font-size: 14px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      Helvetica, Arial, sans-serif;
-    line-height: 1.7;
-    padding: 5px 20px;
-    color: #000000;
-  }
-
-  @media (min-width: 800px) {
-    body {
-      padding: 40px 20px 120px;
-    }
-  }
-
-  a:link {
-    color: blue;
-  }
-  a:visited {
-    color: rebeccapurple;
-  }
-
-  dd,
-  ul {
-    margin-left: 0;
-    padding-left: 25px;
-  }
-`;
-
-ReactDOM.render(
-  <div>
-    <Global styles={globalStyles} />
-    <App />
-  </div>,
-  document.getElementById('root')
-);

modules/client/main/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Global, css } from '@emotion/core';
 import formatBytes from 'pretty-bytes';
 import formatDate from 'date-fns/format';
 import parseDate from 'date-fns/parse';
@@ -10,6 +11,36 @@ import formatPercent from '../utils/formatPercent';
 import cloudflareLogo from './CloudflareLogo.png';
 import herokuLogo from './HerokuLogo.png';
 
+const globalStyles = css`
+  body {
+    font-size: 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif;
+    line-height: 1.7;
+    padding: 5px 20px;
+    color: #000000;
+  }
+
+  @media (min-width: 800px) {
+    body {
+      padding: 40px 20px 120px;
+    }
+  }
+
+  a:link {
+    color: blue;
+  }
+  a:visited {
+    color: rebeccapurple;
+  }
+
+  dd,
+  ul {
+    margin-left: 0;
+    padding-left: 25px;
+  }
+`;
+
 const styles = {
   heading: {
     margin: 0,
@@ -84,6 +115,8 @@ export default class App extends React.Component {
 
     return (
       <div css={{ maxWidth: 700, margin: '0 auto' }}>
+        <Global styles={globalStyles} />
+
         <header>
           <h1 css={styles.heading}>unpkg</h1>