Incorporate styled-jsx (vercel#420)

* integrate styled-jsx * define styles of pages with styled-jsx * bump styled-jsx * bump styled-jsx * error-debug: fix style * bump styled-jsx * fix examples to use styled-jsx * bump styled-jsx
wangleihd · Dec 19, 2016 · a87ef1a · a87ef1a
1 parent 26c485a
commit a87ef1a
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 181 deletions.
diff --git a/bench/fixtures/basic/pages/css.js b/bench/fixtures/basic/pages/css.js
diff --git a/examples/basic-css/pages/index.js b/examples/basic-css/pages/index.js
@@ -1,19 +1,19 @@
 import React from 'react'
-import style from 'next/css'
 
 export default () => (
-  <div className={styles}>
+  <div className='hello'>
     <p>Hello World</p>
+    <style jsx>{`
+      .hello {
+        font: 15px Helvetica, Arial, sans-serif;
+        background: #eee;
+        padding: 100px;
+        text-align: center;
+        transition: 100ms ease-in background;
+      }
+      .hello:hover {
+        background: #ccc;
+      }
+    `}</style>
   </div>
 )
-
-const styles = style({
-  font: '15px Helvetica, Arial, sans-serif',
-  background: '#eee',
-  padding: '100px',
-  textAlign: 'center',
-  transition: '100ms ease-in background',
-  ':hover': {
-    background: '#ccc'
-  }
-})
diff --git a/examples/nested-components/components/paragraph.js b/examples/nested-components/components/paragraph.js
@@ -1,11 +1,13 @@
 import React from 'react'
-import style from 'next/css'
 
 export default ({ children }) => (
-  <p className={styles}>{children}</p>
+  <p>
+    {children}
+    <style jsx>{`
+      p {
+        font: 13px Helvetica, Arial;
+        margin: 10px 0;
+      }
+    `}</style>
+  </p>
 )
-
-const styles = style({
-  font: '13px Helvetica, Arial',
-  margin: '10px 0'
-})
diff --git a/examples/nested-components/components/post.js b/examples/nested-components/components/post.js
@@ -1,21 +1,21 @@
 import React from 'react'
-import style from 'next/css'
 
 export default ({ title, children }) => (
-  <div className={mainStyle}>
-    <h1 className={titleStyle}>{ title }</h1>
+  <div className='main'>
+    <h1>{ title }</h1>
     { children }
+    <style jsx>{`
+      .main {
+        font: 15px Helvetica, Arial;
+        border: 1px solid #eee;
+        padding: 0 10px;
+      }
+
+      h1 {
+        font-size: 16px;
+        font-weight: bold;
+        margin: 10px 0;
+      }
+    `}</style>
   </div>
 )
-
-const mainStyle = style({
-  font: '15px Helvetica, Arial',
-  border: '1px solid #eee',
-  padding: '0 10px'
-})
-
-const titleStyle = style({
-  fontSize: '16px',
-  fontWeight: 'bold',
-  margin: '10px 0'
-})
diff --git a/examples/nested-components/pages/index.js b/examples/nested-components/pages/index.js
@@ -1,48 +1,46 @@
 import React from 'react'
 import P from '../components/paragraph'
 import Post from '../components/post'
-import style from 'next/css'
 
 export default () => (
-  <div className={styles.main}>
+  <div className='main'>
     <Post title='My first blog post'>
       <P>Hello there</P>
       <P>This is an example of a componentized blog post</P>
     </Post>
 
-    <Hr />
+    <hr />
 
     <Post title='My second blog post'>
       <P>Hello there</P>
       <P>This is another example.</P>
       <P>Wa-hoo!</P>
     </Post>
 
-    <Hr />
+    <hr />
 
     <Post title='The final blog post'>
       <P>C'est fin</P>
     </Post>
+
+    <style jsx>{`
+      .main {
+        margin: auto;
+        max-width: 420px;
+        padding: 10px;
+      }
+
+      hr {
+        width: 100px;
+        border-width: 0;
+        margin: 20px auto;
+        text-align: center;
+      }
+
+      hr::before {
+        content: "***";
+        color: #ccc;
+      }
+    `}</style>
   </div>
 )
-
-const Hr = () => <hr className={styles.hr} />
-
-const styles = {
-  main: style({
-    margin: 'auto',
-    maxWidth: '420px',
-    padding: '10px'
-  }),
-
-  hr: style({
-    width: '100px',
-    borderWidth: 0,
-    margin: '20px auto',
-    textAlign: 'center',
-    '::before': {
-      content: '"***"',
-      color: '#ccc'
-    }
-  })
-}
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "send": "0.14.1",
     "source-map-support": "0.4.6",
     "strip-ansi": "3.0.1",
+    "styled-jsx": "0.2.1",
     "url": "0.11.0",
     "webpack": "1.14.0",
     "webpack-dev-middleware": "1.9.0",

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: 20pxl
+        }
+      `}</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