refactor: make custom CSS theme independent (#386)

With the move to CSS custom properties, the CSS that is added to the shadow DOM is theme independent and never changed when the theme is changed. Theme dependent styling has to be achieved by use of CSS cutsom properties only. This method is adjusted to reflect the standard framework behaviour.

BREAKING CHANGE: the signature of the addCustomCSS method exported by "@ui5/webcomponents-base/Theming.js" is changed from addCustomCSS(tag, theme, css) to addCustomCSS(tag, css)

Author: pskelin

packages/base/src/Theming.js

@@ -41,9 +41,8 @@ const setTheme = async theme => {
 };
 
 const getEffectiveStyle = ElementClass => {
-	const theme = getTheme();
 	const tag = ElementClass.getMetadata().getTag();
-	const customStyle = getCustomCSS(theme, tag) || "";
+	const customStyle = getCustomCSS(tag) || "";
 	let componentStyles = ElementClass.styles;
 
 	if (Array.isArray(componentStyles)) {

packages/base/src/theming/CustomStyle.js

@@ -1,23 +1,20 @@
-const customCSSMap = new Map();
+const customCSSFor = {};
 
-const addCustomCSS = (tag, theme, css) => {
-	let themeCustomCSS = customCSSMap.get(theme);
-
-	if (!themeCustomCSS) {
-		customCSSMap.set(theme, {});
-		themeCustomCSS = customCSSMap.get(theme);
+const addCustomCSS = (tag, css, ...rest) => {
+	// TODO remove deprecation error after 1 release
+	if (rest.length) {
+		throw new Error("addCustomCSS no longer accepts theme specific CSS. new signature is `addCustomCSS(tag, css)`");
 	}
 
-	if (!themeCustomCSS[tag]) {
-		themeCustomCSS[tag] = [];
+	if (!customCSSFor[tag]) {
+		customCSSFor[tag] = [];
 	}
 
-	themeCustomCSS[tag].push(css);
+	customCSSFor[tag].push(css);
 };
 
-const getCustomCSS = (theme, tag) => {
-	const themeCustomCSS = customCSSMap.get(theme);
-	return themeCustomCSS && themeCustomCSS[tag] ? themeCustomCSS[tag].join("") : "";
+const getCustomCSS = tag => {
+	return customCSSFor[tag] ? customCSSFor[tag].join("") : "";
 };
 
 export { addCustomCSS, getCustomCSS };