From 5cee0caac4f6667de12428b5b466ca8f6a817d81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Tue, 3 Dec 2019 12:20:21 +0100
Subject: [PATCH] Load CSS normally if javascript is disabled (#535)

* Add style tag for disabled javascript

* Update tests with <noscript> css

* lint
---
 lib/graph-document.js | 5 ++++-
 test/document.js      | 9 ++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/lib/graph-document.js b/lib/graph-document.js
index 9bbf7cb4..3635483d 100644
--- a/lib/graph-document.js
+++ b/lib/graph-document.js
@@ -182,7 +182,10 @@ function dynamicScriptsTag (opts) {
 function styleTag (opts) {
   var hex = opts.hash.toString('hex').slice(0, 16)
   var link = `${opts.base || ''}/${hex}/bundle.css`
-  return `<link rel="preload" as="style" href="${link}" onload="this.rel='stylesheet'">`
+  return `
+    <link rel="preload" as="style" href="${link}" onload="this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="${link}"></noscript>
+  `.replace(/\n +/g, '')
 }
 
 function loadFontsTag (opts) {
diff --git a/test/document.js b/test/document.js
index 739efeed..dcb66c7f 100644
--- a/test/document.js
+++ b/test/document.js
@@ -22,6 +22,7 @@ tape('renders some HTML', function (assert) {
         <meta name="theme-color" content=#fff>
         <title></title>
         <link rel="preload" as="style" href="/__STYLE_HASH__/bundle.css" onload="this.rel='stylesheet'">
+        <noscript><link rel="stylesheet" href="/__STYLE_HASH__/bundle.css"></noscript>
       </head>
       <body></body>
     </html>
@@ -60,7 +61,7 @@ tape('renders some HTML', function (assert) {
 
     compiler.styles('bundle.css', function (err, res) {
       assert.ifError(err, 'no err bundling style')
-      expected = expected.replace('__STYLE_HASH__', res.hash.toString('hex').slice(0, 16))
+      expected = expected.replace(/__STYLE_HASH__/g, res.hash.toString('hex').slice(0, 16))
       expected = expected.replace('__STYLE_INTEGRITY__', res.hash.toString('base64'))
     })
   })
@@ -81,6 +82,7 @@ tape('server render choo apps', function (assert) {
         <meta name="theme-color" content=#fff>
         <title></title>
         <link rel="preload" as="style" href="/__STYLE_HASH__/bundle.css" onload="this.rel='stylesheet'">
+        <noscript><link rel="stylesheet" href="/__STYLE_HASH__/bundle.css"></noscript>
       </head>
       <body>
         meow
@@ -133,7 +135,7 @@ tape('server render choo apps', function (assert) {
     compiler.styles('bundle.css', function (err, res) {
       assert.ifError(err, 'no err bundling style')
       assert.ifError(err)
-      expected = expected.replace('__STYLE_HASH__', res.hash.toString('hex').slice(0, 16))
+      expected = expected.replace(/__STYLE_HASH__/g, res.hash.toString('hex').slice(0, 16))
       expected = expected.replace('__STYLE_INTEGRITY__', res.hash.toString('base64'))
     })
   })
@@ -154,6 +156,7 @@ tape('server render choo apps with root set', function (assert) {
         <meta name="theme-color" content=#fff>
         <title></title>
         <link rel="preload" as="style" href="some-custom-root/__STYLE_HASH__/bundle.css" onload="this.rel='stylesheet'">
+        <noscript><link rel="stylesheet" href="some-custom-root/__STYLE_HASH__/bundle.css"></noscript>
       </head>
       <body>
         meow
@@ -206,7 +209,7 @@ tape('server render choo apps with root set', function (assert) {
     compiler.styles('bundle.css', function (err, res) {
       assert.ifError(err, 'no err bundling style')
       assert.ifError(err)
-      expected = expected.replace('__STYLE_HASH__', res.hash.toString('hex').slice(0, 16))
+      expected = expected.replace(/__STYLE_HASH__/g, res.hash.toString('hex').slice(0, 16))
       expected = expected.replace('__STYLE_INTEGRITY__', res.hash.toString('base64'))
     })
   })
