Merge pull request #94 from Munter/fix/fallbackCssWithCanonical

Don't refer to the fallback CSS with an absolute url when inside the canonical root
Munter · Jun 5, 2020 · 59d8649 · 59d8649
2 parents b8b94fe + 741da31
commit 59d8649
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js
@@ -227,7 +227,10 @@ function asyncLoadStyleRelationWithFallback(htmlAsset, originalRelation) {
         text: `
           (function () {
             var el = document.createElement('link');
-            el.href = '${originalRelation.to.url}'.toString('url');
+            el.href = '${htmlAsset.assetGraph.buildRootRelativeUrl(
+              originalRelation.to.url,
+              htmlAsset.url
+            )}'.toString('url');
             el.rel = 'stylesheet';
             ${
               originalRelation.media
@@ -242,8 +245,6 @@ function asyncLoadStyleRelationWithFallback(htmlAsset, originalRelation) {
     'lastInBody'
   );
 
-  asyncCssLoadingRelation.to.outgoingRelations[0].hrefType = 'rootRelative';
-
   // Insert <noscript> fallback sync CSS loading
   const noScriptFallbackRelation = htmlAsset.addRelation(
     {

diff --git a/test/subfont.js b/test/subfont.js
@@ -407,6 +407,62 @@ describe('subfont', function () {
     });
   });
 
+  describe('with a canonical root and loading the page from a remote server', function () {
+    // Regression test for https://gitter.im/assetgraph/assetgraph?at=5ece5da89da05a060a3417fc
+    it('should refer to the fallback CSS with a root-relative url', async function () {
+      httpception([
+        {
+          request: 'GET https://www.netlify.com/index.html',
+          response: {
+            headers: {
+              'Content-Type': 'text/html',
+            },
+            body: `<!DOCTYPE html>
+            <html>
+              <head>
+                <style>
+                  @font-face{font-family: Open Sans; src:url(OpenSans.woff) format("woff")}
+                </style>
+              </head>
+              <body>
+                <div style="font-family: Open Sans">Hello</div>
+              </body>
+            </html>
+          `,
+          },
+        },
+        {
+          request: 'GET https://www.netlify.com/OpenSans.woff',
+          response: {
+            headers: {
+              'Content-Type': 'font/woff',
+            },
+            body: openSansBold,
+          },
+        },
+      ]);
+
+      const assetGraph = await subfont(
+        {
+          silent: true,
+          dryRun: true,
+          debug: true,
+          canonicalRoot: 'https://www.netlify.com/',
+          inputFiles: ['https://www.netlify.com/index.html'],
+        },
+        mockConsole
+      );
+      const [, asyncLoadJavaScriptAsset] = assetGraph.findAssets({
+        type: 'JavaScript',
+      });
+      expect(
+        asyncLoadJavaScriptAsset.text,
+        'to contain',
+        `el.href='/subfont/fallback-`
+      );
+    });
+  });
+
   describe('without fonttools available', function () {
     const subfontWithoutFontTools = proxyquire('../lib/subfont', {
       '../lib/subsetFonts': proxyquire('../lib/subsetFonts', {