From a87ef1a7af8c8b7d3e1bfad9442c5330bbe2aa4c Mon Sep 17 00:00:00 2001 From: Naoyuki Kanezawa Date: Tue, 20 Dec 2016 03:42:19 +0900 Subject: [PATCH] Incorporate styled-jsx (#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 --- bench/fixtures/basic/pages/css.js | 21 ----- examples/basic-css/pages/index.js | 26 +++--- .../nested-components/components/paragraph.js | 16 ++-- examples/nested-components/components/post.js | 30 +++--- examples/nested-components/pages/index.js | 48 +++++----- package.json | 1 + pages/_error-debug.js | 86 ++++++++--------- pages/_error.js | 92 +++++++++---------- server/build/webpack.js | 7 +- server/document.js | 7 +- test/fixtures/basic/pages/styled-jsx.js | 6 ++ test/integration.test.js | 10 +- 12 files changed, 168 insertions(+), 182 deletions(-) delete mode 100644 bench/fixtures/basic/pages/css.js create mode 100644 test/fixtures/basic/pages/styled-jsx.js diff --git a/bench/fixtures/basic/pages/css.js b/bench/fixtures/basic/pages/css.js deleted file mode 100644 index 80cb5cf0..00000000 --- a/bench/fixtures/basic/pages/css.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Component } from 'react' -import { style } from 'next/css' - -export default class CrazyCSS extends Component { - spans () { - const out = [] - for (let i = 0; i < 1000; i++) { - out.push(This is ${i}) - } - return out - } - - render () { - return
{this.spans()}
- } -} - -const spanStyles = {} -for (let i = 0; i < 1000; i++) { - spanStyles[`padding-${i}`] = style({ padding: i }) -} diff --git a/examples/basic-css/pages/index.js b/examples/basic-css/pages/index.js index b6465a56..df01c9fc 100644 --- a/examples/basic-css/pages/index.js +++ b/examples/basic-css/pages/index.js @@ -1,19 +1,19 @@ import React from 'react' -import style from 'next/css' export default () => ( -
+

Hello World

+
) - -const styles = style({ - font: '15px Helvetica, Arial, sans-serif', - background: '#eee', - padding: '100px', - textAlign: 'center', - transition: '100ms ease-in background', - ':hover': { - background: '#ccc' - } -}) diff --git a/examples/nested-components/components/paragraph.js b/examples/nested-components/components/paragraph.js index a1504033..294cd814 100644 --- a/examples/nested-components/components/paragraph.js +++ b/examples/nested-components/components/paragraph.js @@ -1,11 +1,13 @@ import React from 'react' -import style from 'next/css' export default ({ children }) => ( -

{children}

+

+ {children} + +

) - -const styles = style({ - font: '13px Helvetica, Arial', - margin: '10px 0' -}) diff --git a/examples/nested-components/components/post.js b/examples/nested-components/components/post.js index 81ff89e2..5d310578 100644 --- a/examples/nested-components/components/post.js +++ b/examples/nested-components/components/post.js @@ -1,21 +1,21 @@ import React from 'react' -import style from 'next/css' export default ({ title, children }) => ( -
-

{ title }

+
+

{ title }

{ children } +
) - -const mainStyle = style({ - font: '15px Helvetica, Arial', - border: '1px solid #eee', - padding: '0 10px' -}) - -const titleStyle = style({ - fontSize: '16px', - fontWeight: 'bold', - margin: '10px 0' -}) diff --git a/examples/nested-components/pages/index.js b/examples/nested-components/pages/index.js index ea29829e..7e937d47 100644 --- a/examples/nested-components/pages/index.js +++ b/examples/nested-components/pages/index.js @@ -1,16 +1,15 @@ import React from 'react' import P from '../components/paragraph' import Post from '../components/post' -import style from 'next/css' export default () => ( -
+

Hello there

This is an example of a componentized blog post

 -
+

Hello there

@@ -18,31 +17,30 @@ export default () => (

Wa-hoo!

 -
+

C'est fin

 + +
) - -const Hr = () =>
- -const styles = { - main: style({ - margin: 'auto', - maxWidth: '420px', - padding: '10px' - }), - - hr: style({ - width: '100px', - borderWidth: 0, - margin: '20px auto', - textAlign: 'center', - '::before': { - content: '"***"', - color: '#ccc' - } - }) -} diff --git a/package.json b/package.json index 42722d17..d6a3afe4 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", + "styled-jsx": "0.2.1", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", diff --git a/pages/_error-debug.js b/pages/_error-debug.js index 8913db2c..8155509f 100644 --- a/pages/_error-debug.js +++ b/pages/_error-debug.js @@ -1,7 +1,5 @@ import React from 'react' import ansiHTML from 'ansi-html' -import Head from 'next/head' -import style from 'next/css' export default class ErrorDebug extends React.Component { static getInitialProps ({ err }) { @@ -12,21 +10,47 @@ export default class ErrorDebug extends React.Component { render () { const { name, message, stack, path } = this.props - return
- - +
} } @@ -35,40 +59,6 @@ const encodeHtml = str => { return str.replace(//g, '>') } -const styles = { - body: style({ - background: '#a6004c', - margin: 0 - }), - - errorDebug: style({ - height: '100vh', - padding: '16px', - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center' - }), - - message: style({ - fontFamily: '"SF Mono", "Roboto Mono", "Fira Mono", menlo-regular, monospace', - fontSize: '10px', - color: '#fbe7f1', - margin: 0, - whiteSpace: 'pre-wrap', - wordWrap: 'break-word' - }), - - heading: style({ - fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif', - fontSize: '13px', - fontWeight: 'bold', - color: '#ff84bf', - marginBottom: '20px' - }) -} - // see color definitions of babel-code-frame: // https://github.com/babel/babel/blob/master/packages/babel-code-frame/src/index.js diff --git a/pages/_error.js b/pages/_error.js index 192173aa..6dc37163 100644 --- a/pages/_error.js +++ b/pages/_error.js @@ -1,5 +1,4 @@ import React from 'react' -import style from 'next/css' export default class Error extends React.Component { static getInitialProps ({ res, xhr }) { @@ -13,54 +12,53 @@ export default class Error extends React.Component { ? 'This page could not be found' : (statusCode ? 'Internal Server Error' : 'An unexpected error has occurred') - return
-
- {statusCode ?

{statusCode}

: null} -
-

{title}.

+ return
+
+ {statusCode ?

{statusCode}

: null} +
+

{title}.

+
} } - -const styles = { - error: style({ - color: '#000', - background: '#fff', - top: 0, - bottom: 0, - left: 0, - right: 0, - position: 'absolute', - fontFamily: '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif', - textAlign: 'center', - paddingTop: '20%' - }), - - desc: style({ - display: 'inline-block', - textAlign: 'left', - lineHeight: '49px', - height: '49px', - verticalAlign: 'middle' - }), - - h1: style({ - display: 'inline-block', - borderRight: '1px solid rgba(0, 0, 0,.3)', - margin: 0, - marginRight: '20px', - padding: '10px 23px', - fontSize: '24px', - fontWeight: 500, - verticalAlign: 'top' - }), - - h2: style({ - fontSize: '14px', - fontWeight: 'normal', - margin: 0, - padding: 0 - }) -} diff --git a/server/build/webpack.js b/server/build/webpack.js index e6bd3e3d..c4e19549 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -120,7 +120,8 @@ export default async function createCompiler (dir, { dev = false } = {}) { require.resolve('babel-plugin-module-resolver'), { alias: { - 'ansi-html': require.resolve('ansi-html') + 'ansi-html': require.resolve('ansi-html'), + 'styled-jsx/style': require.resolve('styled-jsx/style') } } ] @@ -143,6 +144,7 @@ export default async function createCompiler (dir, { dev = false } = {}) { require.resolve('babel-plugin-transform-object-rest-spread'), require.resolve('babel-plugin-transform-class-properties'), require.resolve('babel-plugin-transform-runtime'), + require.resolve('styled-jsx/babel'), [ require.resolve('babel-plugin-module-resolver'), { @@ -154,7 +156,8 @@ export default async function createCompiler (dir, { dev = false } = {}) { 'next/prefetch': require.resolve('../../lib/prefetch'), 'next/css': require.resolve('../../lib/css'), 'next/head': require.resolve('../../lib/head'), - 'next/document': require.resolve('../../server/document') + 'next/document': require.resolve('../../server/document'), + 'styled-jsx/style': require.resolve('styled-jsx/style') } } ] diff --git a/server/document.js b/server/document.js index 90c8501c..e31ed8d3 100644 --- a/server/document.js +++ b/server/document.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from 'react' import htmlescape from 'htmlescape' import { renderStatic } from 'glamor/server' +import flush from 'styled-jsx/server' export default class Document extends Component { static getInitialProps ({ renderPage }) { @@ -10,7 +11,8 @@ export default class Document extends Component { head = page.head return page.html }) - const nextCSS = { css, ids } + const styles = flush() + const nextCSS = { css, ids, styles } return { html, head, nextCSS } } @@ -48,7 +50,8 @@ export class Head extends Component { const { head, nextCSS } = this.context._documentProps return {(head || []).map((h, i) => React.cloneElement(h, { key: i }))} - {nextCSS ? +
+) diff --git a/test/integration.test.js b/test/integration.test.js index 040c3a1c..a7b04491 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -45,6 +45,12 @@ describe('integration tests', () => { expect(/
This is red<\/div>/.test(html)).toBeTruthy() }) + test('renders styled jsx', async () => { + const html = await render('/styled-jsx') + expect(html).toMatch(/