Load CSS normally if javascript is disabled (#535)

* Add style tag for disabled javascript * Update tests with <noscript> css * lint
choojs · Dec 3, 2019 · 5cee0ca · 5cee0ca
1 parent 449c0b8
commit 5cee0ca
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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'))
     })
   })