如何从CSSStyleDeclaration对象创建CSS样式表规则？

使用CSSStyleSheet.insertRule方法插入新样式规则时，需要传入由选择器和样式声明组成的字符串，示例如下：

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

但如果已经拥有一个类CSSStyleDeclaration结构的对象（如下所示的键值对形式）：

{
  fontWeight: 'bold',
  color: 'red'
}

可以通过临时DOM元素完成格式转换：创建空的style元素，遍历对象将属性赋值给其style对象，再通过cssText获取标准的CSS声明字符串，最后用insertRule插入规则：

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

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

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

// 转换为合法的CSS字符串格式
const ruleStr = tmpStyleEl.style.cssText;

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

document.body.append(style);

不过这种方法确实存在冗余感。

背景场景 #

我们目前将用户定义的样式/主题保存为类CSSStyleDeclaration的对象，同时还有用户通过Quill生成的仅包含<p>和<h1>标签的HTML内容。我们需要生成样式表，让所有嵌套的<p>和<h1>标签都能应用这些样式。

我们也考虑过直接将样式声明存储为CSS样式表字符串——这样便于生成外部.css文件，但之后要填充UI控件的模型数据以编辑主题时，又需要执行反向转换操作。

内容的提问来源于stack exchange，提问作者Matt Bryson