Skip to content

Commit e164074

Browse files
impronunciablerauchg
impronunciable
authored and
rauchg
committedOct 21, 2016
Added glamor css (vercel#38)
* Added glamor css * Using pseudoclasses instead of calling functions * Updated readme using style instead of default import for css
·
1.2.31.0.0
1 parent ba14964 commit e164074

File tree

16 files changed

+87
-109
lines changed

16 files changed

+87
-109
lines changed
 

‎Readme.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ We use [glamor](https://github.com/threepointone/glamor) to provide a great buil
4444

4545
```jsx
4646
import React from 'react'
47-
import css from 'next/css'
47+
import { style } from 'next/css'
4848

4949
export default () => (
5050
<div className={style}>
5151
Hello world
5252
</div>
5353
)
5454

55-
const style = css({
55+
const style = style({
5656
main: {
5757
background: 'red',
5858
':hover': {

‎bench/fixtures/basic/pages/css.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { Component } from 'react'
2-
import { StyleSheet, css } from 'next/css'
2+
import { style } from 'next/css'
33

44
export default class CrazyCSS extends Component {
55
spans () {
66
const out = []
77
for (let i = 0; i < 1000; i++) {
8-
out.push(<span key={i} class={css(styles[`padding-${i}`])}>This is ${i}</span>)
8+
out.push(<span key={i} class={spanStyles[`padding-${i}`]}>This is ${i}</span>)
99
}
1010
return out
1111
}
@@ -17,7 +17,5 @@ export default class CrazyCSS extends Component {
1717

1818
const spanStyles = {}
1919
for (let i = 0; i < 1000; i++) {
20-
spanStyles[`padding-${i}`] = { padding: i }
20+
spanStyles[`padding-${i}`] = style({ padding: i })
2121
}
22-
23-
const styles = StyleSheet.create(spanStyles)

‎client/next.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { createElement } from 'react'
22
import { render } from 'react-dom'
33
import HeadManager from './head-manager'
4-
import { StyleSheet } from '../lib/css'
4+
import { rehydrate } from '../lib/css'
55
import Router from '../lib/router'
66
import DefaultApp from '../lib/app'
77
import evalScript from '../lib/eval-script'
88

99
const {
10-
__NEXT_DATA__: { app, component, props, classNames, err }
10+
__NEXT_DATA__: { app, component, props, ids, err }
1111
} = window
1212

1313
const App = app ? evalScript(app).default : DefaultApp
@@ -19,5 +19,5 @@ const headManager = new HeadManager()
1919
const container = document.getElementById('__next')
2020
const appProps = { Component, props, router, headManager }
2121

22-
StyleSheet.rehydrate(classNames)
22+
rehydrate(ids)
2323
render(createElement(App, appProps), container)

‎examples/basic-css/pages/index.js

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import React from 'react'
2-
import { css, StyleSheet } from 'next/css'
2+
import { style } from 'next/css'
33

44
export default () => (
5-
<div className={css(styles.main)}>
5+
<div className={styles}>
66
<p>Hello World</p>
77
</div>
88
)
99

10-
const styles = StyleSheet.create({
11-
main: {
12-
font: '15px Helvetica, Arial, sans-serif',
13-
background: '#eee',
14-
padding: '100px',
15-
textAlign: 'center',
16-
transition: '100ms ease-in background',
17-
':hover': {
18-
background: '#ccc'
19-
}
10+
const styles = style({
11+
font: '15px Helvetica, Arial, sans-serif',
12+
background: '#eee',
13+
padding: '100px',
14+
textAlign: 'center',
15+
transition: '100ms ease-in background',
16+
':hover': {
17+
background: '#ccc'
2018
}
2119
})

‎examples/nested-components/components/paragraph.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from 'react'
2-
import { css, StyleSheet } from 'next/css'
2+
import { style } from 'next/css'
33

44
export default ({ children }) => (
5-
<p className={css(styles.main)}>{children}</p>
5+
<p className={styles}>{children}</p>
66
)
77

8-
const styles = StyleSheet.create({
9-
main: {
10-
font: '13px Helvetica, Arial',
11-
margin: '10px 0'
12-
}
8+
const styles = style({
9+
font: '13px Helvetica, Arial',
10+
margin: '10px 0'
1311
})

‎examples/nested-components/components/post.js

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import React from 'react'
2-
import { css, StyleSheet } from 'next/css'
2+
import { style } from 'next/css'
33

44
export default ({ title, children }) => (
5-
<div className={css(styles.main)}>
6-
<h1 className={css(styles.title)}>{ title }</h1>
5+
<div className={mainStyle}>
6+
<h1 className={titleStyle}>{ title }</h1>
77
{ children }
88
</div>
99
)
1010

11-
const styles = StyleSheet.create({
12-
main: {
13-
font: '15px Helvetica, Arial',
14-
border: '1px solid #eee',
15-
padding: '0 10px'
16-
},
11+
const mainStyle = style({
12+
font: '15px Helvetica, Arial',
13+
border: '1px solid #eee',
14+
padding: '0 10px'
15+
})
1716

18-
title: {
19-
fontSize: '16px',
20-
fontWeight: 'bold',
21-
margin: '10px 0'
22-
}
17+
const titleStyle = style({
18+
fontSize: '16px',
19+
fontWeight: 'bold',
20+
margin: '10px 0'
2321
})

‎examples/nested-components/pages/index.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react'
22
import P from '../components/paragraph'
33
import Post from '../components/post'
4-
import { css, StyleSheet } from 'next/css'
4+
import { style } from 'next/css'
55

66
export default () => (
7-
<div className={css(styles.main)}>
7+
<div className={styles.main}>
88
<Post title='My first blog post'>
99
<P>Hello there</P>
1010
<P>This is an example of a componentized blog post</P>
@@ -26,23 +26,23 @@ export default () => (
2626
</div>
2727
)
2828

29-
const Hr = () => <hr className={css(styles.hr)} />
29+
const Hr = () => <hr className={styles.hr} />
3030

31-
const styles = StyleSheet.create({
32-
main: {
31+
const styles = {
32+
main: style({
3333
margin: 'auto',
3434
maxWidth: '420px',
3535
padding: '10px'
36-
},
36+
}),
3737

38-
hr: {
38+
hr: style({
3939
width: '100px',
4040
borderWidth: 0,
4141
margin: '20px auto',
4242
textAlign: 'center',
43-
':before': {
43+
'::before': {
4444
content: '"***"',
4545
color: '#ccc'
4646
}
47-
}
48-
})
47+
})
48+
}

‎lib/css.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('aphrodite')
1+
module.exports = require('glamor')

‎lib/document.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default ({ head, css, html, data, dev, staticMarkup }) => {
55
return <html>
66
<head>
77
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
8-
<style data-aphrodite='' dangerouslySetInnerHTML={{ __html: css.content }} />
8+
<style dangerouslySetInnerHTML={{ __html: css }} />
99
</head>
1010
<body>
1111
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />

‎lib/eval-script.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import ReactDOM from 'react-dom'
33
import App from '../lib/app'
44
import Link from '../lib/link'
5-
import Css from '../lib/css'
5+
import * as Css from '../lib/css'
66
import Head from '../lib/head'
77

88
const modules = new Map([

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"precommit": "npm run lint"
1818
},
1919
"dependencies": {
20-
"aphrodite": "0.5.0",
2120
"babel-core": "6.17.0",
2221
"babel-generator": "6.17.0",
2322
"babel-loader": "6.2.5",
@@ -31,6 +30,7 @@
3130
"babel-runtime": "6.11.6",
3231
"cross-spawn": "4.0.2",
3332
"del": "2.2.2",
33+
"glamor": "2.17.10",
3434
"glob-promise": "1.0.6",
3535
"htmlescape": "1.1.1",
3636
"loader-utils": "0.2.16",

‎pages/_error-debug.js

+14-26
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import stripAnsi from 'strip-ansi'
33
import Head from 'next/head'
4-
import { css, StyleSheet } from 'next/css'
4+
import { style } from 'next/css'
55

66
export default class ErrorDebug extends React.Component {
77
static getInitialProps ({ err }) {
@@ -12,7 +12,7 @@ export default class ErrorDebug extends React.Component {
1212
render () {
1313
const { message, path } = this.props
1414

15-
return <div className={css(styles.errorDebug)}>
15+
return <div className={styles.errorDebug}>
1616
<Head>
1717
<style dangerouslySetInnerHTML={{ __html: `
1818
body {
@@ -21,48 +21,36 @@ export default class ErrorDebug extends React.Component {
2121
}
2222
`}} />
2323
</Head>
24-
<div className={css(styles.heading)}>Error in {path}</div>
25-
<pre className={css(styles.message)}>{stripAnsi(message)}</pre>
24+
<div className={styles.heading}>Error in {path}</div>
25+
<pre className={styles.message}>{stripAnsi(message)}</pre>
2626
</div>
2727
}
2828
}
2929

30-
const styles = StyleSheet.create({
31-
body: {
30+
const styles = {
31+
body: style({
3232
background: '#dc0067',
3333
margin: 0
34-
},
34+
}),
3535

36-
errorDebug: {
36+
errorDebug: style({
3737
height: '100%',
3838
padding: '16px',
3939
boxSizing: 'border-box'
40-
},
40+
}),
4141

42-
message: {
42+
message: style({
4343
fontFamily: 'menlo-regular',
4444
fontSize: '10px',
4545
color: '#fff',
4646
margin: 0
47-
},
47+
}),
4848

49-
heading: {
49+
heading: style({
5050
fontFamily: 'sans-serif',
5151
fontSize: '13px',
5252
fontWeight: 'bold',
5353
color: '#ff90c6',
5454
marginBottom: '20px'
55-
},
56-
57-
token: {
58-
backgroundColor: '#000'
59-
},
60-
61-
marker: {
62-
color: '#000'
63-
},
64-
65-
dim: {
66-
color: '#e85b9b'
67-
}
68-
})
55+
})
56+
}

‎pages/_error.js

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { css, StyleSheet } from 'next/css'
2+
import { style, merge } from 'next/css'
33

44
export default class Error extends React.Component {
55
static getInitialProps ({ res, xhr }) {
@@ -11,19 +11,19 @@ export default class Error extends React.Component {
1111
const { statusCode } = this.props
1212
const title = statusCode === 404 ? 'This page could not be found' : 'Internal Server Error'
1313

14-
return <div className={css(styles.error, styles['error_' + statusCode])}>
15-
<div className={css(styles.text)}>
16-
<h1 className={css(styles.h1)}>{statusCode}</h1>
17-
<div className={css(styles.desc)}>
18-
<h2 className={css(styles.h2)}>{title}.</h2>
14+
return <div className={merge(styles.error, styles['error_' + statusCode])}>
15+
<div className={styles.text}>
16+
<h1 className={styles.h1}>{statusCode}</h1>
17+
<div className={styles.desc}>
18+
<h2 className={styles.h2}>{title}.</h2>
1919
</div>
2020
</div>
2121
</div>
2222
}
2323
}
2424

25-
const styles = StyleSheet.create({
26-
error: {
25+
const styles = {
26+
error: style({
2727
color: '#000',
2828
background: '#fff',
2929
top: 0,
@@ -34,17 +34,17 @@ const styles = StyleSheet.create({
3434
fontFamily: '"SF UI Text", "Helvetica Neue", "Lucida Grande"',
3535
textAlign: 'center',
3636
paddingTop: '20%'
37-
},
37+
}),
3838

39-
desc: {
39+
desc: style({
4040
display: 'inline-block',
4141
textAlign: 'left',
4242
lineHeight: '49px',
4343
height: '49px',
4444
verticalAlign: 'middle'
45-
},
45+
}),
4646

47-
h1: {
47+
h1: style({
4848
display: 'inline-block',
4949
borderRight: '1px solid rgba(0, 0, 0,.3)',
5050
margin: 0,
@@ -53,12 +53,12 @@ const styles = StyleSheet.create({
5353
fontSize: '24px',
5454
fontWeight: 500,
5555
verticalAlign: 'top'
56-
},
56+
}),
5757

58-
h2: {
58+
h2: style({
5959
fontSize: '14px',
6060
fontWeight: 'normal',
6161
margin: 0,
6262
padding: 0
63-
}
64-
})
63+
})
64+
}

‎server/render.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Router from '../lib/router'
88
import Document from '../lib/document'
99
import Head from '../lib/head'
1010
import App from '../lib/app'
11-
import { StyleSheetServer } from '../lib/css'
11+
import { renderStatic } from 'glamor/server'
1212

1313
export async function render (url, ctx = {}, {
1414
dir = process.cwd(),
@@ -22,7 +22,7 @@ export async function render (url, ctx = {}, {
2222
const props = await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
2323
const component = await read(join(dir, '.next', 'bundles', 'pages', path))
2424

25-
const { html, css } = StyleSheetServer.renderStatic(() => {
25+
const { html, css, ids } = renderStatic(() => {
2626
const app = createElement(App, {
2727
Component,
2828
props,
@@ -41,7 +41,7 @@ export async function render (url, ctx = {}, {
4141
data: {
4242
component,
4343
props,
44-
classNames: css.renderedClassNames,
44+
ids: ids,
4545
err: ctx.err ? errorToJSON(ctx.err) : null
4646
},
4747
hotReload: false,

‎test/fixtures/basic/pages/css.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react'
2-
import { StyleSheet, css } from 'next/css'
2+
import { style } from 'next/css'
33

4-
export default () => <div className={css(styles.red)}>This is red</div>
4+
export default () => <div className={styles}>This is red</div>
55

6-
const styles = StyleSheet.create({
7-
red: { color: 'red' }
8-
})
6+
const styles = style({ color: 'red' })

‎test/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ test(async t => {
1414

1515
test(async t => {
1616
const html = await render('/css')
17-
t.true(html.includes('<style data-aphrodite="">.red_im3wl1{color:red !important;}</style>'))
18-
t.true(html.includes('<div class="red_im3wl1">This is red</div>'))
17+
t.true(html.includes('.css-im3wl1'))
18+
t.true(html.includes('<div class="css-im3wl1">This is red</div>'))
1919
})
2020

2121
test(async t => {

0 commit comments

Comments
 (0)
Please sign in to comment.