terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Support for cxs rehydration and removal of duplicate styles. (#1860)

Browse source 
* add cxs.rehydrate.

* add id='cxs-style'.
This commit is contained in:
Arana Jhonny 2017-05-06 14:37:47 -04:00 committed by Tim Neutkens
parent 0abfca26f7
commit 23574b5489
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/with-cxs/pages/_document.js
View file

@ -1,5 +1,5 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import cxs from 'cxs' import cxs from 'cxs/lite'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps ({ renderPage }) { static async getInitialProps ({ renderPage }) {
@ -13,7 +13,7 @@ export default class MyDocument extends Document {
<html> <html>
<Head> <Head>
<title>My page</title> <title>My page</title>
<style dangerouslySetInnerHTML={{ __html: this.props.style }} /> <style id='cxs-style' dangerouslySetInnerHTML={{ __html: this.props.style }} />
</Head> </Head>
<body> <body>
<Main /> <Main />

10
examples/with-cxs/pages/index.js
View file

@ -1,5 +1,13 @@
import React from 'react' import React from 'react'
import cxs from 'cxs' import cxs from 'cxs/lite'
// Using cxs/lite on both the server and client,
// the styles will need to be rehydrated.
if (typeof window !== 'undefined') {
const styleTag = document.getElementById('cxs-style')
const serverCss = styleTag.innerHTML
cxs.rehydrate(serverCss)
}
export default () => ( export default () => (
<div className={cx.root}> <div className={cx.root}>