@ui5/webcomponents-base 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/dist/test-resources/specs/UI5ElementInvalidation.js

@@ -1,11 +1,13 @@
 const assert = require("chai").assert;
 
 describe("Invalidation works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that changing a property invalidates", () => {
+	it("Tests that changing a property invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 
@@ -21,15 +23,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidations);
+			done(invalidations);
 		});
 
 		assert.strictEqual(res, 2, "Invalidated 2 times");
 	});
 
-	it("Tests that setting a property to the same value does not invalidate", () => {
+	it("Tests that setting a property to the same value does not invalidate", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const text = "some value";
 
 			const el = document.getElementById("gen");
@@ -46,15 +48,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidations);
+			done(invalidations);
 		});
 
 		assert.strictEqual(res, 0, "Not invalidated");
 	});
 
-	it("Tests that setting a property of type Object always invalidates", () => {
+	it("Tests that setting a property of type Object always invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const obj = {};
 			const otherObj = {};
 
@@ -72,15 +74,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidations);
+			done(invalidations);
 		});
 
 		assert.strictEqual(res, 1, "Invalidated");
 	});
 
-	it("Tests that setting an array property always invalidates", () => {
+	it("Tests that setting an array property always invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const arr = [];
 			const otherArr = [];
 
@@ -98,15 +100,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidations);
+			done(invalidations);
 		});
 
 		assert.strictEqual(res, 1, "Invalidated");
 	});
 
-	it("Tests that adding a child invalidates", () => {
+	it("Tests that adding a child invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 
@@ -122,15 +124,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidated);
+			done(invalidated);
 		});
 
 		assert.strictEqual(res, true, "Invalidated");
 	});
 
-	it("Tests that removing a child invalidates", () => {
+	it("Tests that removing a child invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 			const div = document.createElement("div");
@@ -148,15 +150,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidated);
+			done(invalidated);
 		});
 
 		assert.strictEqual(res, true, "Invalidated");
 	});
 
-	it("Tests that modifying textContent invalidates", () => {
+	it("Tests that modifying textContent invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 			el.textContent = "test";
@@ -173,15 +175,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidated);
+			done(invalidated);
 		});
 
 		assert.strictEqual(res, true, "Invalidated");
 	});
 
-	it("Tests that modifying nodeValue invalidates", () => {
+	it("Tests that modifying nodeValue invalidates", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 			el.textContent = "test";
@@ -198,15 +200,15 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(invalidated);
+			done(invalidated);
 		});
 
 		assert.strictEqual(res, true, "Invalidated");
 	});
 
