fix(theming): add custom theme support for external CSS

packages/base/src/InitialConfiguration.js

@@ -1,12 +1,14 @@
 import merge from "./thirdparty/merge.js";
 import { getFeature } from "./FeaturesRegistry.js";
 import { DEFAULT_THEME } from "./generated/AssetParameters.js";
+import validateThemeRoot from "./validateThemeRoot.js";
 
 let initialized = false;
 
 let initialConfig = {
 	animationMode: "full",
 	theme: DEFAULT_THEME,
+	themeRoot: null,
 	rtl: null,
 	language: null,
 	calendarType: null,
@@ -26,6 +28,11 @@ const getTheme = () => {
 	return initialConfig.theme;
 };
 
+const getThemeRoot = () => {
+	initConfiguration();
+	return initialConfig.themeRoot;
+};
+
 const getRTL = () => {
 	initConfiguration();
 	return initialConfig.rtl;
@@ -106,7 +113,13 @@ const parseURLParameters = () => {
 	});
 };
 
-const normalizeParamValue = (param, value) => {
+const normalizeThemeRootParamValue = value => {
+	const themeRoot = value.split("@")[1];
+
+	return validateThemeRoot(themeRoot);
+};
+
+const normalizeThemeParamValue = (param, value) => {
 	if (param === "theme" && value.includes("@")) { // the theme parameter might have @<URL-TO-THEME> in the value - strip this
 		return value.split("@")[0];
 	}
@@ -122,9 +135,15 @@ const applyURLParam = (key, value, paramType) => {
 		value = booleanMapping.get(lowerCaseValue);
 	}
 
-	value = normalizeParamValue(param, value);
+	if (param === "theme") {
+		initialConfig.theme = normalizeThemeParamValue(param, value);
 
-	initialConfig[param] = value;
+		if (value && value.includes("@")) {
+			initialConfig.themeRoot = normalizeThemeRootParamValue(value);
+		}
+	} else {
+		initialConfig[param] = value;
+	}
 };
 
 const applyOpenUI5Configuration = () => {
@@ -157,6 +176,7 @@ const initConfiguration = () => {
 export {
 	getAnimationMode,
 	getTheme,
+	getThemeRoot,
 	getRTL,
 	getLanguage,
 	getFetchDefaultLanguage,

packages/base/src/config/ThemeRoots.js

@@ -0,0 +1,39 @@
+import createLinkInHead from "../util/createLinkInHead.js";
+import validateThemeRoot from "../validateThemeRoot.js";
+import { getThemeRoot as getConfiguredThemeRoot } from "../InitialConfiguration.js";
+
+let themeRoot;
+
+const getThemeRoot = () => {
+	if (themeRoot === undefined) {
+		themeRoot = getConfiguredThemeRoot();
+	}
+
+	return themeRoot;
+};
+
+const setThemeRoot = (theme, newThemeRoot) => {
+	themeRoot = validateThemeRoot(newThemeRoot);
+
+	attachCustomThemeStylesToHead(theme);
+};
+
+const formatThemeLink = theme => {
+	return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`;
+};
+
+const attachCustomThemeStylesToHead = async theme => {
+	const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
+
+	if (link) {
+		document.head.removeChild(link);
+	}
+
+	await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+};
+
+export {
+	getThemeRoot,
+	setThemeRoot,
+	attachCustomThemeStylesToHead,
+};

packages/base/src/features/OpenUI5Support.js

@@ -41,6 +41,7 @@ const getConfigurationSettingsObject = () => {
 		animationMode: config.getAnimationMode(),
 		language: config.getLanguage(),
 		theme: config.getTheme(),
+		themeRoot: config.getThemeRoot(),
 		rtl: config.getRTL(),
 		calendarType: config.getCalendarType(),
 		formatSettings: {

packages/base/src/theming/applyTheme.js

@@ -3,6 +3,7 @@ import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
+import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoots.js";
 
 const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
@@ -40,7 +41,7 @@ const loadComponentPackages = async theme => {
 	});
 };
 
-const detectExternalTheme = () => {
+const detectExternalTheme = async theme => {
 	// If theme designer theme is detected, use this
 	const extTheme = getThemeDesignerTheme();
 	if (extTheme) {
@@ -56,11 +57,15 @@ const detectExternalTheme = () => {
 				themeName: OpenUI5Support.getConfigurationSettingsObject().theme, // just themeName, baseThemeName is only relevant for custom themes
 			};
 		}
+	} else if (getThemeRoot()) {
+		await attachCustomThemeStylesToHead(theme);
+
+		return getThemeDesignerTheme();
 	}
 };
 
 const applyTheme = async theme => {
-	const extTheme = detectExternalTheme();
+	const extTheme = await detectExternalTheme(theme);
 
 	// Only load theme_base properties if there is no externally loaded theme, or there is, but it is not being loaded
 	if (!extTheme || theme !== extTheme.themeName) {

packages/base/src/util/createLinkInHead.js

@@ -12,8 +12,13 @@ const createLinkInHead = (href, attributes = {}) => {
 	Object.entries(attributes).forEach(pair => link.setAttribute(...pair));
 
 	link.href = href;
+
 	document.head.appendChild(link);
-	return link;
+
+	return new Promise(resolve => {
+		link.addEventListener("load", resolve);
+		link.addEventListener("error", resolve);
+	});
 };
 
 export default createLinkInHead;

packages/base/src/validateThemeRoot.js

@@ -0,0 +1,58 @@
+const getMetaTagValue = metaTagName => {
+	const metaTag = document.querySelector(`META[name="${metaTagName}"]`),
+		metaTagContent = metaTag && metaTag.getAttribute("content");
+
+	return metaTagContent;
+};
+
+const validateThemeOrigin = origin => {
+	const allowedOrigins = getMetaTagValue("sap-allowedThemeOrigins");
+
+	return allowedOrigins && allowedOrigins.split(",").some(allowedOrigin => {
+		return allowedOrigin === "*" || origin === allowedOrigin.trim();
+	});
+};
+
+const buildCorrectUrl = (oldUrl, newOrigin) => {
+	const oldUrlPath = new URL(oldUrl).pathname;
+
+	return new URL(oldUrlPath, newOrigin).toString();
+};
+
+const validateThemeRoot = themeRoot => {
+	let themeRootURL,
+		resultUrl;
+
+	try {
+		themeRootURL = new URL(themeRoot);
+
+		const origin = themeRootURL.origin;
+
+		themeRootURL = themeRootURL.toString();
+
+		if (themeRootURL.startsWith(".") || themeRootURL.startsWith("/")) {
+			// Handle relative url
+			// new URL("/newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			// new URL("./newExmPath", "http://example.com/exmPath") => http://example.com/exmPath/newExmPath
+			// new URL("../newExmPath", "http://example.com/exmPath") => http://example.com/newExmPath
+			resultUrl = new URL(themeRootURL, window.location.href).toString();
+		} else if (origin && validateThemeOrigin(origin)) {
+			// If origin is allowed, use it
+			resultUrl = themeRootURL.toString();
+		} else {
+			// If origin is not allow and the URL is not relative, we have to replace the origin
+			// with current location
+			resultUrl = buildCorrectUrl(themeRootURL, window.location.href);
+		}
+
+		if (!resultUrl.endsWith("/")) {
+			resultUrl = `${resultUrl}/`;
+		}
+
+		return `${resultUrl}UI5/`;
+	} catch (e) {
+		// Catch if URL is not correct
+	}
+};
+
+export default validateThemeRoot;