Added glamor css (#38)

* Added glamor css

* Using pseudoclasses instead of calling functions

* Updated readme using style instead of default import for css

Readme.md

@@ -44,7 +44,7 @@ We use [glamor](https://github.com/threepointone/glamor) to provide a great buil
 
 ```jsx
 import React from 'react'
-import css from 'next/css'
+import { style } from 'next/css'
 
 export default () => (
   <div className={style}>
@@ -52,7 +52,7 @@ export default () => (
   </div>
 )
 
-const style = css({
+const style = style({
   main: {
     background: 'red',
     ':hover': {

bench/fixtures/basic/pages/css.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
-import { StyleSheet, css } from 'next/css'
+import { style } from 'next/css'
 
 export default class CrazyCSS extends Component {
   spans () {
     const out = []
     for (let i = 0; i < 1000; i++) {
-      out.push(<span key={i} class={css(styles[`padding-${i}`])}>This is ${i}</span>)
+      out.push(<span key={i} class={spanStyles[`padding-${i}`]}>This is ${i}</span>)
     }
     return out
   }
@@ -17,7 +17,5 @@ export default class CrazyCSS extends Component {
 
 const spanStyles = {}
 for (let i = 0; i < 1000; i++) {
-  spanStyles[`padding-${i}`] = { padding: i }
+  spanStyles[`padding-${i}`] = style({ padding: i })
 }
-
-const styles = StyleSheet.create(spanStyles)

client/next.js

@@ -1,13 +1,13 @@
 import { createElement } from 'react'
 import { render } from 'react-dom'
 import HeadManager from './head-manager'
-import { StyleSheet } from '../lib/css'
+import { rehydrate } from '../lib/css'
 import Router from '../lib/router'
 import DefaultApp from '../lib/app'
 import evalScript from '../lib/eval-script'
 
 const {
-  __NEXT_DATA__: { app, component, props, classNames, err }
+  __NEXT_DATA__: { app, component, props, ids, err }
 } = window
 
 const App = app ? evalScript(app).default : DefaultApp
@@ -19,5 +19,5 @@ const headManager = new HeadManager()
 const container = document.getElementById('__next')
 const appProps = { Component, props, router, headManager }
 
-StyleSheet.rehydrate(classNames)
+rehydrate(ids)
 render(createElement(App, appProps), container)

examples/basic-css/pages/index.js

@@ -1,21 +1,19 @@
 import React from 'react'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default () => (
-  <div className={css(styles.main)}>
+  <div className={styles}>
     <p>Hello World</p>
   </div>
 )
 
-const styles = StyleSheet.create({
+const styles = style({
-  main: {
+  font: '15px Helvetica, Arial, sans-serif',
-    font: '15px Helvetica, Arial, sans-serif',
+  background: '#eee',
-    background: '#eee',
+  padding: '100px',
-    padding: '100px',
+  textAlign: 'center',
-    textAlign: 'center',
+  transition: '100ms ease-in background',
-    transition: '100ms ease-in background',
+  ':hover': {
-    ':hover': {
+    background: '#ccc'
-      background: '#ccc'
-    }
   }
 })

examples/nested-components/components/paragraph.js

@@ -1,13 +1,11 @@
 import React from 'react'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default ({ children }) => (
-  <p className={css(styles.main)}>{children}</p>
+  <p className={styles}>{children}</p>
 )
 
-const styles = StyleSheet.create({
+const styles = style({
-  main: {
+  font: '13px Helvetica, Arial',
-    font: '13px Helvetica, Arial',
+  margin: '10px 0'
-    margin: '10px 0'
-  }
 })

examples/nested-components/components/post.js

@@ -1,23 +1,21 @@
 import React from 'react'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default ({ title, children }) => (
-  <div className={css(styles.main)}>
+  <div className={mainStyle}>
-    <h1 className={css(styles.title)}>{ title }</h1>
+    <h1 className={titleStyle}>{ title }</h1>
     { children }
   </div>
 )
 
-const styles = StyleSheet.create({
+const mainStyle = style({
-  main: {
+  font: '15px Helvetica, Arial',
-    font: '15px Helvetica, Arial',
+  border: '1px solid #eee',
-    border: '1px solid #eee',
+  padding: '0 10px'
-    padding: '0 10px'
+})
-  },
+
-
+const titleStyle = style({
-  title: {
+  fontSize: '16px',
-    fontSize: '16px',
+  fontWeight: 'bold',
-    fontWeight: 'bold',
+  margin: '10px 0'
-    margin: '10px 0'
-  }
 })

examples/nested-components/pages/index.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import P from '../components/paragraph'
 import Post from '../components/post'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default () => (
-  <div className={css(styles.main)}>
+  <div className={styles.main}>
     <Post title='My first blog post'>
       <P>Hello there</P>
       <P>This is an example of a componentized blog post</P>
@@ -26,23 +26,23 @@ export default () => (
   </div>
 )
 
-const Hr = () => <hr className={css(styles.hr)} />
+const Hr = () => <hr className={styles.hr} />
 
-const styles = StyleSheet.create({
+const styles = {
-  main: {
+  main: style({
     margin: 'auto',
     maxWidth: '420px',
     padding: '10px'
-  },
+  }),
 
-  hr: {
+  hr: style({
     width: '100px',
     borderWidth: 0,
     margin: '20px auto',
     textAlign: 'center',
-    ':before': {
+    '::before': {
       content: '"***"',
       color: '#ccc'
     }
-  }
+  })
-})
+}

lib/css.js

@@ -1 +1 @@
-module.exports = require('aphrodite')
+module.exports = require('glamor')

lib/document.js

@@ -5,7 +5,7 @@ export default ({ head, css, html, data, dev, staticMarkup }) => {
   return <html>
     <head>
       {(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
-      <style data-aphrodite='' dangerouslySetInnerHTML={{ __html: css.content }} />
+      <style dangerouslySetInnerHTML={{ __html: css }} />
     </head>
     <body>
       <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />

lib/eval-script.js

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from '../lib/app'
 import Link from '../lib/link'
-import Css from '../lib/css'
+import * as Css from '../lib/css'
 import Head from '../lib/head'
 
 const modules = new Map([

package.json

@@ -17,7 +17,6 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
-    "aphrodite": "0.5.0",
     "babel-core": "6.17.0",
     "babel-generator": "6.17.0",
     "babel-loader": "6.2.5",
@@ -31,6 +30,7 @@
     "babel-runtime": "6.11.6",
     "cross-spawn": "4.0.2",
     "del": "2.2.2",
+    "glamor": "2.17.10",
     "glob-promise": "1.0.6",
     "htmlescape": "1.1.1",
     "loader-utils": "0.2.16",

pages/_error-debug.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import stripAnsi from 'strip-ansi'
 import Head from 'next/head'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default class ErrorDebug extends React.Component {
   static getInitialProps ({ err }) {
@@ -12,7 +12,7 @@ export default class ErrorDebug extends React.Component {
   render () {
     const { message, path } = this.props
 
-    return <div className={css(styles.errorDebug)}>
+    return <div className={styles.errorDebug}>
       <Head>
         <style dangerouslySetInnerHTML={{ __html: `
           body {
@@ -21,48 +21,36 @@ export default class ErrorDebug extends React.Component {
           }
         `}} />
       </Head>
-      <div className={css(styles.heading)}>Error in {path}</div>
+      <div className={styles.heading}>Error in {path}</div>
-      <pre className={css(styles.message)}>{stripAnsi(message)}</pre>
+      <pre className={styles.message}>{stripAnsi(message)}</pre>
     </div>
   }
 }
 
-const styles = StyleSheet.create({
+const styles = {
-  body: {
+  body: style({
     background: '#dc0067',
     margin: 0
-  },
+  }),
 
-  errorDebug: {
+  errorDebug: style({
     height: '100%',
     padding: '16px',
     boxSizing: 'border-box'
-  },
+  }),
 
-  message: {
+  message: style({
     fontFamily: 'menlo-regular',
     fontSize: '10px',
     color: '#fff',
     margin: 0
-  },
+  }),
 
-  heading: {
+  heading: style({
     fontFamily: 'sans-serif',
     fontSize: '13px',
     fontWeight: 'bold',
     color: '#ff90c6',
     marginBottom: '20px'
-  },
+  })
-
+}
-  token: {
-    backgroundColor: '#000'
-  },
-
-  marker: {
-    color: '#000'
-  },
-
-  dim: {
-    color: '#e85b9b'
-  }
-})

pages/_error.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { css, StyleSheet } from 'next/css'
+import { style, merge } from 'next/css'
 
 export default class Error extends React.Component {
   static getInitialProps ({ res, xhr }) {
@@ -11,19 +11,19 @@ export default class Error extends React.Component {
     const { statusCode } = this.props
     const title = statusCode === 404 ? 'This page could not be found' : 'Internal Server Error'
 
-    return <div className={css(styles.error, styles['error_' + statusCode])}>
+    return <div className={merge(styles.error, styles['error_' + statusCode])}>
-      <div className={css(styles.text)}>
+      <div className={styles.text}>
-        <h1 className={css(styles.h1)}>{statusCode}</h1>
+        <h1 className={styles.h1}>{statusCode}</h1>
-        <div className={css(styles.desc)}>
+        <div className={styles.desc}>
-          <h2 className={css(styles.h2)}>{title}.</h2>
+          <h2 className={styles.h2}>{title}.</h2>
         </div>
       </div>
     </div>
   }
 }
 
-const styles = StyleSheet.create({
+const styles = {
-  error: {
+  error: style({
     color: '#000',
     background: '#fff',
     top: 0,
@@ -34,17 +34,17 @@ const styles = StyleSheet.create({
     fontFamily: '"SF UI Text", "Helvetica Neue", "Lucida Grande"',
     textAlign: 'center',
     paddingTop: '20%'
-  },
+  }),
 
-  desc: {
+  desc: style({
     display: 'inline-block',
     textAlign: 'left',
     lineHeight: '49px',
     height: '49px',
     verticalAlign: 'middle'
-  },
+  }),
 
-  h1: {
+  h1: style({
     display: 'inline-block',
     borderRight: '1px solid rgba(0, 0, 0,.3)',
     margin: 0,
@@ -53,12 +53,12 @@ const styles = StyleSheet.create({
     fontSize: '24px',
     fontWeight: 500,
     verticalAlign: 'top'
-  },
+  }),
 
-  h2: {
+  h2: style({
     fontSize: '14px',
     fontWeight: 'normal',
     margin: 0,
     padding: 0
-  }
+  })
-})
+}

server/render.js

@@ -8,7 +8,7 @@ import Router from '../lib/router'
 import Document from '../lib/document'
 import Head from '../lib/head'
 import App from '../lib/app'
-import { StyleSheetServer } from '../lib/css'
+import { renderStatic } from 'glamor/server'
 
 export async function render (url, ctx = {}, {
   dir = process.cwd(),
@@ -22,7 +22,7 @@ export async function render (url, ctx = {}, {
   const props = await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
   const component = await read(join(dir, '.next', 'bundles', 'pages', path))
 
-  const { html, css } = StyleSheetServer.renderStatic(() => {
+  const { html, css, ids } = renderStatic(() => {
     const app = createElement(App, {
       Component,
       props,
@@ -41,7 +41,7 @@ export async function render (url, ctx = {}, {
     data: {
       component,
       props,
-      classNames: css.renderedClassNames,
+      ids: ids,
       err: ctx.err ? errorToJSON(ctx.err) : null
     },
     hotReload: false,

test/fixtures/basic/pages/css.js

@@ -1,8 +1,6 @@
 import React from 'react'
-import { StyleSheet, css } from 'next/css'
+import { style } from 'next/css'
 
-export default () => <div className={css(styles.red)}>This is red</div>
+export default () => <div className={styles}>This is red</div>
 
-const styles = StyleSheet.create({
+const styles = style({ color: 'red' })
-  red: { color: 'red' }
-})

test/index.js

@@ -14,8 +14,8 @@ test(async t => {
 
 test(async t => {
   const html = await render('/css')
-  t.true(html.includes('<style data-aphrodite="">.red_im3wl1{color:red !important;}</style>'))
+  t.true(html.includes('.css-im3wl1'))
-  t.true(html.includes('<div class="red_im3wl1">This is red</div>'))
+  t.true(html.includes('<div class="css-im3wl1">This is red</div>'))
 })
 
 test(async t => {