Dynamically Load CSS files

loadStyles.js

let hasPreload = false;
try {
	hasPreload = document.createElement("link").relList.supports("preload");
} catch(err) {}

const hasStyle = href => [...document.styleSheets].some(ss => href === ss.href);

const defaults = {
	media: 'all',
	crossorigin: undefined,
	component: document.body
};

/**
 * Async loading of stylesheets
 * @param {string} href
 * @param {object} settings - Set media type, crossorigin and or element that is the stylesheets intended target. See defaults object for default settings.
 * @returns {Promise}
 */
const loadStyles = (href, settings) => {

	if (!href) return new Promise.reject('No stylesheet reference available');
	
	let preload;
	const opts = Object.assign({}, defaults, settings);
	
	if (hasPreload) {
		preload = document.createElement("link");
		preload.href = href;
		if (hasStyle(preload.href)) return new Promise.resolve('Stylesheet is already loaded.');
		preload.as = 'style';
		preload.rel = 'preload';
		if (opts.crossorigin) preload.crossorigin = opts.crossorigin;
		document.head.appendChild(preload);
	}

	const css = document.createElement("link");
	css.href = href;
	css.media = opts.media;
	css.rel = 'stylesheet';

	return new Promise((resolve, reject) => {

		css.onload = resolve;
		css.onerror = reject;

		if (hasPreload) {
			preload.onload = () => document.head.appendChild(css);
			preload.onerror = reject;
		} else {
			opts.component === document.body
				? opts.component.appendChild(css)
				: opts.component.parentNode.insertBefore(css, opts.component);
		}
	});
};

export { loadStyles as default, hasPreload }