feat: link preload support (webpack-contrib#142)

Author: Andrii.Sas

src/index.js

@@ -107,6 +107,7 @@ class MiniCssExtractPlugin {
         filename: DEFAULT_FILENAME,
         moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
         ignoreOrder: false,
+        cssPreload: true,
       },
       options
     );
@@ -338,7 +339,7 @@ class MiniCssExtractPlugin {
                   Template.indent([
                     'var tag = existingLinkTags[i];',
                     'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");',
-                    'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();',
+                    'if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();',
                   ]),
                   '}',
                   'var existingStyleTags = document.getElementsByTagName("style");',
@@ -350,9 +351,46 @@ class MiniCssExtractPlugin {
                   ]),
                   '}',
                   'var linkTag = document.createElement("link");',
+                  this.options.cssPreload
+                    ? Template.asString([
+                        'var isPreloadSupported = (function() {',
+                        Template.indent([
+                          'try { return linkTag.relList.supports("preload"); }',
+                          'catch(e) { return false; }',
+                        ]),
+                        '}());',
+                        'if (isPreloadSupported) {',
+                        Template.indent([
+                          'linkTag.rel = "preload";',
+                          'linkTag.as = "style";',
+                          'linkTag.onload = function() {',
+                          Template.indent([
+                            'linkTag.rel = "stylesheet";',
+                            'linkTag.onload = null;',
+                            'resolve();',
+                          ]),
+                          '};',
+                        ]),
+                        '} else {',
+                        Template.indent([
+                          'linkTag.rel = "stylesheet";',
+                          'linkTag.type = "text/css";',
+                          'linkTag.media = "print";',
+                          'linkTag.onload = function() {',
+                          Template.indent([
+                            'linkTag.media = "all";',
+                            'linkTag.onload = null;',
+                            'resolve();',
+                          ]),
+                          '};',
+                        ]),
+                        '}',
+                      ])
+                    : Template.asString([
                   'linkTag.rel = "stylesheet";',
                   'linkTag.type = "text/css";',
                   'linkTag.onload = resolve;',
+                      ]),
                   'linkTag.onerror = function(event) {',
                   Template.indent([
                     'var request = event && event.target && event.target.src || fullhref;',

src/plugin-options.json

@@ -13,6 +13,9 @@
     },
     "ignoreOrder": {
       "type": "boolean"
+    },
+    "cssPreload": {
+      "type": "boolean"
     }
   }
 }

test/manual/index.html

@@ -51,6 +51,11 @@
     <p>An error should have appeared.</p>
     <p>Now if you turn the network back on and click it again, it should turn aqua.</p>
   </div>
+  <div class="test lazy-link-preload">
+    <p>Lazy CSS: Must be red.</p>
+    <p><button class="lazy-link-preload-button">Pressing this button</button> displays an alert with check for link preload</p>
+    <p>After click on alert should turn green.</p>
+  </div>
   <div class="test preloaded-css1">
     <p>Preloaded CSS: Must be green.</p>
     <p><button class="preloaded-button1">Pressing this button</button> displays an alert and should turn red.</p>

test/manual/src/index.js

@@ -45,6 +45,23 @@ const makeButton = (className, fn, shouldDisable = true) => {
 makeButton('.lazy-button', () => import('./lazy.js'));
 makeButton('.lazy-button2', () => import('./lazy2.css'));
 
+makeButton('.lazy-link-preload-button', () => {
+  const promise = import('./lazy-link-preload.css');
+  const linkElement = Array.from(document.head.children)
+    .slice(-2)
+    .find((el) => {
+      return el.tagName === 'LINK';
+    });
+
+  alert(
+    `Is css preloaded by <link rel="preload"/>? - ${
+      linkElement.getAttribute('rel') === 'preload' ? 'yes' : 'no'
+    }`
+  );
+
+  return promise;
+});
+
 makeButton('.preloaded-button1', () =>
   import(/* webpackChunkName: "preloaded1" */ './preloaded1')
 );

test/manual/src/lazy-link-preload.css

@@ -0,0 +1,3 @@
+.lazy-link-preload {
+  background: lightgreen;
+}