feat(framework): Limited support for campact size on IE (#2230)

Author: vladitasev

packages/base/src/UI5Element.js

@@ -45,6 +45,7 @@ const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
 class UI5Element extends HTMLElement {
 	constructor() {
 		super();
+		this._propertyChangeListeners = new Set();
 		this._initializeState();
 		this._upgradeAllProperties();
 		this._initializeContainers();
@@ -59,7 +60,6 @@ class UI5Element extends HTMLElement {
 		this._domRefReadyPromise._deferredResolve = deferredResolve;
 
 		this._monitoredChildProps = new Map();
-		this._propertyChangeListeners = new Set();
 		this._shouldInvalidateParent = false;
 	}
 

packages/base/src/theming/CSSVarsPonyfill.js

@@ -7,6 +7,7 @@ const runPonyfill = () => {
 
 	window.CSSVarsPonyfill.cssVars({
 		rootElement: document.head,
+		variables: isCompact() ? getCompactModeVars() : {},
 		silent: true,
 	});
 };
@@ -17,6 +18,29 @@ const schedulePonyfill = () => {
 	}
 };
 
+const isCompact = () => {
+	const b = document.body;
+	return b.hasAttribute("data-ui5-compact-size") || b.classList.contains("ui5-content-density-compact") || b.classList.contains("sapUiSizeCompact");
+};
+
+const getCompactModeVars = () => {
+	const compactVars = {};
+	[...document.querySelectorAll(`[data-ui5-theme-properties]`)].forEach(el => {
+		const cssContent = el.textContent.replace("\n", "");
+		let match;
+		const regExp = new RegExp("data-ui5-compact-size[^{]*{(.*?)}", "g");
+		while ((match = regExp.exec(cssContent)) !== null) { // eslint-disable-line
+			const compactCSS = match[1];
+			compactCSS.split(";").forEach(declaration => {
+				const pair = declaration.split(":");
+				compactVars[pair[0].trim()] = pair[1].trim();
+			});
+		}
+	});
+
+	return compactVars;
+};
+
 export {
 	ponyfillNeeded,
 	runPonyfill,