Merge pull request vercel#1 from zeit/fix/css

Updated css to use the new API

Author: rauchg

.gitignore

@@ -1 +1,2 @@
 .next
+node_modules

components/frame.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import Link from 'next/link'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default ({ id }) => (
-  <div className={css(styles.photo)}>
-    <div className={css(styles.image)}>
+  <div className={style(styles.photo)}>
+    <div className={style(styles.image)}>
       {id}
     </div>
 
-    <div className={css(styles.sidebar)}>
-      <ul className={css(styles.sidebarList)}>
+    <div className={style(styles.sidebar)}>
+      <ul className={style(styles.sidebarList)}>
         <li>
           <Link href="/profile?id=nkzawa">@nkzawa</Link>
           - Great photo!
@@ -19,7 +19,7 @@ export default ({ id }) => (
   </div>
 )
 
-const styles = StyleSheet.create({
+const styles = {
   photo: {
     width: '800px',
     overflow: 'hidden',
@@ -56,4 +56,4 @@ const styles = StyleSheet.create({
     margin: 0,
     padding: 0,
   }
-})
+}

components/modal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Photo from './frame'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default class extends React.Component {
   dismiss (e) {
@@ -14,16 +14,16 @@ export default class extends React.Component {
 
   render () {
     return (
-      <div className={css(styles.shim)} ref="shim" onClick={(e) => this.dismiss(e)}>
-        <div ref="photoWrap" className={css(styles.photo)}>
+      <div className={style(styles.shim)} ref="shim" onClick={(e) => this.dismiss(e)}>
+        <div ref="photoWrap" className={style(styles.photo)}>
           <Photo id={this.props.id} />
         </div>
       </div>
     )
   }
 }
 
-const styles = StyleSheet.create({
+const styles = {
   shim: {
     position: 'fixed',
     background: 'rgba(0,0,0,.65)',
@@ -40,4 +40,4 @@ const styles = StyleSheet.create({
     width: '100%',
     marginTop: '-250px'
   }
-})
+}

pages/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Modal from '../components/modal'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default class extends React.Component {
   static getInitialProps () {
@@ -40,7 +40,7 @@ export default class extends React.Component {
 
   render () {
     return (
-      <div className={css(styles.list)}>
+      <div className={style(styles.list)}>
         {
           this.props.url.query.id &&
             <Modal
@@ -50,8 +50,8 @@ export default class extends React.Component {
         }
         {
           this.props.photos.map((id) => (
-            <div key={id} className={css(styles.photo)}>
-              <a className={css(styles.photoLink)} onClick={() => this.showPhoto(id) }>
+            <div key={id} className={style(styles.photo)}>
+              <a className={style(styles.photoLink)} onClick={() => this.showPhoto(id) }>
                 {id}
               </a>
             </div>
@@ -62,7 +62,7 @@ export default class extends React.Component {
   }
 }
 
-const styles = StyleSheet.create({
+const styles = {
   list: {
     padding: '50px',
     textAlign: 'center'
@@ -87,4 +87,4 @@ const styles = StyleSheet.create({
       borderColor: 'blue'
     }
   }
-})
+}

pages/photo.js

@@ -1,16 +1,16 @@
 import React from 'react'
 import Photo from '../components/frame'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default ({ url: { query: { id } } }) => (
-  <div className={css(styles.permalink)}>
-    <div className={css(styles.wrap)}>
+  <div className={style(styles.permalink)}>
+    <div className={style(styles.wrap)}>
       <Photo id={id} />
     </div>
   </div>
 )
 
-const styles = StyleSheet.create({
+const styles = {
   permalink: {
     padding: '100px',
     textAlign: 'center'
@@ -21,4 +21,4 @@ const styles = StyleSheet.create({
     border: '1px solid #999',
     margin: 'auto'
   }
-})
+}

pages/profile.js

@@ -1,17 +1,17 @@
 import React from 'react'
-import { css, StyleSheet } from 'next/css'
+import { style } from 'next/css'
 
 export default ({ url: { query: { id } } }) => (
-  <div className={css(styles.main)}>
-    <h1 className={css(styles.heading)}>
+  <div className={style(styles.main)}>
+    <h1 className={style(styles.heading)}>
       User profile:
       {' '}
-      <b className={css(styles.username)}>{id}</b>
+      <b className={style(styles.username)}>{id}</b>
     </h1>
   </div>
 )
 
-const styles = StyleSheet.create({
+const styles = {
   main: {
     padding: '100px'
   },
@@ -23,4 +23,4 @@ const styles = StyleSheet.create({
   username: {
     color: 'blue'
   }
-})
+}