Ft ui async stylesheets

packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap

@@ -127,6 +127,30 @@ exports[`dotcom-ui-shell/src/components/Shell renders the GTM script when the en
       id="initial-props"
       type="application/json"
     />
+    <noscript />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "(function loadAsyncStylesheets() {
+  var currentScript = document.scripts[document.scripts.length - 1]
+  var stylesheets = currentScript.getAttribute('data-stylesheets').split(',')
+
+  for (var i = 0, len = stylesheets.length; i < len; i++) {
+    var link = document.createElement('link')
+    link.href = stylesheets[i]
+    link.key = 'stylesheet-' + stylesheets[i]
+    link.rel = 'stylesheet'
+    link.media = 'print' // <-- 'print' is intentional; on load, it changes to 'all'.
+    link.onload = function (event) {
+      event.target.media = 'all'
+    }
+    currentScript.parentNode.insertBefore(link, currentScript)
+  }
+})()",
+        }
+      }
+      data-stylesheets=""
+    />
     <script
       dangerouslySetInnerHTML={
         Object {

packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Stylesheets.test.tsx.snap

@@ -13,10 +13,34 @@ Array [
     href="path/to/styles.css"
     rel="stylesheet"
   />,
-  <link
-    href="path/to/async.css"
-    media="print"
-    rel="stylesheet"
+  <noscript>
+    <link
+      href="path/to/async.css"
+      rel="stylesheet"
+    />
+  </noscript>,
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "(function loadAsyncStylesheets() {
+  var currentScript = document.scripts[document.scripts.length - 1]
+  var stylesheets = currentScript.getAttribute('data-stylesheets').split(',')
+
+  for (var i = 0, len = stylesheets.length; i < len; i++) {
+    var link = document.createElement('link')
+    link.href = stylesheets[i]
+    link.key = 'stylesheet-' + stylesheets[i]
+    link.rel = 'stylesheet'
+    link.media = 'print' // <-- 'print' is intentional; on load, it changes to 'all'.
+    link.onload = function (event) {
+      event.target.media = 'all'
+    }
+    currentScript.parentNode.insertBefore(link, currentScript)
+  }
+})()",
+      }
+    }
+    data-stylesheets="path/to/async.css"
   />,
 ]
 `;

packages/dotcom-ui-shell/src/components/StyleSheets.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import loadAsyncStylesheetsString from '../lib/loadAsyncStylesheets'
 
 export type TStylesheetProps = {
   stylesheets?: string[]
@@ -9,17 +10,22 @@ export type TStylesheetProps = {
 const Stylesheets = ({ stylesheets, criticalStyles, asyncStylesheets }: TStylesheetProps) => (
   <React.Fragment>
     {criticalStyles && <style dangerouslySetInnerHTML={{ __html: criticalStyles }} />}
+
     {Array.isArray(stylesheets) &&
       stylesheets.map((stylesheet, i) => <link rel="stylesheet" key={`stylesheet-${i}`} href={stylesheet} />)}
-    {/*
-      Load stylesheets asyncronously. See: 
-      https://www.filamentgroup.com/lab/load-css-simpler/
-      https://w3c.github.io/preload/#example-5
-    */}
-    {Array.isArray(asyncStylesheets) &&
-      asyncStylesheets.map((stylesheet, i) => (
-        <link rel="stylesheet" key={`async-stylesheet-${i}`} href={stylesheet} media="print" />
-      ))}
+
+    {Array.isArray(asyncStylesheets) && (
+      <React.Fragment>
+        <noscript>
+          {asyncStylesheets.map((stylesheet, i) => (
+            <link rel="stylesheet" href={stylesheet} key={`async-stylesheet-${i}`} />
+          ))}
+        </noscript>
+        <script
+          data-stylesheets={asyncStylesheets.join()}
+          dangerouslySetInnerHTML={{ __html: loadAsyncStylesheetsString }}></script>
+      </React.Fragment>
+    )}
   </React.Fragment>
 )
 

packages/dotcom-ui-shell/src/lib/loadAsyncStylesheets.js

@@ -0,0 +1,28 @@
+/*
+  Load stylesheets asyncronously. See: 
+   • https://www.filamentgroup.com/lab/load-css-simpler/
+   • https://w3c.github.io/preload/#example-5
+
+  @NOTE: This is in ES5 syntax, because it's not compiled, because it's server-side code. 
+  (You don't need to compile server-side code because you get to set whichever version of node you want.)
+  Its stringified and given to the client via "dangerouslySetInnerHTML" in a <script> tag.
+  Because it runs in the client, it needs to be ES5 so it's compatible with older browsers.
+*/
+function loadAsyncStylesheets() {
+  var currentScript = document.scripts[document.scripts.length - 1]
+  var stylesheets = currentScript.getAttribute('data-stylesheets').split(',')
+
+  for (var i = 0, len = stylesheets.length; i < len; i++) {
+    var link = document.createElement('link')
+    link.href = stylesheets[i]
+    link.key = 'stylesheet-' + stylesheets[i]
+    link.rel = 'stylesheet'
+    link.media = 'print' // <-- 'print' is intentional; on load, it changes to 'all'.
+    link.onload = function(event) {
+      event.target.media = 'all'
+    }
+    currentScript.parentNode.insertBefore(link, currentScript)
+  }
+}
+
+module.exports = '(' + loadAsyncStylesheets.toString() + ')()'