No idea why but it's much better now

blog/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "workbench.preferredDarkColorTheme": "Base2Tone_HeathDark",
+    "workbench.colorTheme": "Base2Tone_FieldDark"
+}

blog/gatsby-browser.js

@@ -0,0 +1,21 @@
+import React from "react";
+import {JssProvider, SheetsRegistry} from 'react-jss'
+
+export const onInitialClientRender = () => {
+  if (process.env.BUILD_STAGE === `develop`) {
+    return;
+  }
+
+  // Remove the server-side injected CSS.
+  const jssStyles = document.querySelector(`#jss-server-side`);
+  if (jssStyles) {
+    jssStyles.parentNode.removeChild(jssStyles);
+  }
+};
+
+export const wrapRootElement = ({ element }) => {
+
+  return element;
+//   return <StylesProvider {...stylesProvider}>{element}</StylesProvider>;
+//   return <JssProvider registry={sheets}>{element}</JssProvider>
+};

blog/gatsby-ssr.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import {JssProvider, SheetsRegistry} from 'react-jss'
+
+const globalLeak = new Map();
+
+export const wrapRootElement = ({ element, pathname }) => {
+  const sheets = new SheetsRegistry()
+  globalLeak.set(pathname, sheets);
+
+  return <JssProvider registry={sheets}>{element}</JssProvider>
+}
+
+export const onRenderBody = (
+    { setHeadComponents, pathname },
+  ) => {
+    const sheets = globalLeak.get(pathname);
+  
+    if (!sheets) {
+      return;
+    }
+  
+    const css = sheets.toString();
+  
+    // css = disableAutoprefixing ? css : autoprefixer(css, pathname);
+    // css = disableMinification ? css : cleanCSS.minify(css).styles;
+  
+    setHeadComponents([
+      <style
+        id="jss-server-side"
+        key="jss-server-side"
+        dangerouslySetInnerHTML={{ __html: css }}
+      />,
+    ]);
+  
+    globalLeak.delete(pathname);
+  };
+

blog/package-lock.json

@@ -8875,6 +8875,14 @@
         "@babel/runtime": "^7.2.0"
       }
     },
+    "gatsby-plugin-better-jss": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-better-jss/-/gatsby-plugin-better-jss-1.0.3.tgz",
+      "integrity": "sha512-1NG68s+8vpknG4CpaH7a3ac0NItWNsk8HWma9wr+NnuCYM8buBnE1MbYzbycKYkjNZZ6DAeISJpKqtbheJPyYg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.3.tgz",

blog/package.json

@@ -11,6 +11,7 @@
     "gatsby": "^2.19.45",
     "gatsby-image": "^2.2.8",
     "gatsby-plugin-alias-imports": "^1.0.5",
+    "gatsby-plugin-better-jss": "^1.0.3",
     "gatsby-plugin-manifest": "^2.3.2",
     "gatsby-plugin-mdx": "^1.0.0",
     "gatsby-plugin-offline": "^2.2.4",