chore(framework): Improve behavior with multiple instances of CSSVarsPonyfill (#2420)

Author: vladitasev

packages/base/src/theming/CSSVarsPonyfill.js

@@ -2,9 +2,29 @@ let ponyfillTimer;
 
 const ponyfillNeeded = () => !!window.CSSVarsPonyfill;
 
+/**
+ * Removes the "data-cssvars-group" attribute for all element styles and their respective out nodes.
+ * CSSVarsPonyfill has internal counters for "group" and "job" and running several instances of the ponyfill may lead to issues, since these counters are not shared
+ * Therefore we remove them for our "data-ui5-element-styles"
+ *
+ * @param rootElement
+ */
+const cleanPonyfillMetadata = (rootElement = document.head) => {
+	rootElement.querySelectorAll(`style[data-ui5-element-styles][data-cssvars="src"]`).forEach(tag => {
+		const group = tag.getAttribute("data-cssvars-group");
+		tag.removeAttribute("data-cssvars-group");
+		tag.disabled = false;
+		const outNode = rootElement.querySelector(`style[data-cssvars="out"][data-cssvars-group="${group}"]`);
+		if (outNode) {
+			outNode.removeAttribute("data-cssvars-group");
+		}
+	});
+};
+
 const runPonyfill = () => {
 	ponyfillTimer = undefined;
 
+	cleanPonyfillMetadata();
 	window.CSSVarsPonyfill.cssVars({
 		rootElement: document.head,
 		variables: isCompact() ? getCompactModeVars() : {},