diff --git a/client/index.js b/client/index.js index a6a9f220..9941f600 100644 --- a/client/index.js +++ b/client/index.js @@ -2,7 +2,6 @@ import { createElement } from 'react' import ReactDOM from 'react-dom' import { EventEmitter } from 'events' import HeadManager from './head-manager' -import { rehydrate } from '../lib/css' import { createRouter } from '../lib/router' import App from '../lib/app' import evalScript from '../lib/eval-script' @@ -13,7 +12,6 @@ const { component, errorComponent, props, - ids, err, pathname, query @@ -35,7 +33,6 @@ const container = document.getElementById('__next') export default (onError) => { const emitter = new EventEmitter() - if (ids && ids.length) rehydrate(ids) router.subscribe(({ Component, props, err }) => { render({ Component, props, err, emitter }, onError) diff --git a/examples/with-glamor/package.json b/examples/with-glamor/package.json index e82ad61f..bbead1d8 100644 --- a/examples/with-glamor/package.json +++ b/examples/with-glamor/package.json @@ -7,7 +7,7 @@ "start": "next start" }, "dependencies": { - "glamor": "^2.20.12", + "glamor": "^2.20.24", "next": "^2.0.0-beta", "react": "^15.4.2", "react-dom": "^15.4.2" diff --git a/examples/with-glamor/pages/_document.js b/examples/with-glamor/pages/_document.js index caeb9aa1..c6572651 100644 --- a/examples/with-glamor/pages/_document.js +++ b/examples/with-glamor/pages/_document.js @@ -4,10 +4,18 @@ import { renderStatic } from 'glamor/server' export default class MyDocument extends Document { static async getInitialProps ({ renderPage }) { const page = renderPage() - let styles = renderStatic(() => page.html) + const styles = renderStatic(() => page.html) return { ...page, ...styles } } + constructor (props) { + super(props) + const { __NEXT_DATA__, ids } = props + if (ids) { + __NEXT_DATA__.ids = this.props.ids + } + } + render () { return ( diff --git a/examples/with-glamor/pages/index.js b/examples/with-glamor/pages/index.js index 8265d635..17cc0aef 100644 --- a/examples/with-glamor/pages/index.js +++ b/examples/with-glamor/pages/index.js @@ -1,5 +1,12 @@ import React from 'react' -import { style } from 'glamor' +import { style, rehydrate } from 'glamor' + +// Adds server generated styles to glamor cache. +// Has to run before any `style()` calls +// '__NEXT_DATA__.ids' is set in '_document.js' +if (typeof window !== 'undefined') { + rehydrate(window.__NEXT_DATA__.ids) +} export default () =>

My page

diff --git a/lib/css.js b/lib/css.js index 8fe0d440..b87b3886 100644 --- a/lib/css.js +++ b/lib/css.js @@ -1,29 +1 @@ -import { deprecated } from './utils' -const css = require('glamor') -// Needed because of the mutation below -delete require.cache[require.resolve('glamor')] - -for (const [k, v] of Object.entries(css)) { - if (typeof v === 'function') { - css[k] = deprecated(v, 'Warning: \'next/css\' is deprecated. Please refer to the migration guide: https://github.com/zeit/next.js/wiki/Migrating-from-next-css') - } -} - -/** - * Expose style as default and the whole object as properties - * so it can be used as follows: - * - * import css, { merge } from 'next/css' - * css({ color: 'red' }) - * merge({ color: 'green' }) - * css.merge({ color: 'blue' }) - */ - -css.default = css.style -Object.keys(css).forEach(key => { - if (key !== 'default') { - css.default[key] = css[key] - } -}) - -module.exports = css +throw new Error(`'next/css' has been removed in Next.js 2.0. Please refer to the migration guide: https://github.com/zeit/next.js/wiki/Migrating-from-next-css`) diff --git a/package.json b/package.json index 27b72df2..3ae46284 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,6 @@ "cross-spawn": "5.0.1", "del": "2.2.2", "friendly-errors-webpack-plugin": "1.4.0", - "glamor": "2.20.23", "glob-promise": "3.1.0", "htmlescape": "1.1.1", "http-status": "1.0.1", diff --git a/server/document.js b/server/document.js index 42f13b43..588da328 100644 --- a/server/document.js +++ b/server/document.js @@ -1,37 +1,18 @@ 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 }) { - let head - let rendered - let styles - try { - rendered = renderStatic(() => { - const page = renderPage() - head = page.head - return page.html - }) - } finally { - styles = flush() - } - const { html, css, ids } = rendered - const nextCSS = { css, ids, styles } - return { html, head, nextCSS } + const {html, head} = renderPage() + const styles = flush() + return { html, head, styles } } static childContextTypes = { _documentProps: PropTypes.any } - constructor (props) { - super(props) - const { __NEXT_DATA__, nextCSS } = props - if (nextCSS) __NEXT_DATA__.ids = nextCSS.ids - } - getChildContext () { return { _documentProps: this.props } } @@ -53,11 +34,10 @@ export class Head extends Component { } render () { - const { head, nextCSS } = this.context._documentProps + const { head, styles } = this.context._documentProps return {(head || []).map((h, i) => React.cloneElement(h, { key: i }))} - {nextCSS && nextCSS.css ?