From 1408cc143b1ffc5cfdcd0648e1344bf54df496d9 Mon Sep 17 00:00:00 2001 From: nkzawa Date: Sun, 18 Dec 2016 02:02:59 +0900 Subject: [PATCH 1/8] integrate styled-jsx --- package.json | 1 + server/build/webpack.js | 7 +++++-- server/document.js | 13 +++++++++++-- test/fixtures/basic/pages/styled-jsx.js | 6 ++++++ test/integration.test.js | 6 ++++++ 5 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 test/fixtures/basic/pages/styled-jsx.js diff --git a/package.json b/package.json index 0ca875f2d814e..9133495b123ab 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", + "styled-jsx": "0.1.0", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.8.4", diff --git a/server/build/webpack.js b/server/build/webpack.js index 312535e7f9c65..739bb7bb0c3c1 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -119,7 +119,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') } } ] @@ -142,6 +143,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'), { @@ -153,7 +155,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 90c8501cb7fe6..37328c137dd69 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/flush' 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,14 @@ 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 1596008832fc7..bc089918fae51 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -44,6 +44,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.includes('')).toBeTruthy() + expect(html.includes('

This is blue

')).toBeTruthy() + }) + test('renders properties populated asynchronously', async () => { const html = await render('/async-props') expect(html.includes('

Diego Milito

')).toBeTruthy() From a73047ecc0f60346898ea0e2753b066e02586a87 Mon Sep 17 00:00:00 2001 From: nkzawa Date: Sun, 18 Dec 2016 03:27:02 +0900 Subject: [PATCH 2/8] define styles of pages with styled-jsx --- pages/_error-debug.js | 86 +++++++++++++++++--------------------- pages/_error.js | 90 ++++++++++++++++++++-------------------- test/integration.test.js | 4 +- 3 files changed, 84 insertions(+), 96 deletions(-) diff --git a/pages/_error-debug.js b/pages/_error-debug.js index 8913db2c4fd23..c24537c10c782 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 192173aa90d0a..6dc371635fe4a 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}.

-
- } -} + +
+ } } diff --git a/test/integration.test.js b/test/integration.test.js index bc089918fae51..97de0683d89d8 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -67,8 +67,8 @@ describe('integration tests', () => { test('error 404', async () => { const html = await render('/non-existent') - expect(html).toMatch(/

404<\/h1>/) - expect(html).toMatch(/

This page could not be found\.<\/h2>/) + expect(html).toMatch(/

404<\/h1>/) + expect(html).toMatch(/

This page could not be found\.<\/h2>/) }) test('finishes response', async () => { From 3f55151ed73c1540bad698258b1a6f13c55d0501 Mon Sep 17 00:00:00 2001 From: nkzawa Date: Mon, 19 Dec 2016 15:19:05 +0900 Subject: [PATCH 3/8] bump styled-jsx --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cd7293af2b540..810672d78d204 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", - "styled-jsx": "0.1.0", + "styled-jsx": "0.1.1", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", From 8d356aa87b10d4c66e8e4979b224017a233b19c5 Mon Sep 17 00:00:00 2001 From: nkzawa Date: Tue, 20 Dec 2016 00:54:15 +0900 Subject: [PATCH 4/8] bump styled-jsx --- package.json | 2 +- test/integration.test.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 810672d78d204..e691d573a752e 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", - "styled-jsx": "0.1.1", + "styled-jsx": "0.1.2", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", diff --git a/test/integration.test.js b/test/integration.test.js index 97de0683d89d8..df7a7704e3811 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -46,8 +46,8 @@ describe('integration tests', () => { test('renders styled jsx', async () => { const html = await render('/styled-jsx') - expect(html.includes('')).toBeTruthy() - expect(html.includes('

This is blue

')).toBeTruthy() + expect(html).toMatch(/

From 6de29b0104d9f073057170a53d224f637c3d39ff Mon Sep 17 00:00:00 2001 From: nkzawa Date: Tue, 20 Dec 2016 01:07:11 +0900 Subject: [PATCH 6/8] bump styled-jsx --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e691d573a752e..14868adf4f291 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", - "styled-jsx": "0.1.2", + "styled-jsx": "0.1.3", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", From 55149492f01391a69b334d33d78f84be52bfb99c Mon Sep 17 00:00:00 2001 From: nkzawa Date: Tue, 20 Dec 2016 02:20:51 +0900 Subject: [PATCH 7/8] fix examples to use 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 +++++++++---------- 5 files changed, 60 insertions(+), 81 deletions(-) delete mode 100644 bench/fixtures/basic/pages/css.js diff --git a/bench/fixtures/basic/pages/css.js b/bench/fixtures/basic/pages/css.js deleted file mode 100644 index 80cb5cf0de3c6..0000000000000 --- 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 b6465a5610f11..df01c9fc43d18 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 a150403337789..294cd81483aaf 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 81ff89e2c7a60..5d3105780361d 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 ea29829ecffd2..7e937d471195c 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' - } - }) -} From a34cacfd87361ef08c770cd8bd891de5c6cd6c9d Mon Sep 17 00:00:00 2001 From: nkzawa Date: Tue, 20 Dec 2016 03:30:04 +0900 Subject: [PATCH 8/8] bump styled-jsx --- package.json | 2 +- server/document.js | 10 ++-------- test/integration.test.js | 2 +- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 14868adf4f291..5411f4982b989 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "send": "0.14.1", "source-map-support": "0.4.6", "strip-ansi": "3.0.1", - "styled-jsx": "0.1.3", + "styled-jsx": "0.2.1", "url": "0.11.0", "webpack": "1.14.0", "webpack-dev-middleware": "1.9.0", diff --git a/server/document.js b/server/document.js index 37328c137dd69..e31ed8d345724 100644 --- a/server/document.js +++ b/server/document.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react' import htmlescape from 'htmlescape' import { renderStatic } from 'glamor/server' -import flush from 'styled-jsx/flush' +import flush from 'styled-jsx/server' export default class Document extends Component { static getInitialProps ({ renderPage }) { @@ -51,13 +51,7 @@ export class Head extends Component { return {(head || []).map((h, i) => React.cloneElement(h, { key: i }))} {nextCSS && nextCSS.css ?