1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Added glamor css (#38)

* Added glamor css

* Using pseudoclasses instead of calling functions

* Updated readme using style instead of default import for css
This commit is contained in:
Dan Zajdband 2016-10-21 18:39:20 +02:00 committed by Guillermo Rauch
parent ba14964da7
commit e164074f8e
16 changed files with 88 additions and 110 deletions

View file

@ -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': {

View file

@ -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)

View file

@ -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)

View file

@ -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({
main: {
font: '15px Helvetica, Arial, sans-serif',
background: '#eee',
padding: '100px',
textAlign: 'center',
transition: '100ms ease-in background',
':hover': {
background: '#ccc'
}
const styles = style({
font: '15px Helvetica, Arial, sans-serif',
background: '#eee',
padding: '100px',
textAlign: 'center',
transition: '100ms ease-in background',
':hover': {
background: '#ccc'
}
})

View file

@ -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({
main: {
font: '13px Helvetica, Arial',
margin: '10px 0'
}
const styles = style({
font: '13px Helvetica, Arial',
margin: '10px 0'
})

View file

@ -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)}>
<h1 className={css(styles.title)}>{ title }</h1>
<div className={mainStyle}>
<h1 className={titleStyle}>{ title }</h1>
{ children }
</div>
)
const styles = StyleSheet.create({
main: {
font: '15px Helvetica, Arial',
border: '1px solid #eee',
padding: '0 10px'
},
title: {
fontSize: '16px',
fontWeight: 'bold',
margin: '10px 0'
}
const mainStyle = style({
font: '15px Helvetica, Arial',
border: '1px solid #eee',
padding: '0 10px'
})
const titleStyle = style({
fontSize: '16px',
fontWeight: 'bold',
margin: '10px 0'
})

View file

@ -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({
main: {
const styles = {
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'
}
}
})
})
}

View file

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

View file

@ -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 }} />

View file

@ -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([

View file

@ -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",

View file

@ -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>
<pre className={css(styles.message)}>{stripAnsi(message)}</pre>
<div className={styles.heading}>Error in {path}</div>
<pre className={styles.message}>{stripAnsi(message)}</pre>
</div>
}
}
const styles = StyleSheet.create({
body: {
const styles = {
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'
}
})
})
}

View file

@ -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])}>
<div className={css(styles.text)}>
<h1 className={css(styles.h1)}>{statusCode}</h1>
<div className={css(styles.desc)}>
<h2 className={css(styles.h2)}>{title}.</h2>
return <div className={merge(styles.error, styles['error_' + statusCode])}>
<div className={styles.text}>
<h1 className={styles.h1}>{statusCode}</h1>
<div className={styles.desc}>
<h2 className={styles.h2}>{title}.</h2>
</div>
</div>
</div>
}
}
const styles = StyleSheet.create({
error: {
const styles = {
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
}
})
})
}

View file

@ -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,

View file

@ -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({
red: { color: 'red' }
})
const styles = style({ color: 'red' })

View file

@ -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('<div class="red_im3wl1">This is red</div>'))
t.true(html.includes('.css-im3wl1'))
t.true(html.includes('<div class="css-im3wl1">This is red</div>'))
})
test(async t => {