Remove inline styles from _error.js and error-debug.js

vercel · Dec 13, 2018 · cf30cb6 · timneutkens · Dec 13, 2018 · dav-is
1 parent 247aa1d
commit cf30cb6
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 91 deletions.
diff --git a/packages/next/build/webpack-config.js b/packages/next/build/webpack-config.js
@@ -15,7 +15,7 @@ import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { ReactLoadablePlugin } from './webpack/plugins/react-loadable-plugin'
 import {SERVER_DIRECTORY, REACT_LOADABLE_MANIFEST, CLIENT_STATIC_FILES_RUNTIME_WEBPACK, CLIENT_STATIC_FILES_RUNTIME_MAIN} from 'next-server/constants'
-import {NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST_CLIENT, NEXT_PROJECT_ROOT_DIST_SERVER, DEFAULT_PAGES_DIR} from '../lib/constants'
+import {NEXT_PROJECT_ROOT, NEXT_PROJECT_ROOT_NODE_MODULES, NEXT_PROJECT_ROOT_DIST_CLIENT, NEXT_PROJECT_ROOT_DIST_SERVER, NEXT_PROJECT_ROOT_DIST_STATIC, DEFAULT_PAGES_DIR} from '../lib/constants'
 import TerserPlugin from 'terser-webpack-plugin'
 import AssetsSizePlugin from './webpack/plugins/assets-size-plugin'
 
