JavaScript中自定义GUI呈现程序的CSS解释器

我正在开发一个渲染器，它根据CSS规则布局可视化GUI对象。 渲染器接受两个输入：对象树和css规则。 每个对象都有位置、大小、颜色等。 输出是一组属性，如果应用于对象，将生成与输入CSS规则对应的布局

一个理想的用法示例：

var renderer = new GUI_Renderer_CSS();
renderer.setRootContainterSize(840,200);
renderer.setParentToChildRelativePositions(true);

var css = "
   .menu {
        padding: 100px;
        background-color: blue;
    }
    .item {
        height: 30px;
        margin: 20px;
        background-color: red;
    }
    #special {
        margin: 40px;
        background-color: yellow;
    }
";

var objects = [{
    class:"menu"; 
    id="1"; 
    width:"300px";  // here the width is carried by the object itself
    children: [ 
        {class:"item"; id="2";}, 
        {class:"item"; id="3";}, 
        {class:"item"; id:"special"; } 
    ];
}];


var renderedProperties = renderer.render(objects, css);

// renderedProperties dump:
{
          1: { x:100px; y:100px; width:300px; height:210px; background-color:rgb(0, 0, 255)},
          2: { x:20px;  y:20px;  width:260px; height:30px;  background-color:rgb(255, 0, 0)},
          3: { x:20px;  y:50px;  width:260px; height:30px;  background-color:rgb(255, 0, 0)},
    special: { x:40px;  y:80px;  width:220px; height:30px;  background-color:rgb(255, 255, 0)},
}

renderer.getRootContainterSize(); // 840 x 410  // height is recalculated based on real space required by the rendered objects

请注意，这样做的目的不是在浏览器中使用，也不是与HTML一起使用

---

问：这样的事情已经存在了吗？如果没有，有什么我可以开始的吗？

只是好奇，如果不是在浏览器/html中，您到底打算在哪里使用它？它会出现在一个包装html/css的手机应用程序中吗？只是一个通用的GUI渲染器。我有很多用JS编写的非html、非浏览器的应用程序。我需要以某种方式布局GUI元素，CSS似乎是很好的候选者。我需要边距/填充物/可变大小，只要是为HTML/CSS开发的所有好东西。