Skip to content

Commit 23574b5

Browse files
aranajhonnytimneutkens
authored andcommitted
Support for cxs rehydration and removal of duplicate styles. (vercel#1860)
* add cxs.rehydrate. * add id='cxs-style'.
1 parent 0abfca2 commit 23574b5

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

examples/with-cxs/pages/_document.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Document, { Head, Main, NextScript } from 'next/document'
2-
import cxs from 'cxs'
2+
import cxs from 'cxs/lite'
33

44
export default class MyDocument extends Document {
55
static async getInitialProps ({ renderPage }) {
@@ -13,7 +13,7 @@ export default class MyDocument extends Document {
1313
<html>
1414
<Head>
1515
<title>My page</title>
16-
<style dangerouslySetInnerHTML={{ __html: this.props.style }} />
16+
<style id='cxs-style' dangerouslySetInnerHTML={{ __html: this.props.style }} />
1717
</Head>
1818
<body>
1919
<Main />

examples/with-cxs/pages/index.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import React from 'react'
2-
import cxs from 'cxs'
2+
import cxs from 'cxs/lite'
3+
4+
// Using cxs/lite on both the server and client,
5+
// the styles will need to be rehydrated.
6+
if (typeof window !== 'undefined') {
7+
const styleTag = document.getElementById('cxs-style')
8+
const serverCss = styleTag.innerHTML
9+
cxs.rehydrate(serverCss)
10+
}
311

412
export default () => (
513
<div className={cx.root}>

0 commit comments

Comments
 (0)