feat: adds static method styles to base class

packages/base/src/Theming.js

@@ -1,5 +1,4 @@
 import { getTheme, _setTheme } from "./Configuration.js";
-import { getStyles } from "./theming/ThemeBundle.js";
 import { getCustomCSS } from "./theming/CustomStyle.js";
 import { getThemeProperties } from "./theming/ThemeProperties.js";
 import { injectThemeProperties } from "./theming/StyleInjection.js";
@@ -43,21 +42,14 @@ const setTheme = async theme => {
 
 const getEffectiveStyle = ElementClass => {
 	const theme = getTheme();
-	const styleUrls = ElementClass.getMetadata().getStyleUrl();
 	const tag = ElementClass.getMetadata().getTag();
-	const styles = getStyles(theme, styleUrls);
-	const cssContent = [];
-	styles.forEach(css => {
-		cssContent.push(css);
-	});
+	const customStyle = getCustomCSS(theme, tag) || "";
+	let componentStyles = ElementClass.styles;
 
-	const customStyle = getCustomCSS(theme, tag);
-	if (customStyle) {
-		cssContent.push(customStyle);
+	if (Array.isArray(componentStyles)) {
+		componentStyles = componentStyles.join(" ");
 	}
-
-	const cssText = cssContent.join(" ");
-	return cssText;
+	return `${componentStyles} ${customStyle}`;
 };
 
 export {

packages/base/src/WebComponent.js

@@ -261,6 +261,9 @@ class WebComponent extends HTMLElement {
 		return metadata;
 	}
 
+	static get styles() {
+		return "";
+	}
 
 	_initializeState() {
 		const StateClass = this.constructor.StateClass;

packages/base/src/WebComponentMetadata.js

@@ -14,10 +14,6 @@ class WebComponentMetadata {
 		return this.metadata.noShadowDOM;
 	}
 
-	getStyleUrl() {
-		return this.metadata.styleUrl || [];
-	}
-
 	usesNodeText() {
 		return !!this.metadata.usesNodeText;
 	}

packages/main/src/Button.js

@@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 
 import ButtonTemplateContext from "./ButtonTemplateContext.js";
 import ButtonType from "./types/ButtonType.js";
@@ -12,18 +11,11 @@ import Icon from "./Icon.js";
 // Styles
 import buttonCss from "./themes/Button.css.js";
 
-addCustomCSS("ui5-button", "sap_fiori_3", buttonCss);
-addCustomCSS("ui5-button", "sap_belize", buttonCss);
-addCustomCSS("ui5-button", "sap_belize_hcb", buttonCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-button",
-	styleUrl: [
-		"Button.css",
-	],
 	usesNodeText: true,
 	properties: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
@@ -152,6 +144,10 @@ class Button extends WebComponent {
 		return metadata;
 	}
 
+	static get styles() {
+		return buttonCss;
+	}
+
 	static get renderer() {
 		return ButtonRenderer;
 	}

packages/main/src/Calendar.js

@@ -1,7 +1,6 @@
 import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
 import "@ui5/webcomponents-base/src/shims/Core-shim.js";
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
@@ -25,18 +24,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
 // Styles
 import calendarCSS from "./themes/Calendar.css.js";
 
-addCustomCSS("ui5-calendar", "sap_fiori_3", calendarCSS);
-addCustomCSS("ui5-calendar", "sap_belize_hcb", calendarCSS);
-addCustomCSS("ui5-calendar", "sap_belize", calendarCSS);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-calendar",
-	styleUrl: [
-		"Calendar.css",
-	],
 	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -124,6 +116,10 @@ class Calendar extends WebComponent {
 		return CalendarRenderer;
 	}
 
+	static get styles() {
+		return calendarCSS;
+	}
+
 	constructor() {
 		super();
 		this._oLocale = getFormatLocale();

packages/main/src/CalendarHeader.js

@@ -1,7 +1,6 @@
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import CalendarHeaderTemplateContext from "./CalendarHeaderTemplateContext.js";
 import Button from "./Button.js";
 import ButtonType from "./types/ButtonType.js";
@@ -10,15 +9,8 @@ import CalendarHeaderRenderer from "./build/compiled/CalendarHeaderRenderer.lit.
 // Styles
 import styles from "./themes/CalendarHeader.css.js";
 
-addCustomCSS("ui5-calendar-header", "sap_belize", styles);
-addCustomCSS("ui5-calendar-header", "sap_belize_hcb", styles);
-addCustomCSS("ui5-calendar-header", "sap_fiori_3", styles);
-
 const metadata = {
 	tag: "ui5-calendar-header",
-	styleUrl: [
-		"CalendarHeader.css",
-	],
 	properties: {
 		monthText: {
 			type: String,
@@ -56,6 +48,10 @@ class CalendarHeader extends WebComponent {
 		return CalendarHeaderRenderer;
 	}
 
+	static get styles() {
+		return styles;
+	}
+
 	constructor() {
 		super();
 		this._btnPrev = {};

packages/main/src/Card.js

@@ -1,7 +1,6 @@
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
 import URI from "@ui5/webcomponents-base/src/types/URI.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import { isIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import Function from "@ui5/webcomponents-base/src/types/Function.js";
@@ -11,18 +10,11 @@ import Icon from "./Icon.js";
 // Styles
 import cardCss from "./themes/Card.css.js";
 
-addCustomCSS("ui5-card", "sap_fiori_3", cardCss);
-addCustomCSS("ui5-card", "sap_belize", cardCss);
-addCustomCSS("ui5-card", "sap_belize_hcb", cardCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-card",
-	styleUrl: [
-		"Card.css",
-	],
 	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -151,6 +143,10 @@ class Card extends WebComponent {
 		return CardRenderer;
 	}
 
+	static get styles() {
+		return cardCss;
+	}
+
 	static calculateTemplateContext(state) {
 		const hasAvatar = !!state.avatar;
 		const icon = hasAvatar && isIconURI(state.avatar);

packages/main/src/CheckBox.js

@@ -2,7 +2,6 @@ import WebComponent from "@ui5/webcomponents-base/src/WebComponent.js";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
 import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 
 import CheckBoxRenderer from "./build/compiled/CheckBoxRenderer.lit.js";
 import CheckBoxTemplateContext from "./CheckBoxTemplateContext.js";
@@ -11,16 +10,11 @@ import Label from "./Label.js";
 // Styles
 import checkboxCss from "./themes/CheckBox.css.js";
 
-addCustomCSS("ui5-checkbox", "sap_fiori_3", checkboxCss);
-addCustomCSS("ui5-checkbox", "sap_belize", checkboxCss);
-addCustomCSS("ui5-checkbox", "sap_belize_hcb", checkboxCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-checkbox",
-	styleUrl: ["CheckBox.css"],
 	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
 
 		/**
@@ -160,6 +154,10 @@ class CheckBox extends WebComponent {
 		return CheckBoxRenderer;
 	}
 
+	static get styles() {
+		return checkboxCss;
+	}
+
 	constructor() {
 		super();
 		this._label = {};

packages/main/src/CustomListItem.js

@@ -1,26 +1,16 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import ListItem from "./ListItem.js";
 import CustomListItemTemplateContext from "./CustomListItemTemplateContext.js";
 import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit.js";
 
 // Styles
 import columnListItemCss from "./themes/CustomListItem.css.js";
 
-addCustomCSS("ui5-li-custom", "sap_fiori_3", columnListItemCss);
-addCustomCSS("ui5-li-custom", "sap_belize", columnListItemCss);
-addCustomCSS("ui5-li-custom", "sap_belize_hcb", columnListItemCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-li-custom",
-	styleUrl: [
-		"ListItemBase.css",
-		"ListItem.css",
-		"CustomListItem.css",
-	],
 	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
 
@@ -66,6 +56,10 @@ class CustomListItem extends ListItem {
 	static get calculateTemplateContext() {
 		return CustomListItemTemplateContext.calculate;
 	}
+
+	static get styles() {
+		return [ListItem.styles, columnListItemCss];
+	}
 }
 
 Bootstrap.boot().then(_ => {

packages/main/src/DatePicker.js

@@ -7,7 +7,6 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes.js";
 import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration.js";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider.js";
 import { getIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
 import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js";
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
@@ -29,18 +28,11 @@ import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
 // Styles
 import datePickerCss from "./themes/DatePicker.css.js";
 
-addCustomCSS("ui5-datepicker", "sap_fiori_3", datePickerCss);
-addCustomCSS("ui5-datepicker", "sap_belize", datePickerCss);
-addCustomCSS("ui5-datepicker", "sap_belize_hcb", datePickerCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-datepicker",
-	styleUrl: [
-		"DatePicker.css",
-	],
 	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
 		 * Defines a formatted date value.
@@ -211,6 +203,9 @@ class DatePicker extends WebComponent {
 		return DatePickerTemplateContext.calculate;
 	}
 
+	static get styles() {
+		return datePickerCss;
+	}
 
 	constructor() {
 		super();

packages/main/src/DayPicker.js

@@ -10,25 +10,17 @@ import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
 import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js";
 import { calculateWeekNumber } from "@ui5/webcomponents-base/src/dates/CalendarUtils.js";
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 import DayPickerTemplateContext from "./DayPickerTemplateContext.js";
 import DayPickerRenderer from "./build/compiled/DayPickerRenderer.lit.js";
 
 // Styles
 import dayPickerCSS from "./themes/DayPicker.css.js";
 
-addCustomCSS("ui5-daypicker", "sap_fiori_3", dayPickerCSS);
-addCustomCSS("ui5-daypicker", "sap_belize", dayPickerCSS);
-addCustomCSS("ui5-daypicker", "sap_belize_hcb", dayPickerCSS);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-daypicker",
-	styleUrl: [
-		"DayPicker.css",
-	],
 	properties: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
 		 * A UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
@@ -119,6 +111,10 @@ class DayPicker extends WebComponent {
 		return DayPickerRenderer;
 	}
 
+	static get styles() {
+		return dayPickerCSS;
+	}
+
 	constructor() {
 		super();
 		this._oLocale = getFormatLocale();

packages/main/src/Dialog.js

@@ -1,5 +1,4 @@
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
-import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle.js";
 
 import DialogTemplateContext from "./DialogTemplateContext.js";
 import Popup from "./Popup.js";
@@ -9,19 +8,11 @@ import DialogRenderer from "./build/compiled/DialogRenderer.lit.js";
 // Styles
 import dialogCss from "./themes/Dialog.css.js";
 
-addCustomCSS("ui5-dialog", "sap_fiori_3", dialogCss);
-addCustomCSS("ui5-dialog", "sap_belize", dialogCss);
-addCustomCSS("ui5-dialog", "sap_belize_hcb", dialogCss);
-
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-dialog",
-	styleUrl: [
-		"Popup.css",
-		"Dialog.css",
-	],
 	properties: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
@@ -80,6 +71,10 @@ class Dialog extends Popup {
 		return DialogRenderer;
 	}
 
+	static get styles() {
+		return [Popup.styles, dialogCss];
+	}
+
 	/**
 	* Opens the <code>ui5-dialog</code>.
 	* @public