Skip to content

Commit

Permalink
[gatsby-plugin-styletron] Hydrate Styletron on a client with server-r…
Browse files Browse the repository at this point in the history
…endered styles. (#3236)

* Hydrate Styletron on a client with server-rendered styles to prevent re-rendering of server-rendered styles. Set styletron styles as dangerouslySetInnerHTML to avoid escaping characters.

* format
  • Loading branch information
nadiia authored and KyleAMathews committed Dec 16, 2017
1 parent 06b7a75 commit 634ddd7
Showing 4 changed files with 20 additions and 14 deletions.
6 changes: 3 additions & 3 deletions docs/docs/gatsby-starters.md
Original file line number Diff line number Diff line change
@@ -288,11 +288,11 @@ Community:
* Colorful homepage, and also includes a Landing Page and Generic Page components.
* Many elements are available, including buttons, forms, tables, and pagination.
* Styling with SCSS

* [gatsby-firebase-authentication](https://github.com/rwieruch/gatsby-firebase-authentication) [(demo)](https://react-firebase-authentication.wieruch.com/)

Features:

* Sign In, Sign Up, Sign Out
* Password Forget
* Password Change
16 changes: 9 additions & 7 deletions packages/gatsby-plugin-styletron/src/gatsby-browser.js
Original file line number Diff line number Diff line change
@@ -2,10 +2,12 @@ const React = require(`react`)
const Styletron = require(`styletron-client`)
const { StyletronProvider } = require(`styletron-react`)

const styletron = new Styletron()

exports.wrapRootComponent = ({ Root }) => () => (
<StyletronProvider styletron={styletron}>
<Root />
</StyletronProvider>
)
exports.wrapRootComponent = ({ Root }) => () => {
const styleElements = document.getElementsByClassName(`_styletron_hydrate_`)
const styletron = new Styletron(styleElements)
return (
<StyletronProvider styletron={styletron}>
<Root />
</StyletronProvider>
)
}
11 changes: 8 additions & 3 deletions packages/gatsby-plugin-styletron/src/gatsby-ssr.js
Original file line number Diff line number Diff line change
@@ -18,9 +18,14 @@ exports.replaceRenderer = ({

const stylesheets = styletron.getStylesheets()
const headComponents = stylesheets.map((sheet, index) => (
<style media={sheet.media || `all`} key={index}>
{sheet.css}
</style>
<style
media={sheet.media}
className="_styletron_hydrate_"
key={index}
dangerouslySetInnerHTML={{
__html: sheet.css,
}}
/>
))

setHeadComponents(headComponents)
1 change: 0 additions & 1 deletion packages/gatsby/src/commands/data-explorer.js
Original file line number Diff line number Diff line change
@@ -24,4 +24,3 @@ module.exports = async (program: any) => {
console.log(`Gatsby data explorer running at`, `http://${host}:${port}`)
app.listen(port, host)
}

0 comments on commit 634ddd7

Please sign in to comment.