A function to calculate the computed styles of elements and write them as inline styles

inlinestyles.js

const attributesToInline = ['flex', 'flex-basis', 'flex-direction', 'flex-grow', 'display', 'max-width', 'max-height', 'overflow-y', 'overflow-x'];

function inlineStyles(element) {
    // Get computed styles of the element
    const computedStyle = window.getComputedStyle(element);
	let styleString = '';
    for (const attr of attributesToInline) {
        const value = computedStyle.getPropertyValue(attr);
        if (value) {
			if ((attr == "overflow-x" || attr == "overflow-y") && value == "visible") {
				continue;
			}
			if ((attr == "max-width" || attr == "max-height") && value == "none") {
				continue;
			}
			if (attr == "flex" && value == "0 1 auto") {
				continue;
			}
			if (attr == "flex-basis" && value == "auto") {
				continue;
			}
            styleString += `${attr}: ${value}; `;
        }
    }
    
    if (styleString) {
        element.setAttribute('style', styleString);
    }
    // Loop through child elements and recursively inline their styles
    for (const child of element.children) {
        inlineStyles(child);
    }
}