@@ -277,6 +277,19 @@ export default async function getBaseWebpackConfig (dir, {dev = false, isServer
           include: defaultLoaders.hotSelfAccept.options.include,
           use: defaultLoaders.hotSelfAccept
         },
+        // TODO: putting !isServer here causes problems?
+        {
+          include: [NEXT_PROJECT_ROOT_DIST_STATIC],
+          use: [
+            {
+              loader: 'emit-file-loader',
+              options: {
+                name: `static/runtime/${dev ? '[name]-[hash].[ext]' : '[name]-[hash].[ext]'}`,
+                importPath: true
+              }
+            }
+          ]
+        },
         {
           test: /\.(js|jsx)$/,
           include: [dir, NEXT_PROJECT_ROOT_DIST_CLIENT, DEFAULT_PAGES_DIR, /next-server[\\/]dist[\\/]lib/],

diff --git a/packages/next/build/webpack/loaders/emit-file-loader.js b/packages/next/build/webpack/loaders/emit-file-loader.js
@@ -25,7 +25,7 @@ module.exports = function (content, sourceMap) {
   const interpolatedName = interpolateName(loaderUtils.interpolateName(this, name, opts), {name, opts})
   const emit = (code, map) => {
     this.emitFile(interpolatedName, code, map)
-    callback(null, code, map)
+    query.importPath ? callback(null, `module.exports = '${interpolatedName}';`) : callback(null, code, map)
   }
 
   if (query.transform) {

diff --git a/packages/next/lib/constants.js b/packages/next/lib/constants.js
@@ -5,3 +5,4 @@ export const NEXT_PROJECT_ROOT_NODE_MODULES = join(NEXT_PROJECT_ROOT, 'node_modu
 export const DEFAULT_PAGES_DIR = join(NEXT_PROJECT_ROOT_DIST, 'pages')
 export const NEXT_PROJECT_ROOT_DIST_CLIENT = join(NEXT_PROJECT_ROOT_DIST, 'client')
 export const NEXT_PROJECT_ROOT_DIST_SERVER = join(NEXT_PROJECT_ROOT_DIST, 'server')
+export const NEXT_PROJECT_ROOT_DIST_STATIC = join(NEXT_PROJECT_ROOT_DIST, 'static')
diff --git a/packages/next/pages/_error.js b/packages/next/pages/_error.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import HTTPStatus from 'http-status'
 import Head from 'next-server/head'
+import styleSheet from '../static/error.css'
 
 export default class Error extends React.Component {
   static getInitialProps ({ res, err }) {
@@ -15,16 +16,17 @@ export default class Error extends React.Component {
       ? 'This page could not be found'
       : HTTPStatus[statusCode] || 'An unexpected error has occurred'
 
-    return <div style={styles.error}>
+    // TODO: Asset prefix and isnt _next a config option?
+    return <div className='error'>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <link rel='stylesheet' href={`/_next/${styleSheet}`} />
         <title>{statusCode}: {title}</title>
       </Head>
       <div>
-        <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
-        {statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
-        <div style={styles.desc}>
-          <h2 style={styles.h2}>{title}.</h2>
+        {statusCode ? <h1>{statusCode}</h1> : null}
+        <div className='desc'>
+          <h2>{title}.</h2>
         </div>
       </div>
     </div>
@@ -36,44 +38,3 @@ if (process.env.NODE_ENV !== 'production') {
     statusCode: PropTypes.number
   }
 }
-
-const styles = {
-  error: {
-    color: '#000',
-    background: '#fff',
-    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
-    height: '100vh',
-    textAlign: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-
-  desc: {
-    display: 'inline-block',
-    textAlign: 'left',
-    lineHeight: '49px',
-    height: '49px',
-    verticalAlign: 'middle'
-  },
-
-  h1: {
-    display: 'inline-block',
-    borderRight: '1px solid rgba(0, 0, 0,.3)',
-    margin: 0,
-    marginRight: '20px',
-    padding: '10px 23px 10px 0',
-    fontSize: '24px',
-    fontWeight: 500,
-    verticalAlign: 'top'
-  },
-
-  h2: {
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'inherit',
-    margin: 0,
-    padding: 0
-  }
-}
diff --git a/packages/next/server/error-debug.js b/packages/next/server/error-debug.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import ansiHTML from 'ansi-html'
 import Head from 'next-server/head'
+import styleSheet from '../static/error-debug.css'
 
 // This component is rendered through dev-error-overlay on the client side.
 // On the server side it's rendered directly
 export default function ErrorDebug ({error, info}) {
   const { name, message } = error
   return (
-    <div style={styles.errorDebug}>
+    <div className='errorDebug'>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <link rel='stylesheet' href={`/_next/${styleSheet}`} />
       </Head>
       {
         name === 'ModuleBuildError' && message
-          ? <pre style={styles.stack} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
+          ? <pre className='stack' dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
           : <StackTrace error={error} info={info} />
       }
     </div>
@@ -22,53 +24,16 @@ export default function ErrorDebug ({error, info}) {
 
 const StackTrace = ({ error: { name, message, stack }, info }) => (
   <div>
-    <div style={styles.heading}>{message || name}</div>
-    <pre style={styles.stack}>
+    <div className='heading'>{message || name}</div>
+    <pre className='stack'>
       {stack}
     </pre>
-    {info && <pre style={styles.stack}>
+    {info && <pre className='stack'>
       {info.componentStack}
     </pre>}
   </div>
 )
 
-export const styles = {
-  errorDebug: {
-    background: '#ffffff',
-    boxSizing: 'border-box',
-    overflow: 'auto',
-    padding: '24px',
-    position: 'fixed',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 9999,
-    color: '#000000'
-  },
-
-  stack: {
-    fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", consolas, menlo-regular, monospace',
-    fontSize: '13px',
-    lineHeight: '18px',
-    color: '#777',
-    margin: 0,
-    whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word',
-    marginTop: '16px'
-  },
-
-  heading: {
-    fontFamily: '-apple-system, system-ui, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
-    fontSize: '20px',
-    fontWeight: '400',
-    lineHeight: '28px',
-    color: '#000000',
-    marginBottom: '0px',
-    marginTop: '0px'
-  }
-}
-
 const encodeHtml = str => {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }

diff --git a/packages/next/static/error-debug.css b/packages/next/static/error-debug.css
@@ -0,0 +1,34 @@
+.errorDebug {
+  background: #ffffff;
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 24px;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  color: #000000;
+}
+
+.stack {
+  font-family: "SF Mono", "Roboto Mono", "Fira Mono", consolas, menlo-regular, monospace;
+  font-size: 13px;
+  line-height: 18px;
+  color: #777;
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin-top: 16px;
+}
+
+.heading {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #000000;
+  margin-bottom: 0px;
+  margin-top: 0px;
+}
diff --git a/packages/next/static/error.css b/packages/next/static/error.css
@@ -0,0 +1,42 @@
+body {
+  margin: 0;
+}
+
+.error {
+  color: #000;
+  background: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+  height: 100vh;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.desc {
+  display: inline-block;
+  text-align: left;
+  line-height: 49px;
+  height: 49px;
+  vertical-align: middle;
+}
+
+h1 {
+  display: inline-block;
+  border-right: 1px solid rgba(0, 0, 0,.3);
+  margin: 0;
+  margin-right: 20px;
+  padding: 10px 23px 10px 0;
+  font-size: 24px;
+  font-weight: 500;
+  vertical-align: top;
+}
+
+h2 {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+}
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -1,7 +1,7 @@
 const notifier = require('node-notifier')
 
 export async function compile (task) {
-  await task.parallel(['bin', 'server', 'nextbuild', 'nextbuildstatic', 'pages', 'lib', 'client'])
+  await task.parallel(['copyStatic', 'bin', 'server', 'nextbuild', 'nextbuildstatic', 'pages', 'lib', 'client'])
 }
 
 export async function bin (task, opts) {
@@ -39,6 +39,10 @@ export async function pages (task, opts) {
   await task.source(opts.src || 'pages/**/*.+(js|ts|tsx)').typescript().target('dist/pages')
 }
 
+export async function copyStatic (task, opts) {
+  await task.source(opts.src || 'static/**/*').target('dist/static')
+}
+
 export async function build (task) {
   await task.serial(['compile'])
 }