implement gatsby-plugin-jss (#1431)

this also adds a new lifecycle callback "onInitialClientRender" to Browser API.
It is called when the initial render of a Gatsby App is done on the client.

examples/using-jss/README.md

@@ -0,0 +1,6 @@
+# Using JSS
+
+https://using-jss.gatsbyjs.org
+
+Example site that demonstrates how to build Gatsby sites
+with [JSS](http://cssinjs.org/).

examples/using-jss/gatsby-config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby with JSS`,
+  },
+  plugins: [
+    `gatsby-plugin-jss`,
+  ],
+}

examples/using-jss/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "gatsby-example-using-jss",
+  "private": true,
+  "description": "Gatsby example site using the JSS plugin",
+  "version": "1.0.0",
+  "author": "Vladimir Guguiev <[email protected]>",
+  "dependencies": {
+    "gatsby": "latest",
+    "gatsby-link": "latest",
+    "gatsby-plugin-jss": "latest"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve"
+  }
+}

examples/using-jss/src/pages/detail.js

@@ -0,0 +1,45 @@
+// @flow
+import React from "react"
+import Link from 'gatsby-link'
+import injectSheet from "react-jss"
+
+const styles = {
+  heading: {
+    padding: `10px`,
+    backgroundColor: `darksalmon`,
+    color: `white`,
+    fontFamily: `monospace`,
+    fontWeight: 300,
+  },
+  main: {
+    display: `flex`,
+    justifyContent: `space-between`,
+    fontFamily: `monospace`,
+  },
+  footer: {
+    marginTop: `15px`,
+    backgroundColor: `azure`,
+    fontFamily: `monospace`,
+  },
+}
+
+type Props = {
+  classes: { [string]: string }
+}
+
+const DetailPage = ({ classes }: Props) => (
+  <div>
+    <h1 className={classes.heading} >Detail page</h1>
+    <main className={classes.main} >
+      <Link to="/" >Go to Home page</Link>
+      <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-jss/">
+        gatsby-plugin-jss docs
+      </a>
+    </main>
+    <footer className={classes.footer} >
+      The styling on this page is implemented with JSS and it works even with disabled JavaScript
+    </footer>
+  </div>
+)
+
+export default injectSheet(styles)(DetailPage)

examples/using-jss/src/pages/index.js

@@ -0,0 +1,45 @@
+// @flow
+import React from "react"
+import Link from 'gatsby-link'
+import injectSheet from "react-jss"
+
+const styles = {
+  heading: {
+    padding: `10px`,
+    backgroundColor: `darkturquoise`,
+    color: `white`,
+    fontFamily: `monospace`,
+    fontWeight: 300,
+  },
+  main: {
+    display: `flex`,
+    justifyContent: `space-between`,
+    fontFamily: `monospace`,
+  },
+  footer: {
+    marginTop: `15px`,
+    backgroundColor: `azure`,
+    fontFamily: `monospace`,
+  },
+}
+
+type Props = {
+  classes: { [string]: string }
+}
+
+const HomePage = ({ classes }: Props) => (
+  <div>
+    <h1 className={classes.heading} >Home page</h1>
+    <main className={classes.main} >
+      <Link to="/detail" >Go to Detail page</Link>
+      <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-jss/">
+        gatsby-plugin-jss docs
+      </a>
+    </main>
+    <footer className={classes.footer} >
+      The styling on this page is implemented with JSS and it works even with disabled JavaScript
+    </footer>
+  </div>
+)
+
+export default injectSheet(styles)(HomePage)

packages/gatsby-plugin-jss/README.md

@@ -1,3 +1,22 @@
 # gatsby-plugin-jss
 
-Stub README
+Provide drop-in support for using the css-in-js library
+[JSS](https://github.com/cssinjs/react-jss) including server rendering.
+
+## Install
+
+`npm install --save gatsby-plugin-jss`
+
+## How to use
+
+First add the plugin to your `gatsby-config.js`.
+
+```javascript
+plugins: [
+  `gatsby-plugin-jss`,
+]
+```
+
+## Example
+
+https://github.com/gatsbyjs/gatsby/tree/master/examples/using-jss

packages/gatsby-plugin-jss/package.json

@@ -1,17 +1,24 @@
 {
   "name": "gatsby-plugin-jss",
-  "version": "1.0.1",
-  "description": "Stub description for gatsby-plugin-jss",
+  "version": "1.0.0",
+  "description": "Gatsby plugin that adds SSR support for JSS",
   "main": "index.js",
   "scripts": {
     "build": "babel src --out-dir . --ignore __tests__",
-    "watch": "babel -w src --out-dir . --ignore __tests__"
+    "watch": "babel -w src --out-dir . --ignore __tests__",
+    "prepublish": "npm run build"
   },
   "keywords": [
-    "gatsby"
+    "gatsby",
+    "gatsby-plugin",
+    "jss",
+    "react-jss"
   ],
-  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "author": "Vladimir Guguiev <wizardzloy@gmail.com>",
   "license": "MIT",
+  "dependencies": {
+    "react-jss": "^7.0.2"
+  },
   "devDependencies": {
     "babel-cli": "^6.24.1"
   }

packages/gatsby-plugin-jss/src/gatsby-browser.js

@@ -0,0 +1,6 @@
+// remove the JSS style tag generated on the server to avoid conflicts with the one added on the client
+exports.onInitialClientRender = () => {
+    // eslint-disable-next-line no-undef
+    const ssStyles = window.document.getElementById(`server-side-jss`)
+    ssStyles && ssStyles.parentNode.removeChild(ssStyles)
+}

packages/gatsby-plugin-jss/src/gatsby-ssr.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { JssProvider, SheetsRegistry } from 'react-jss'
+
+exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString, setHeadComponents }) => {
+    const sheets = new SheetsRegistry()
+
+    const bodyHTML = renderToString(
+        <JssProvider registry={sheets}>
+            {bodyComponent}
+        </JssProvider>
+    )
+
+    replaceBodyHTMLString(bodyHTML)
+    setHeadComponents([
+        <style type="text/css" id="server-side-jss">
+            {sheets.toString()}
+        </style>,
+    ])
+}

packages/gatsby/src/cache-dir/app.js

@@ -40,7 +40,8 @@ ReactDOM.render(
   <HotContainer>
     <Root />
   </HotContainer>,
-  rootElement
+  rootElement,
+  () => { apiRunner(`onInitialClientRender`) }
 )
 
 if (module.hot) {
@@ -53,7 +54,8 @@ if (module.hot) {
       <HotContainer>
         <NextRoot />
       </HotContainer>,
-      rootElement
+      rootElement,
+      () => { apiRunner(`onInitialClientRender`) }
     )
   })
 }

packages/gatsby/src/cache-dir/production-app.js

@@ -164,7 +164,8 @@ loadLayout(layout => {
       <NewRoot />,
       typeof window !== `undefined`
         ? document.getElementById(`___gatsby`)
-        : void 0
+        : void 0,
+      () => { apiRunner(`onInitialClientRender`) }
     )
   })
 })

packages/gatsby/src/utils/api-browser-docs.js

@@ -8,6 +8,15 @@
  */
 exports.onClientEntry = true
 
+/**
+ * Called when the initial render of Gatsby App is done on the client.
+ * @example
+ * exports.onInitialClientRender = () => {
+ *   console.log("ReactDOM.render is executed")
+ * }
+ */
+exports.onInitialClientRender = true
+
 /**
  * Called when the user changes routes
  * @param {object} $0