Skip to content

Commit a87ef1a

Browse files
nkzawarauchg
nkzawa
authored and
rauchg
committed
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
1 parent 26c485a commit a87ef1a

File tree

12 files changed

+167
-181
lines changed

12 files changed

+167
-181
lines changed

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

Lines changed: 0 additions & 21 deletions
This file was deleted.

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from 'react'
2-
import style from 'next/css'
32

43
export default () => (
5-
<div className={styles}>
4+
<div className='hello'>
65
<p>Hello World</p>
6+
<style jsx>{`
7+
.hello {
8+
font: 15px Helvetica, Arial, sans-serif;
9+
background: #eee;
10+
padding: 100px;
11+
text-align: center;
12+
transition: 100ms ease-in background;
13+
}
14+
.hello:hover {
15+
background: #ccc;
16+
}
17+
`}</style>
718
</div>
819
)
9-
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'
18-
}
19-
})

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React from 'react'
2-
import style from 'next/css'
32

43
export default ({ children }) => (
5-
<p className={styles}>{children}</p>
4+
<p>
5+
{children}
6+
<style jsx>{`
7+
p {
8+
font: 13px Helvetica, Arial;
9+
margin: 10px 0;
10+
}
11+
`}</style>
12+
</p>
613
)
7-
8-
const styles = style({
9-
font: '13px Helvetica, Arial',
10-
margin: '10px 0'
11-
})

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react'
2-
import style from 'next/css'
32

43
export default ({ title, children }) => (
5-
<div className={mainStyle}>
6-
<h1 className={titleStyle}>{ title }</h1>
4+
<div className='main'>
5+
<h1>{ title }</h1>
76
{ children }
7+
<style jsx>{`
8+
.main {
9+
font: 15px Helvetica, Arial;
10+
border: 1px solid #eee;
11+
padding: 0 10px;
12+
}
13+
14+
h1 {
15+
font-size: 16px;
16+
font-weight: bold;
17+
margin: 10px 0;
18+
}
19+
`}</style>
820
</div>
921
)
10-
11-
const mainStyle = style({
12-
font: '15px Helvetica, Arial',
13-
border: '1px solid #eee',
14-
padding: '0 10px'
15-
})
16-
17-
const titleStyle = style({
18-
fontSize: '16px',
19-
fontWeight: 'bold',
20-
margin: '10px 0'
21-
})

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

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
import React from 'react'
22
import P from '../components/paragraph'
33
import Post from '../components/post'
4-
import style from 'next/css'
54

65
export default () => (
7-
<div className={styles.main}>
6+
<div className='main'>
87
<Post title='My first blog post'>
98
<P>Hello there</P>
109
<P>This is an example of a componentized blog post</P>
1110
</Post>
1211

13-
<Hr />
12+
<hr />
1413

1514
<Post title='My second blog post'>
1615
<P>Hello there</P>
1716
<P>This is another example.</P>
1817
<P>Wa-hoo!</P>
1918
</Post>
2019

21-
<Hr />
20+
<hr />
2221

2322
<Post title='The final blog post'>
2423
<P>C'est fin</P>
2524
</Post>
25+
26+
<style jsx>{`
27+
.main {
28+
margin: auto;
29+
max-width: 420px;
30+
padding: 10px;
31+
}
32+
33+
hr {
34+
width: 100px;
35+
border-width: 0;
36+
margin: 20px auto;
37+
text-align: center;
38+
}
39+
40+
hr::before {
41+
content: "***";
42+
color: #ccc;
43+
}
44+
`}</style>
2645
</div>
2746
)
28-
29-
const Hr = () => <hr className={styles.hr} />
30-
31-
const styles = {
32-
main: style({
33-
margin: 'auto',
34-
maxWidth: '420px',
35-
padding: '10px'
36-
}),
37-
38-
hr: style({
39-
width: '100px',
40-
borderWidth: 0,
41-
margin: '20px auto',
42-
textAlign: 'center',
43-
'::before': {
44-
content: '"***"',
45-
color: '#ccc'
46-
}
47-
})
48-
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"send": "0.14.1",
6666
"source-map-support": "0.4.6",
6767
"strip-ansi": "3.0.1",
68+
"styled-jsx": "0.2.1",
6869
"url": "0.11.0",
6970
"webpack": "1.14.0",
7071
"webpack-dev-middleware": "1.9.0",

‎pages/_error-debug.js‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react'
22
import ansiHTML from 'ansi-html'
3-
import Head from 'next/head'
4-
import style from 'next/css'
53

64
export default class ErrorDebug extends React.Component {
75
static getInitialProps ({ err }) {
@@ -12,21 +10,47 @@ export default class ErrorDebug extends React.Component {
1210
render () {
1311
const { name, message, stack, path } = this.props
1412

15-
return <div className={styles.errorDebug}>
16-
<Head>
17-
<style dangerouslySetInnerHTML={{ __html: `
18-
body {
19-
background: #a6004c;
20-
margin: 0;
21-
}
22-
`}} />
23-
</Head>
24-
{path ? <div className={styles.heading}>Error in {path}</div> : null}
13+
return <div className='errorDebug'>
14+
{path ? <div className='heading'>Error in {path}</div> : null}
2515
{
2616
name === 'ModuleBuildError'
27-
? <pre className={styles.message} dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
28-
: <pre className={styles.message}>{stack}</pre>
17+
? <pre className='message' dangerouslySetInnerHTML={{ __html: ansiHTML(encodeHtml(message)) }} />
18+
: <pre className='message'>{stack}</pre>
2919
}
20+
<style jsx global>{`
21+
body {
22+
background: #a6004c;
23+
margin: 0;
24+
}
25+
`}</style>
26+
<style jsx>{`
27+
.errorDebug {
28+
height: 100vh;
29+
padding: 16px;
30+
box-sizing: border-box;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
}
36+
37+
.message {
38+
font-family: "SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace;
39+
font-size: 10px;
40+
color: #fbe7f1;
41+
margin: 0;
42+
white-space: pre-wrap;
43+
word-wrap: break-word;
44+
}
45+
46+
.heading {
47+
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif;
48+
font-size: 13px;
49+
font-weight: bold;
50+
color: #ff84bf;
51+
margin-bottom: 20pxl
52+
}
53+
`}</style>
3054
</div>
3155
}
3256
}
@@ -35,40 +59,6 @@ const encodeHtml = str => {
3559
return str.replace(/</g, '&lt;').replace(/>/g, '&gt;')
3660
}
3761

38-
const styles = {
39-
body: style({
40-
background: '#a6004c',
41-
margin: 0
42-
}),
43-
44-
errorDebug: style({
45-
height: '100vh',
46-
padding: '16px',
47-
boxSizing: 'border-box',
48-
display: 'flex',
49-
flexDirection: 'column',
50-
alignItems: 'center',
51-
justifyContent: 'center'
52-
}),
53-
54-
message: style({
55-
fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace',
56-
fontSize: '10px',
57-
color: '#fbe7f1',
58-
margin: 0,
59-
whiteSpace: 'pre-wrap',
60-
wordWrap: 'break-word'
61-
}),
62-
63-
heading: style({
64-
fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif',
65-
fontSize: '13px',
66-
fontWeight: 'bold',
67-
color: '#ff84bf',
68-
marginBottom: '20px'
69-
})
70-
}
71-
7262
// see color definitions of babel-code-frame:
7363
// https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js
7464

0 commit comments

Comments
 (0)