feat(site): scientific typestyle SSR config for gatsby

gatsby-config.js

@@ -1,5 +1,11 @@
 module.exports = {
     plugins: [
+        {
+            resolve: 'gatsby-plugin-typestyle', // local plugin
+            options: {
+                styleTargetId: 'pyonpyon-style',
+            },
+        },
         'gatsby-plugin-react-helmet',
         {
             resolve: 'gatsby-plugin-ts',

plugins/gatsby-plugin-typestyle/constants.js

@@ -0,0 +1 @@
+export const defaultStyleId = 'typestyle-target'

plugins/gatsby-plugin-typestyle/gatsby-browser.js

@@ -0,0 +1,23 @@
+const typestyle = require('typestyle')
+const constants = require('./constants')
+
+/**
+ * MEMO:
+ * Do not destructure on typestyle nor using es6 module,
+ * or setStylesTarget cannot be resolved.
+ *
+ * weird... seems to be webpack module resolution related issue :thingking:
+ */
+const setStyleTarget = typestyle.setStylesTarget
+
+const { defaultStyleId } = constants
+
+exports.onClientEntry = (_, { styleTargetId = defaultStyleId }) => {
+    let styleTarget = document.getElementById(styleTargetId)
+    if (!styleTarget) {
+        const newStyleEl = document.createElement('style')
+        newStyleEl.setAttribute('id', styleTargetId)
+        styleTarget = document.head.appendChild(newStyleEl)
+    }
+    setStyleTarget(styleTarget)
+}

plugins/gatsby-plugin-typestyle/gatsby-ssr.js

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { getStyles } from 'typestyle'
+import { renderToString } from 'react-dom/server'
+import { defaultStyleId } from './constants'
+
+export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }, { styleTargetId = defaultStyleId }) => {
+    replaceHeadComponents([
+        ...getHeadComponents(),
+        React.createElement('style', {
+            id: styleTargetId,
+            dangerouslySetInnerHTML: { __html: getStyles() },
+        }),
+    ])
+}

plugins/gatsby-plugin-typestyle/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@frantic1048/gatsby-plugin-typestyle",
+    "description": "provides typestyle with SSR configured for Gatsby.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "frantic1048",
+    "peerDependencies": {
+        "typestyle": "2.0.0^"
+    }
+}

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { style, cssRule, classes, getStyles } from 'typestyle'
+import { style, cssRule, classes, getStyles, setStylesTarget } from 'typestyle'
 import { rgb, linearGradient, deg, rgba, viewWidth, viewHeight, rem, em, percent } from 'csx'
 import { graphql, useStaticQuery, Link, GatsbyLinkProps } from 'gatsby'
 import { LayoutQuery } from '../../types/graphql-types'
@@ -43,31 +43,32 @@ const NavLink = React.forwardRef(({ activeClassName, ...props }: GatsbyLinkProps
     <Link className={navLinkClassName} activeClassName={activeClassName ?? 'active'} {...props} ref={ref} />
 ))
 
+/**
+ * some global rules
+ */
+cssRule('html, body', {
+    padding: 0,
+    margin: 0,
+    background: [
+        // Xjbg
+        linearGradient(deg(257), rgba(179, 232, 255, 0.6), rgba(255, 0, 0, 0)),
+        linearGradient(deg(167), rgba(0, 0, 255, 0.45), rgba(255, 0, 0, 0)),
+        linearGradient(deg(376), rgba(135, 206, 251, 0.7), rgba(255, 0, 0, 0)),
+        rgb(253, 255, 245).toHexString(),
+    ].join(','),
+    backgroundAttachment: 'fixed',
+})
+cssRule('h1', ...scaleAt(2))
+cssRule('h2', ...scaleAt(1))
+cssRule('h3', ...scaleAt(-1))
+cssRule('h4', ...scaleAt(-2))
+cssRule('h5', ...scaleAt(-3))
+cssRule('h6', ...scaleAt(-4))
+
 /**
  * Top level layout container
  */
 const Layout = ({ children, className }: LayoutProps) => {
-    React.useEffect(() => {
-        cssRule('html, body', {
-            padding: 0,
-            margin: 0,
-            background: [
-                // Xjbg
-                linearGradient(deg(257), rgba(179, 232, 255, 0.6), rgba(255, 0, 0, 0)),
-                linearGradient(deg(167), rgba(0, 0, 255, 0.45), rgba(255, 0, 0, 0)),
-                linearGradient(deg(376), rgba(135, 206, 251, 0.7), rgba(255, 0, 0, 0)),
-                rgb(253, 255, 245).toHexString(),
-            ].join(','),
-            backgroundAttachment: 'fixed',
-        })
-        cssRule('h1', ...scaleAt(2))
-        cssRule('h2', ...scaleAt(1))
-        cssRule('h3', ...scaleAt(-1))
-        cssRule('h4', ...scaleAt(-2))
-        cssRule('h5', ...scaleAt(-3))
-        cssRule('h6', ...scaleAt(-4))
-    }, [])
-
     const data = useStaticQuery<LayoutQuery>(graphql`
         query layout {
             site {
@@ -80,9 +81,6 @@ const Layout = ({ children, className }: LayoutProps) => {
 
     return (
         <div className={classes(layoutClassName, className)}>
-            <Helmet>
-                <style>{getStyles()}</style>
-            </Helmet>
             <header className={headerClassName}>{data.site?.siteMetadata?.title ?? ''}</header>
             <nav>
                 <NavLink to="/">Home</NavLink>