How to Generate Styles from Objects in JavaScript

const book = {
  content: '📒',
  display: 'block',
  padding: '20px',
  background: 'yellow'
};

const getStyles = obj => Object.keys(obj).map(key => `${key}:${obj[key]}`).join(';');

// Later you can call the function to inline the styles
getStyles(book);

const styles = {
    heroCTA: {
        display: 'block'
    },
    heroImage: {
        display: 'block',
        width: '100%'
    }
};

const generatedStyles = Object.fromEntries(Object.entries(styles).map(([element, style]) => [element, getStyles(style)]));

// This will generate the following object:
{
    heroCTA: 'display:block',
    heroImage: 'display:block;width:100%'
}