feat(gatsby-plugin-styletron): update to v5, debug mode, useStyletron (#13955)

* feat(gatsby-plugin-styletron): update to v5, debug mode, useStyletron hook

BREAKING CHANGE: styletron.css() removed, useStyletron as a native replacement

* feat(gatsby-plugin-styletron): debug mode can be disabled through the config

* feat(gatsby-plugin-styletron): add note about styletron-react v5 support

Author: tajo

packages/gatsby-plugin-styletron/README.md

@@ -1,12 +1,16 @@
 # gatsby-plugin-styletron
 
 A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for
-[styletron](https://github.com/rtsao/styletron) with built-in server-side
+[styletron](https://github.com/styletron/styletron) with built-in server-side
 rendering support.
 
+**This plugin supports `styletron-react` v5.** Check [the release notes](https://github.com/styletron/styletron/releases/tag/styletron-react%405.0.0) for more details about v5.
+
 ## Install
 
-`npm install --dev gatsby-plugin-styletron`
+```sh
+npm install gatsby-plugin-styletron
+```
 
 ## How to use
 
@@ -16,98 +20,41 @@ Edit `gatsby-config.js`
 module.exports = {
   plugins: [
     {
-      resolve: "gatsby-plugin-styletron",
+      resolve: `gatsby-plugin-styletron`,
       options: {
         // You can pass options to Styletron.
         prefix: "_",
+        // Disable dev debug mode, enabled by default
+        debug: false,
       },
     },
   ],
 }
 ```
 
-This can be used as described by [styletron-react](https://github.com/rtsao/styletron/tree/master/packages/styletron-react) such as:
-
-```javascript
-import React from "react"
-import { styled, withStyle } from "styletron-react"
-
-const RedAnchor = styled("a", { color: "red" })
-const FancyAnchor = withStyle(RedAnchor, { fontFamily: "cursive" })
-
-export default () => <FancyAnchor>Hi!</FancyAnchor>
-```
-
-Or, using the `css` convenience function:
-
-```javascript
-import React from "react"
-import styletron from "gatsby-plugin-styletron"
-
-const styles = {
-  fontFamily: "cursive",
-  color: "blue",
-}
-
-export default props => {
-  const css = styletron().css
-  return <div className={css({ backgroundColor: "#fcc", ...styles })}>Hi!</div>
-}
-```
-
-Or, crazy flexible combinations:
+This can be used as described by [styletron-react](https://github.com/styletron/styletron/tree/master/packages/styletron-react) such as:
 
-```javascript
+```jsx
 import React from "react"
-import { styled, withStyle } from "styletron-react"
-import styletron from "gatsby-plugin-styletron"
-
-const fancyStyles = {
-  ":hover": {
-    backgroundColor: "papayawhip",
-  },
-  "@media (max-width: 768px)": {
-    ":hover": {
-      animationDuration: "3s",
-      animationFillMode: "forwards",
-      animationName: {
-        "0%": {
-          transform: "translate3d(0,0,0)",
-        },
-        to: {
-          transform: "translate3d(100%,0,0)",
-        },
-      },
-      willChange: "transform",
-    },
-    fontFamily: {
-      fontStyle: "normal",
-      fontWeight: "normal",
-      src:
-        "url(https://fonts.gstatic.com/s/inconsolata/v16/QldKNThLqRwH-OJ1UHjlKGlW5qhExfHwNJU.woff2) format(woff2)",
-    },
-    fontSize: "24px",
-  },
-  fontSize: "36px",
-}
-
-const divStyles = {
-  border: "1px dashed #333",
-}
+import { styled, useStyletron } from "styletron-react"
 
+// statically styled component
 const RedAnchor = styled("a", { color: "red" })
-const FancyAnchor = withStyle(RedAnchor, { fontFamily: "cursive" })
 
-export default () => {
-  const css = styletron().css
+// dynamically styled component
+const BigAnchor = styled("a", ({ $size }) => ({ fontSize: `${$size}px` }))
 
+const IndexPage = () => {
+  // an alternative hook based API
+  const [css] = useStyletron()
   return (
-    <div
-      className={css({ backgroundColor: "#cff", ...divStyles, ...fancyStyles })}
-    >
-      <FancyAnchor>Hi!</FancyAnchor>
-      <div className={css(fancyStyles)}>Cool huh?</div>
+    <div>
+      <RedAnchor>Red Anchor</RedAnchor>
+      <BigAnchor $size={64}>Big Anchor</BigAnchor>
+      <p className={css({ color: "blue" })}>blue text</p>
     </div>
   )
 }
 ```
+
+Check more documentation and examples at [styletron.org](https://www.styletron.org/).

packages/gatsby-plugin-styletron/package.json

@@ -8,9 +8,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "styletron-engine-atomic": "^1.0.8",
-    "styletron-react": "^4",
-    "styletron-standard": "^1.0.6"
+    "styletron-engine-atomic": "^1.1.0",
+    "styletron-react": "^5.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",

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

@@ -1,8 +1,20 @@
 const React = require(`react`)
 const styletron = require(`./index`)
-const { Provider } = require(`styletron-react`)
+const { Provider, DebugEngine } = require(`styletron-react`)
+
+const debug = process.env.NODE_ENV === `production` ? void 0 : new DebugEngine()
 
 // eslint-disable-next-line react/prop-types
-exports.wrapRootElement = ({ element }, options) => (
-  <Provider value={styletron(options).instance}>{element}</Provider>
-)
+exports.wrapRootElement = ({ element }, options) => {
+  const enableDebug =
+    options.debug === true || typeof options.debug === `undefined`
+  return (
+    <Provider
+      value={styletron(options).instance}
+      debug={enableDebug ? debug : undefined}
+      debugAfterHydration={enableDebug}
+    >
+      {element}
+    </Provider>
+  )
+}

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

@@ -7,9 +7,8 @@ exports.wrapRootElement = ({ element }, options) => (
   <Provider value={styletron(options).instance}>{element}</Provider>
 )
 
-exports.onRenderBody = ({ bodyComponent, setHeadComponents }, options) => {
+exports.onRenderBody = ({ setHeadComponents }, options) => {
   const instance = styletron(options).instance
-
   const stylesheets = instance.getStylesheets()
   const headComponents = stylesheets[0].css
     ? stylesheets.map((sheet, index) => (
@@ -20,6 +19,7 @@ exports.onRenderBody = ({ bodyComponent, setHeadComponents }, options) => {
           }}
           key={index}
           media={sheet.attrs.media}
+          data-hydrate={sheet.attrs[`data-hydrate`]}
         />
       ))
     : null

packages/gatsby-plugin-styletron/src/index.js

@@ -1,5 +1,4 @@
 const { Client, Server } = require(`styletron-engine-atomic`)
-const { driver } = require(`styletron-standard`)
 
 let memoizedValue
 
@@ -15,7 +14,6 @@ module.exports = (() => options => {
       instance = new Server(options)
     }
     memoizedValue = {
-      css: json => driver(json, instance),
       instance,
     }
   }