From 1423ca31e3a1f10d6bd7432837f1e9cc72d582f0 Mon Sep 17 00:00:00 2001
From: Greg Hurrell <greg.hurrell@liferay.com>
Date: Fri, 28 Aug 2020 13:11:05 +0200
Subject: [PATCH] feat(css-loader): use preload when available (#631)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As described in the related ticket, the idea is to have the css-loader
emit:

    <link as="style" rel="preload" />

tags instead of:

    <link rel="stylesheet" />

ones.

As noted in:

    https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

> On top of that, preload **does not block the window’s `onload`
> event**, unless the resource is also requested by a resource that
> blocks that event.

In practice, we don't expect this to make page loads perceptibly faster,
but it should at least avoid Lighthouse reporting onload events as
delayed.

The `try`/`catch` is so that we can do feature detection for
the "preload" attribute and only use it on browsers that support it.
Without this, the `onload` event may not fire on IE which would lead to
breakage.

See: https://stackoverflow.com/questions/49136399/onload-on-link-element-event-doesnt-fire-on-ie11-preload-fallback-for-ie

Related: https://issues.liferay.com/browse/LPS-115876

Related: https://liferay-community.slack.com/archives/CB2QQ3M5F/p1598598237007500

Closes: https://github.com/liferay/liferay-js-toolkit/issues/631
---
 .../__snapshots__/index.test.js.snap          | 38 ++++++++++++++++++-
 .../src/index.js                              | 19 +++++++++-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/liferay-npm-bundler-loader-css-loader/src/__tests__/__snapshots__/index.test.js.snap b/packages/liferay-npm-bundler-loader-css-loader/src/__tests__/__snapshots__/index.test.js.snap
index 8aa074ed..eca3f9d7 100644
--- a/packages/liferay-npm-bundler-loader-css-loader/src/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/liferay-npm-bundler-loader-css-loader/src/__tests__/__snapshots__/index.test.js.snap
@@ -3,7 +3,24 @@
 exports[`java projects correctly generates JS module 1`] = `
 "
 var link = document.createElement(\\"link\\");
-link.setAttribute(\\"rel\\", \\"stylesheet\\");
+
+var preload;
+
+try {
+	preload = link.relList.supports(\\"preload\\");
+}
+catch (error) {
+	preload = false;
+}
+
+if (preload) {
+	link.setAttribute(\\"as\\", \\"style\\");
+	link.setAttribute(\\"rel\\", \\"preload\\");
+}
+else {
+	link.setAttribute(\\"rel\\", \\"stylesheet\\");
+}
+
 link.setAttribute(\\"type\\", \\"text/css\\");
 link.setAttribute(\\"href\\", Liferay.ThemeDisplay.getPathContext() + \\"/o/java-project/file.css\\");
 
@@ -32,7 +49,24 @@ module.exports = link;
 exports[`standard projects correctly generates JS module 1`] = `
 "
 var link = document.createElement(\\"link\\");
-link.setAttribute(\\"rel\\", \\"stylesheet\\");
+
+var preload;
+
+try {
+	preload = link.relList.supports(\\"preload\\");
+}
+catch (error) {
+	preload = false;
+}
+
+if (preload) {
+	link.setAttribute(\\"as\\", \\"style\\");
+	link.setAttribute(\\"rel\\", \\"preload\\");
+}
+else {
+	link.setAttribute(\\"rel\\", \\"stylesheet\\");
+}
+
 link.setAttribute(\\"type\\", \\"text/css\\");
 link.setAttribute(\\"href\\", Liferay.ThemeDisplay.getPathContext() + \\"/o/a-project/file.css\\");
 
diff --git a/packages/liferay-npm-bundler-loader-css-loader/src/index.js b/packages/liferay-npm-bundler-loader-css-loader/src/index.js
index b66bba8f..d528d189 100644
--- a/packages/liferay-npm-bundler-loader-css-loader/src/index.js
+++ b/packages/liferay-npm-bundler-loader-css-loader/src/index.js
@@ -29,7 +29,24 @@ export default function(
 	// returns both pathProxy and the context path of the portal's webapp.
 	context.extraArtifacts[`${filePath}.js.wrap-modules-amd.template`] = `
 var link = document.createElement("link");
-link.setAttribute("rel", "stylesheet");
+
+var preload;
+
+try {
+	preload = link.relList.supports("preload");
+}
+catch (error) {
+	preload = false;
+}
+
+if (preload) {
+	link.setAttribute("as", "style");
+	link.setAttribute("rel", "preload");
+}
+else {
+	link.setAttribute("rel", "stylesheet");
+}
+
 link.setAttribute("type", "text/css");
 link.setAttribute("href", Liferay.ThemeDisplay.getPathContext() + "${href}");