From dca79801955fb915040c3332d7c24c3b254a75b9 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Fri, 16 Jul 2021 22:09:55 -0700
Subject: [PATCH] Fix inlined css in every single page. (#369)

Fix for issue #366
* Create gatsby-ssr.js
Note: SSR means "server side rendering". This fix is from a long github discussion about how broken including all css inline in the file is. (Especially since newer CSP guidelines say all css should be in a separate file.)

* PR code review fixes
* Check el.props['data-href'] is valid
* Add comment for production only.
---
 client/gatsby-ssr.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 client/gatsby-ssr.js

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
new file mode 100644
index 00000000..57b64dad
--- /dev/null
+++ b/client/gatsby-ssr.js
@@ -0,0 +1,25 @@
+
+/* this is a hack to fix `gatsby-plugin-sass` from including the
+  css in every single file (which is > 120k lines).
+  see: https://github.com/gatsbyjs/gatsby/issues/1526
+  `ssr` means server-side rendering.
+  */
+export const onPreRenderHTML = ({getHeadComponents}) => {
+  if (process.env.NODE_ENV !== 'production') { // ONLY run in production
+    return;
+  }
+
+  getHeadComponents().forEach((el) => {
+    // Remove inline css. https://github.com/gatsbyjs/gatsby/issues/1526
+    if (el.type === 'style' && el.props['data-href']) {
+      el.type = 'link';
+      el.props['href'] = el.props['data-href'];
+      el.props['rel'] = 'stylesheet';
+      el.props['type'] = 'text/css';
+
+      delete el.props['data-href'];
+      delete el.props['dangerouslySetInnerHTML'];
+      delete el.props['children'];
+    }
+  });
+};