define styles of pages with styled-jsx

vercel · Dec 17, 2016 · a73047e · a73047e
1 parent 1408cc1
commit a73047e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 96 deletions.
diff --git a/pages/_error-debug.js b/pages/_error-debug.js
@@ -1,7 +1,5 @@
 import React from 'react'
 import ansiHTML from 'ansi-html'
-import Head from 'next/head'
-import style from 'next/css'
 
 export default class ErrorDebug extends React.Component {
   static getInitialProps ({ err }) {
@@ -12,21 +10,47 @@ export default class ErrorDebug extends React.Component {
   render () {
     const { name, message, stack, path } = this.props
 
-    return <div className={styles.errorDebug}>
-      <Head>
-        <style dangerouslySetInnerHTML={{ __html: `
-          body {
-            background: #a6004c;
-            margin: 0;
-          }
-        `}} />
-      </Head>
-      {path ? <div className={styles.heading}>Error in {path}</div> : null}
+    return <div className='errorDebug'>
+      {path ? <div className='heading'>Error in {path}</div> : null}
       {
         name === 'ModuleBuildError'
-        ? <pre className={styles.message} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
-        : <pre className={styles.message}>{stack}</pre>
+        ? <pre className='message' dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
+        : <pre className='message'>{stack}</pre>
       }
+      <style jsx global>{`
+        body {
+          background: #a6004c;
+          margin: 0;
+        }
+      `}</style>
+      <style jsx>{`
+        .errorDebug {
+          height: 100vh;
+          padding: 16px;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .message {
+          font-family: "SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace;
+          font-size: 10px;
+          color: #fbe7f1;
+          margin: 0;
+          white-space: pre-wrap;
+          word-wrap: break-word;
+        }
+
+        .heading {
+          font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif,
+          font-size: 13px,
+          font-weight: bold,
+          color: #ff84bf,
+          margin-bottom: 20px
+        }
+      `}</style>
     </div>
   }
 }
@@ -35,40 +59,6 @@ const encodeHtml = str => {
   return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
-const styles = {
-  body: style({
-    background: '#a6004c',
-    margin: 0
-  }),
-
-  errorDebug: style({
-    height: '100vh',
-    padding: '16px',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }),
-
-  message: style({
-    fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace',
-    fontSize: '10px',
-    color: '#fbe7f1',
-    margin: 0,
-    whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word'
-  }),
-
-  heading: style({
-    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
-    fontSize: '13px',
-    fontWeight: 'bold',
-    color: '#ff84bf',
-    marginBottom: '20px'
-  })
-}
-
 // see color definitions of babel-code-frame:
 // https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js
 

diff --git a/pages/_error.js b/pages/_error.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import style from 'next/css'
 
 export default class Error extends React.Component {
   static getInitialProps ({ res, xhr }) {
@@ -13,54 +12,53 @@ export default class Error extends React.Component {
       ? 'This page could not be found'
       : (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred')
 
-    return <div className={styles.error}>
-      <div className={styles.text}>
-        {statusCode ? <h1 className={styles.h1}>{statusCode}</h1> : null}
-        <div className={styles.desc}>
-          <h2 className={styles.h2}>{title}.</h2>
+    return <div className='error'>
+      <div>
+        {statusCode ? <h1>{statusCode}</h1> : null}
+        <div className='desc'>
+          <h2>{title}.</h2>
         </div>
       </div>
-    </div>
-  }
-}
+      <style jsx>{`
+        .error {
+          color: #000;
+          background: #fff;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          position: absolute;
+          font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
+          text-align: center;
+          padding-top: 20%;
+        }
 
-const styles = {
-  error: style({
-    color: '#000',
-    background: '#fff',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    position: 'absolute',
-    fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
-    textAlign: 'center',
-    paddingTop: '20%'
-  }),
+        .desc {
+          display: inline-block;
+          text-align: left;
+          line-height: 49px;
+          height: 49px;
+          vertical-align: middle;
+        }
 
-  desc: style({
-    display: 'inline-block',
-    textAlign: 'left',
-    lineHeight: '49px',
-    height: '49px',
-    verticalAlign: 'middle'
-  }),
+        h1 {
+          display: inline-block;
+          border-right: 1px solid rgba(0, 0, 0,.3);
+          margin: 0;
+          margin-right: 20px;
+          padding: 10px 23px;
+          font-size: 24px;
+          font-weight: 500;
+          vertical-align: top;
+        }
 
-  h1: style({
-    display: 'inline-block',
-    borderRight: '1px solid rgba(0, 0, 0,.3)',
-    margin: 0,
-    marginRight: '20px',
-    padding: '10px 23px',
-    fontSize: '24px',
-    fontWeight: 500,
-    verticalAlign: 'top'
-  }),
-
-  h2: style({
-    fontSize: '14px',
-    fontWeight: 'normal',
-    margin: 0,
-    padding: 0
-  })
+        h2 {
+          font-size: 14px;
+          font-weight: normal;
+          margin: 0;
+          padding: 0;
+        }
+      `}</style>
+    </div>
+  }
 }
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -67,8 +67,8 @@ describe('integration tests', () => {
 
   test('error 404', async () => {
     const html = await render('/non-existent')
-    expect(html).toMatch(/<h1 class=".+">404<\/h1>/)
-    expect(html).toMatch(/<h2 class=".+">This page could not be found\.<\/h2>/)
+    expect(html).toMatch(/<h1 data-jsx=".+">404<\/h1>/)
+    expect(html).toMatch(/<h2 data-jsx=".+">This page could not be found\.<\/h2>/)
   })
 
   test('finishes response', async () => {