Convert a CSSStyleDeclaration object to a Style Sheet

How can you create a CSS Style Sheet Rule from a CSSStyleDeclaration object?

The docs for inserting a new Style Sheet rule require the selector and declaration to be declared as a string: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

myStyle.insertRule('p { font-weight: bold, color:red }');

But what if you already have it as a CSSStyleDeclaration like object?

{
 fontWeight:'bold',
 color:red
}

You could loop the object, set each prop on a tmp element.style and then grab its css text…

const myStyle = {
    fontWeight:'bolder', 
    color:'red',
}; 

const tmpStyleEl = document.createElement('style');


for( const prop in myStyle ) {  
    tmpStyleEl.style[prop] = myStyle[prop];
};

// this converts it to a valid css string format
const ruleStr = tmpStyleEl.style.cssText;

const style = document.createElement('style');
style.sheet.insertRule(`p { ${ruleStr} }`);

document.body.append(style);

But that feels overkill!

Some Background

We have user defined styles/themes (saved as CSSStyleDeclarations at the moment), and then we have user generated HTML (simple collection of <p> and <h1> tags generated by Quill).

We then want to generate a Stylesheet so all the nested <p> and <h1> tags can pick up on the style….

Maybe we store the style declarations as an actual CSS Style Sheet string? We could then create the sheet as an external .css file – but then to populate the model data for the UI controls to edit the theme, we would have to do some reverse process to the above anyway….