@microsoft/atlas-js - npm Package Compare versions

Comparing version 1.12.0 to 1.12.1

dist/behaviors/layout.js

 let frame;
+const root = document.documentElement;
 const setLayoutCssVariables = () => {
+    const headerHeight = document.querySelector('.layout-body-header')?.clientHeight;
+    const headerCssProp = headerHeight ? `${headerHeight}px` : '0px';
     const footerHeight = document.querySelector('.layout-body-footer')?.clientHeight;
-    const headerHeight = document.querySelector('.layout-body-header')?.clientHeight;
-    const headerCssProp = headerHeight
-        ? `--atlas-header-height: ${headerHeight}px !important;`
-        : '--atlas-header-height: 0px !important;';
-    const footerCssProp = footerHeight
-        ? `--atlas-footer-height: ${footerHeight}px !important;`
-        : '--atlas-footer-height: 0px !important;';
-    document.documentElement.style.cssText = `
-			--window-inner-height: ${window.innerHeight}px !important;
-			${headerCssProp}
-			${footerCssProp}
-			`;
+    const footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
+    root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');
+    root.style.setProperty('--atlas-header-height', headerCssProp, 'important');
+    root.style.setProperty('--atlas-footer-height', footerCssProp, 'important');
 };
@@ -25,4 +20,4 @@ export function initLayout() {
     window.addEventListener('resize', () => window.dispatchEvent(new CustomEvent('atlas-layout-change-event')));
-    document.documentElement.style.cssText = `--window-inner-height: ${window.innerHeight}px !important`;
+    root.style.setProperty('--window-inner-height', `${window.innerHeight}px`);
     window.addEventListener('DOMContentLoaded', setLayoutCssVariables);
 }

package.json

 {
 	"name": "@microsoft/atlas-js",
-	"version": "1.12.0",
+	"version": "1.12.1",
 	"public": true,
@@ -5,0 +5,0 @@ "description": "Scripts backing the Atlas Design System used by Microsoft's Developer Relations.",

src/behaviors/layout.ts

 let frame: number;
 
+const root = document.documentElement;
+
 const setLayoutCssVariables = () => {
-	const footerHeight = document.querySelector('.layout-body-footer')?.clientHeight;
 	const headerHeight = document.querySelector('.layout-body-header')?.clientHeight;
+	const headerCssProp = headerHeight ? `${headerHeight}px` : '0px';
 
-	const headerCssProp = headerHeight
-		? `--atlas-header-height: ${headerHeight}px !important;`
-		: '--atlas-header-height: 0px !important;';
-	const footerCssProp = footerHeight
-		? `--atlas-footer-height: ${footerHeight}px !important;`
-		: '--atlas-footer-height: 0px !important;';
+	const footerHeight = document.querySelector('.layout-body-footer')?.clientHeight;
+	const footerCssProp = footerHeight ? `${footerHeight}px` : '0px';
 
-	document.documentElement.style.cssText = `
-			--window-inner-height: ${window.innerHeight}px !important;
-			${headerCssProp}
-			${footerCssProp}
-			`;
+	root.style.setProperty('--window-inner-height', `${window.innerHeight}px`, 'important');
+	root.style.setProperty('--atlas-header-height', headerCssProp, 'important');
+	root.style.setProperty('--atlas-footer-height', footerCssProp, 'important');
 };
@@ -34,5 +30,5 @@
 
-	document.documentElement.style.cssText = `--window-inner-height: ${window.innerHeight}px !important`;
+	root.style.setProperty('--window-inner-height', `${window.innerHeight}px`);
 
 	window.addEventListener('DOMContentLoaded', setLayoutCssVariables);
 }

No alert changes

Worsened metrics

Total package byte prevSize

114817

decreased by-0.09%

Lines of code

2837

decreased by-0.35%

No dependency changes