-	it("Tests that multiple invalidations result in a single rendering", () => {
+	it("Tests that multiple invalidations result in a single rendering", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 
 			const el = document.getElementById("gen");
 
@@ -230,7 +232,7 @@ describe("Invalidation works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(operations);
+			done(operations);
 		});
 
 		assert.strictEqual(res.invalidation, 2, "Invalidated 2 times");

package/dist/test-resources/specs/UI5ElementLifecycle.js

@@ -1,11 +1,13 @@
 const assert = require("chai").assert;
 
 describe("Lifecycle works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests element creation callbacks", () => {
+	it("Tests element creation callbacks", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const creationCallbacks = ["onBeforeRendering", "onAfterRendering", "onEnterDOM"];
 			const calledCallbacks = [];
 
@@ -22,7 +24,7 @@ describe("Lifecycle works", () => {
 			document.body.appendChild(el);
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(calledCallbacks);
+			done(calledCallbacks);
 		});
 
 		assert.strictEqual(res.length, 3, "All 3 callbacks called");
@@ -31,9 +33,9 @@ describe("Lifecycle works", () => {
 		assert.strictEqual(res[2], "onEnterDOM", "onEnterDOM called third");
 	});
 
-	it("Tests element invalidation callbacks", () => {
+	it("Tests element invalidation callbacks", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const invalidationCallbacks = ["onBeforeRendering", "onAfterRendering"];
 			const calledCallbacks = [];
 
@@ -54,7 +56,7 @@ describe("Lifecycle works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(calledCallbacks);
+			done(calledCallbacks);
 		});
 
 		assert.strictEqual(res.length, 2, "All 2 callbacks called");
@@ -62,9 +64,9 @@ describe("Lifecycle works", () => {
 		assert.strictEqual(res[1], "onAfterRendering", "onAfterRendering called second");
 	});
 
-	it("Tests element destruction callback", () => {
+	it("Tests element destruction callback", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const destructionCallbacks = ["onExitDOM"];
 			const calledCallbacks = [];
 
@@ -86,7 +88,7 @@ describe("Lifecycle works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(calledCallbacks);
+			done(calledCallbacks);
 		});
 
 		assert.strictEqual(res.length, 1, "Only 1 callback was called");

package/dist/test-resources/specs/UI5ElementListenForChildPropChanges.spec.js

@@ -1,11 +1,13 @@
 const assert = require("chai").assert;
 
 describe("Metadata slot invalidateOnChildChange works", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that changing a monitored property of a child invalidates the parent", () => {
+	it("Tests that changing a monitored property of a child invalidates the parent", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const parent = document.getElementById("parent");
 			const child = document.getElementById("child1");
 
@@ -19,15 +21,15 @@ describe("Metadata slot invalidateOnChildChange works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(parentInvalidated);
+			done(parentInvalidated);
 		});
 
 		assert.strictEqual(res, true, "Parent invalidated");
 	});
 
-	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
+	it("Tests that changing a non-monitored property of a child does not invalidate the parent", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const parent = document.getElementById("parent");
 			const child = document.getElementById("child1");
 
@@ -41,15 +43,15 @@ describe("Metadata slot invalidateOnChildChange works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(parentInvalidated);
+			done(parentInvalidated);
 		});
 
 		assert.strictEqual(res, false, "Parent not invalidated");
 	});
 
-	it("Tests that listening for all properties works", () => {
+	it("Tests that listening for all properties works", async () => {
 
-		const res = browser.executeAsync( async (done) => {
+		const res = await browser.executeAsync( async (done) => {
 			const parent = document.getElementById("parent");
 			const child = document.getElementById("child2");
 
@@ -65,7 +67,7 @@ describe("Metadata slot invalidateOnChildChange works", () => {
 
 			await window["sap-ui-webcomponents-bundle"].renderFinished();
 
-			return done(parentInvalidatedCount);
+			done(parentInvalidatedCount);
 		});
 
 		assert.strictEqual(res, 3, "Parent invalidated 3 times");

package/dist/test-resources/specs/UI5ElementMetadataExt.js

@@ -1,11 +1,13 @@
 const assert = require("chai").assert;
 
 describe("Metadata can be extended", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("When extending metadata, both own and extended entities exist in the resulting metadata", () => {
+	it("When extending metadata, both own and extended entities exist in the resulting metadata", async () => {
 
-		const res = browser.execute( () => {
+		const res = await browser.executeAsync(done => {
 
 			const el = document.getElementById("genExt");
 			const m = el.constructor.getMetadata();
@@ -15,15 +17,15 @@ describe("Metadata can be extended", () => {
 				!!m.getSlots().default &&
 				!!m.getSlots().extSlot;
 
-			return ok;
+			done(ok);
 		});
 
 		assert.strictEqual(res, true, "Metadata properly extended");
 	});
 
-	it("When extending metadata, property defaultValue can be modified", () => {
+	it("When extending metadata, property defaultValue can be modified", async () => {
 
-		const res = browser.execute( () => {
+		const res = await browser.executeAsync(done => {
 
 			const el = document.getElementById("genExt");
 			const m = el.constructor.getMetadata();
@@ -31,7 +33,7 @@ describe("Metadata can be extended", () => {
 			const ok = !!m.getProperties().strProp &&
 				m.getProperties().strProp.defaultValue === "Ext";
 
-			return ok;
+			done(ok);
 		});
 
 		assert.strictEqual(res, true, "Property defaultValue changed");

package/dist/test-resources/specs/UI5ElementPropertyValidation.js

@@ -1,12 +1,14 @@
 const assert = require("chai").assert;
 
 describe("Properties can only have values, restricted to their types", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("String property enforced to string", () => {
-		const el = browser.$("#gen");
-		el.setProperty("strProp", 5);
-		assert.strictEqual(el.getProperty("strProp"), "5", "String property is string");
+	it("String property enforced to string", async () => {
+		const el = await browser.$("#gen");
+		await el.setProperty("strProp", 5);
+		assert.strictEqual(await el.getProperty("strProp"), "5", "String property is string");
 	});
 
 });

package/dist/test-resources/specs/UI5ElementPropsAndAttrs.spec.js

@@ -1,65 +1,67 @@
 const assert = require("chai").assert;
 
 describe("Properties and attributes convert to each other", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that properties with default values are initialized with the default value", () => {
-		const el = browser.$("#gen");
+	it("Tests that properties with default values are initialized with the default value", async () => {
+		const el = await browser.$("#gen");
 
-		assert.strictEqual(el.getProperty("defaultValueProp"), "Hello", "defaultValueProp is properly initialized");
+		assert.strictEqual(await el.getProperty("defaultValueProp"), "Hello", "defaultValueProp is properly initialized");
 	});
 
-	it("Tests that prop-attr conversion works for string properties", () => {
-		const el = browser.$("#gen");
+	it("Tests that prop-attr conversion works for string properties", async () => {
+		const el = await browser.$("#gen");
 
-		el.setProperty("strProp", "test1");
-		assert.strictEqual(el.getAttribute("str-prop"), "test1", "Attribute affected by property change");
+		await el.setProperty("strProp", "test1");
+		assert.strictEqual(await el.getAttribute("str-prop"), "test1", "Attribute affected by property change");
 
-		el.setAttribute("str-prop", "test2");
-		assert.strictEqual(el.getProperty("strProp"), "test2", "Property affected by attribute change");
+		await el.setAttribute("str-prop", "test2");
+		assert.strictEqual(await el.getProperty("strProp"), "test2", "Property affected by attribute change");
 	});
 
-	it("Tests that prop-attr conversion works for boolean properties", () => {
-		const el = browser.$("#gen");
+	it("Tests that prop-attr conversion works for boolean properties", async () => {
+		const el = await browser.$("#gen");
 
-		el.setProperty("boolProp", true);
-		assert.strictEqual(el.getAttribute("bool-prop"), "", "Attribute affected by property change");
+		await el.setProperty("boolProp", true);
+		assert.strictEqual(await el.getAttribute("bool-prop"), "", "Attribute affected by property change");
 
-		el.setProperty("boolProp", false);
-		assert.strictEqual(el.getAttribute("bool-prop"), null, "Attribute affected by property change");
+		await el.setProperty("boolProp", false);
+		assert.strictEqual(await el.getAttribute("bool-prop"), null, "Attribute affected by property change");
 
-		el.setAttribute("bool-prop", "");
-		assert.strictEqual(el.getProperty("boolProp"), true, "Property affected by attribute change");
+		await el.setAttribute("bool-prop", "");
+		assert.strictEqual(await el.getProperty("boolProp"), true, "Property affected by attribute change");
 
-		el.removeAttribute("bool-prop");
-		assert.strictEqual(el.getProperty("boolProp"), false, "Property affected by attribute change");
+		await el.removeAttribute("bool-prop");
+		assert.strictEqual(await el.getProperty("boolProp"), false, "Property affected by attribute change");
 	});
 
-	it("Tests that object properties have no attributes", () => {
-		const el = browser.$("#gen");
+	it("Tests that object properties have no attributes", async () => {
+		const el = await browser.$("#gen");
 
-		el.setProperty("objectProp", {});
-		assert.strictEqual(el.getAttribute("object-prop"), null, "Attribute not there");
+		await el.setProperty("objectProp", {});
+		assert.strictEqual(await el.getAttribute("object-prop"), null, "Attribute not there");
 	});
 
-	it("Tests that array properties have no attributes", () => {
-		const el = browser.$("#gen");
+	it("Tests that array properties have no attributes", async () => {
+		const el = await browser.$("#gen");
 
-		el.setProperty("multiProp", ["a", "b"]);
-		assert.strictEqual(el.getAttribute("multi-prop"), null, "Attribute not there");
+		await el.setProperty("multiProp", ["a", "b"]);
+		assert.strictEqual(await el.getAttribute("multi-prop"), null, "Attribute not there");
 	});
 
-	it("Tests that noAttribute properties have no attributes", () => {
-		const el = browser.$("#gen");
+	it("Tests that noAttribute properties have no attributes", async () => {
+		const el = await browser.$("#gen");
 
-		el.setProperty("noAttributeProp", "some value");
-		assert.strictEqual(el.getAttribute("no-attribute-prop"), null, "Attribute not there");
+		await el.setProperty("noAttributeProp", "some value");
+		assert.strictEqual(await el.getAttribute("no-attribute-prop"), null, "Attribute not there");
 	});
 
-	it("Tests that properties with default values do not automatically set attributes", () => {
-		const el = browser.$("#gen");
+	it("Tests that properties with default values do not automatically set attributes", async () => {
+		const el = await browser.$("#gen");
 
-		assert.strictEqual(el.getAttribute("default-value-prop"), null, "Attribute not there for defaultValueProp");
+		assert.strictEqual(await el.getAttribute("default-value-prop"), null, "Attribute not there for defaultValueProp");
 	});
 
 });

package/dist/test-resources/specs/UI5ElementShadowDOM.js

@@ -1,20 +1,22 @@
 const assert = require("chai").assert;
 
 describe("The framework can define web components", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that element's Shadow DOM is rendered if it has a template", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("gen").shadowRoot;
+	it("Tests that element's Shadow DOM is rendered if it has a template", async () => {
+		const res = await browser.executeAsync(done => {
+			done(document.getElementById("gen").shadowRoot);
 		});
 
 		assert.strictEqual(!!res, true, "Shadow root created");
-		assert.strictEqual(browser.$("#gen").shadow$("div>p").isExisting(), true, "Shadow root content created");
+		assert.strictEqual(await browser.$("#gen").shadow$("div>p").isExisting(), true, "Shadow root content created");
 	});
 
-	it("Tests that element's Shadow DOM is not rendered if it has no template", () => {
-		const res = browser.execute(() => {
-			return document.getElementById("noShadow").shadowRoot;
+	it("Tests that element's Shadow DOM is not rendered if it has no template", async () => {
+		const res = await browser.executeAsync(done => {
+			done(document.getElementById("noShadow").shadowRoot);
 		});
 
 		assert.strictEqual(!!res, false, "Shadow root not created");

package/dist/test-resources/specs/UI5ElementSlots.js

@@ -1,10 +1,12 @@
 const assert = require("chai").assert;
 
 describe("Slots work properly", () => {
-	browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	before(async () => {
+		await browser.url("http://localhost:9191/test-resources/pages/AllTestElements.html");
+	});
 
-	it("Tests that properties exist on the element for each slot", () => {
-		const res = browser.execute(() => {
+	it("Tests that properties exist on the element for each slot", async () => {
+		const res = await browser.executeAsync(done => {
 			const expectedValues = {};
 
 			const el = document.getElementById("withContent");
@@ -15,7 +17,7 @@ describe("Slots work properly", () => {
 			expectedValues.items = el.items.length === 2;
 			expectedValues.named = el.named === undefined;
 
-			return expectedValues;
+			done(expectedValues);
 		});
 
 		assert.strictEqual(res.default, true, "There are elements in the default property");
@@ -25,10 +27,10 @@ describe("Slots work properly", () => {
 		assert.strictEqual(res.named, true, "There is no named property as propertyName changed it to items");
 	});
 
-	it("Tests that individualSlots modifies the slot property of slotted children", () => {
-		assert.strictEqual(browser.$$("#withContent>[slot=individual]").length, 0, "There are no children with slot=individual");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-1]").length, 1, "The slot of the first child became individual-1");
-		assert.strictEqual(browser.$$("#withContent>[slot=individual-2]").length, 1, "The slot of the second child became individual-2");
+	it("Tests that individualSlots modifies the slot property of slotted children", async () => {
+		assert.strictEqual((await browser.$$("#withContent>[slot=individual]")).length, 0, "There are no children with slot=individual");
+		assert.strictEqual((await browser.$$("#withContent>[slot=individual-1]")).length, 1, "The slot of the first child became individual-1");
+		assert.strictEqual((await browser.$$("#withContent>[slot=individual-2]")).length, 1, "The slot of the second child became individual-2");
 	});
 
 });

package/dist/theming/CustomStyle.js

@@ -1,7 +1,8 @@
 import { reRenderAllUI5Elements } from "../Render.js";
+import getSharedResource from "../getSharedResource.js";
 import EventProvider from "../EventProvider.js";
 
-const eventProvider = new EventProvider();
+const eventProvider = getSharedResource("CustomStyle.eventProvider", new EventProvider());
 const CUSTOM_CSS_CHANGE = "CustomCSSChange";
 
 const attachCustomCSSChange = listener => {
@@ -16,14 +17,33 @@ const fireCustomCSSChange = tag => {
 	return eventProvider.fireEvent(CUSTOM_CSS_CHANGE, tag);
 };
 
-const customCSSFor = {};
+const customCSSFor = getSharedResource("CustomStyle.customCSSFor", {});
+
+// Listen to the eventProvider, in case other copies of this CustomStyle module fire this
+// event, and this copy would therefore need to reRender the ui5 webcomponents; but
+// don't reRender if it was this copy that fired the event to begin with.
+let skipRerender;
+attachCustomCSSChange(tag => {
+	if (!skipRerender) {
+		reRenderAllUI5Elements({ tag });
+	}
+});
 
 const addCustomCSS = (tag, css) => {
 	if (!customCSSFor[tag]) {
 		customCSSFor[tag] = [];
 	}
 	customCSSFor[tag].push(css);
-	fireCustomCSSChange(tag);
+
+	skipRerender = true;
+	try {
+		// The event is fired and the attached event listeners are all called synchronously
+		// The skipRerender flag will be used to avoid calling reRenderAllUI5Elements twice when it is this copy
+		// of CustomStyle.js which is firing the `CustomCSSChange` event.
+		fireCustomCSSChange(tag);
+	} finally {
+		skipRerender = false;
+	}
 
 	return reRenderAllUI5Elements({ tag });
 };

package/dist/theming/applyTheme.js

@@ -1,10 +1,10 @@
 import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
-import createThemePropertiesStyleTag from "./createThemePropertiesStyleTag.js";
+import { removeStyle, createOrUpdateStyle } from "../ManagedStyles.js";
 import getThemeDesignerTheme from "./getThemeDesignerTheme.js";
 import { fireThemeLoaded } from "./ThemeLoaded.js";
 import { getFeature } from "../FeaturesRegistry.js";
 
-const BASE_THEME_PACKAGE = "@ui5/webcomponents-theme-base";
+const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming";
 
 const isThemeBaseRegistered = () => {
 	const registeredPackages = getRegisteredPackages();
@@ -16,15 +16,14 @@ const loadThemeBase = async theme => {
 		return;
 	}
 
-	const cssText = await getThemeProperties(BASE_THEME_PACKAGE, theme);
-	createThemePropertiesStyleTag(cssText, BASE_THEME_PACKAGE);
+	const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme);
+	if (cssData) {
+		createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+	}
 };
 
 const deleteThemeBase = () => {
-	const styleElement = document.head.querySelector(`style[data-ui5-theme-properties="${BASE_THEME_PACKAGE}"]`);
-	if (styleElement) {
-		styleElement.parentElement.removeChild(styleElement);
-	}
+	removeStyle("data-ui5-theme-properties", BASE_THEME_PACKAGE);
 };
 
 const loadComponentPackages = async theme => {
@@ -34,8 +33,10 @@ const loadComponentPackages = async theme => {
 			return;
 		}
 
-		const cssText = await getThemeProperties(packageName, theme);
-		createThemePropertiesStyleTag(cssText, packageName);
+		const cssData = await getThemeProperties(packageName, theme);
+		if (cssData) {
+			createOrUpdateStyle(cssData, "data-ui5-theme-properties", packageName);
+		}
 	});
 };