从JavaScript嵌套对象生成CSS样式标记

我试图通过JavaScript中的对象创建一个CSS标记。 对象可以嵌套，并且还应该包含媒体查询（如果是）。 对象应该是嵌套的，并且可以在任何级别工作。 最终结果应该是我将附加到文档中a样式div的字符串

这是密码

`    var css = buildStyle({
        ".world-card": { 
            display: "block",
            borderRadius: "2px", 
            padding: "1px" 
        },
        "@media screen and (max-width: 600px)" : {
            ".world-card .card-title": {
              color: 'red',
              fontSize: "1.0em"
            }
        }
    })

insertCss(css);

function buildStyle(data){
var data = data || {}
var style; 
var arr = []
var src = '';

var cssList = {
    cssFloat:'float',
}

function camelCaseRemove(string) {
    return string.replace(/[A-Z]/g, function (s) {
      return '-' + s.toLowerCase();
    });
}

function replaceSelector(string) {
    return cssList[string] ? cssList[string] : camelCaseRemove(string);
}

for (i in data) {
    for(key in data[i]) {
        style = replaceSelector(key, cssList) + ':' + data[i][key];
        if (!arr[i]) arr[i] = [];
        arr[i].push(style);
    }
}

for (i in arr) {
    src += i +  '{' + arr[i].join(';') + '}'
}
console.log(src)
return src

} `

输出：

.world-card{display:block;border-radius:2px;padding:1px}@media screen and (max-width: 600px){.world-card .card-title:[object Object]}

如何使其在任何级别也接受嵌套样式对象