Move global styles inside the app

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(
-  <div>
-    <Global styles={globalStyles} />
-    <App {...props} />
-  </div>,
-  document.getElementById('root')
-);
+ReactDOM.hydrate(<App {...props} />, 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`
-  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')
-);
+ReactDOM.render(<App />, 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>