Merge pull request #632 from liferay/wincent/preload

feat(css-loader): use preload when available (#631)
liferay · Aug 28, 2020 · 2e78152 · 2e78152
2 parents 1872a89 + 1423ca3
commit 2e78152
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/...ages/liferay-npm-bundler-loader-css-loader/src/__tests__/__snapshots__/index.test.js.snap b/...ages/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
@@ -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}");