next.js/examples/with-glamor/pages/index.js

import React from 'react'
import { 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 () => <h1 css={{ color: 'red', fontSize: 50 }}>My page</h1>
Added glamor example and pointing warning to css migration guide (#500) 2016-12-23 19:18:25 +00:00			`import React from 'react'`
Improve glamor example (#4893) Changes: - Use css prop on the element to style it - Add webpack + babelrc configuration to remove otherwise needed import boilerplate [according to glamor docs](https://github.com/threepointone/glamor/blob/master/docs/createElement.md) Rationale: The killer feature of glamor that makes it so great is that it relieves you from naming classes/styles if you use the custom css prop. Together with the babel plugin you also don't need any extra import wherever the css prop is used. All the real world uses I've seen of glamor has used the css props so I think the example should reflect this. As an example here is docs how to use glamor with gatsby (using the css prop): https://www.gatsbyjs.org/docs/glamor/ 2018-08-05 23:13:28 +00:00			`import { rehydrate } from 'glamor'`
Remove traces of glamor (#1286) * Remove traces of glamor As talked about with @rauchg. Glamor takes up around 60KB of the bundle (pre-gzip). Since styled-jsx is the way to go now and we support adding glamor by the user we should remove it as dependency cause it is bundled even when not used. Added rehydration to the example, since we did that in our code. There is only one thing I'm not sure about and want to discuss: what should we do with next/css. Right now I added a throw for when it is imported. I'm not sure if we should do that / some other way to notify the user it has been removed. The reasoning behind the throw is that when we would do a console.warn the user would see 'css.default.<X>' not found because we don't have the glamor dependency anymore. * Update yarn.lock * Remove test for styles 2017-02-26 12:28:00 +00:00
			`// 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)`
			`}`
Added glamor example and pointing warning to css migration guide (#500) 2016-12-23 19:18:25 +00:00
Improve glamor example (#4893) Changes: - Use css prop on the element to style it - Add webpack + babelrc configuration to remove otherwise needed import boilerplate [according to glamor docs](https://github.com/threepointone/glamor/blob/master/docs/createElement.md) Rationale: The killer feature of glamor that makes it so great is that it relieves you from naming classes/styles if you use the custom css prop. Together with the babel plugin you also don't need any extra import wherever the css prop is used. All the real world uses I've seen of glamor has used the css props so I think the example should reflect this. As an example here is docs how to use glamor with gatsby (using the css prop): https://www.gatsbyjs.org/docs/glamor/ 2018-08-05 23:13:28 +00:00			`export default () => <h1 css={{ color: 'red', fontSize: 50 }}>My page</h1>`