[程序员] 打算自己写程序将 webpack 打包过的代码还原成 html css，奈何技术不够

遇到的问题很多 js style “ flexDirection”写法，而在 css 里面 正确的写法是 flex-direction ，其他诸如，backgroundColor ，justifyContent ，alignItems 等等很多，不想穷举一个一个对应去替换，有什么好方法？或者好用的库来做个反向操作把 alignItems 转换为 align-items ，justifyContent 转换为 justify-content ，目前想到的方法是用 正则替换大写字母为 小写字母并且加上横杠 /([A-Z])/.replace(str,'-'+$1.toLower()) ? 但是觉得不够优雅，又担心出问题

{
              ".full-content": {
                position: "absolute",
                top: "0px",
                left: "0px",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "flex-end",
                width: "100%",
                backgroundColor: "rgba(0,0,0,0.01)"
              },
              ".full-content .ad-button-extra": {
                marginTop: "-100px",
                marginLeft: "-200px",
                width: "200px",
                height: "100px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "ad-button-extra"
                  }]
                }
              },
              ".full-content .full-swiper": {
                width: "100%",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-swiper"
                  }]
                }
              },
              ".full-content .full-div": {
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "flex-end",
                width: "100%",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-div"
                  }]
                }
              },
              ".full-content .btn-wrap": {
                width: "750px",
                height: "180px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-wrap"
                  }]
                }
              },
              ".full-content .btn-wrap-extra": {
                width: "750px",
                height: "215px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-wrap-extra"
                  }]
                }
              },
              ".full-content .btn-content": {
                position: "absolute",
                transform: "{\"scaleX\":60,\"scaleY\":60}",
                width: "750px",
                height: "180px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-content"
                  }]
                }
              },
              ".full-content .btn-origin-0": {
                transformOrigin: "0px 0px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-origin-0"
                  }]
                }
              },
              ".full-content .btn-origin-1": {
                transformOrigin: "750px 0px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-origin-1"
                  }]
                }
              },
              ".full-content .btn-origin-2": {
                transformOrigin: "0px 180px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-origin-2"
                  }]
                }
              },
              ".full-content .btn-origin-3": {
                transformOrigin: "750px 180px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-origin-3"
                  }]
                }
              },
              ".full-content .btn-origin-4": {
                transformOrigin: "0px 0px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-origin-4"
                  }]
                }
              },
              ".full-content .btn": {
                width: "750px",
                height: "180px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn"
                  }]
                }
              },
              ".full-content .btn-extra": {
                position: "absolute",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "full-content"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "btn-extra"
                  }]
                }
              },
              ".mask-all": {
                position: "absolute",
                left: "0px",
                top: "0px",
                width: "750px",
                height: "100%"
              },
              ".content-wrap": {
                position: "absolute",
                top: "0px",
                left: "0px"
              },
              ".content-wrap .content-box": {
                position: "absolute",
                top: "0px",
                left: "0px",
                width: "750px",
                transform: "{\"translateY\":\"1px\"}",
                backgroundColor: "#000000",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }]
                }
              },
              ".content-wrap .content-box .bg-img": {
                width: "750px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "bg-img"
                  }]
                }
              },
              ".content-wrap .content-box .user-id": {
                paddingTop: "80px",
                paddingRight: "20px",
                paddingBottom: "80px",
                paddingLeft: "20px",
                height: "180px",
                width: "750px",
                lineHeight: "20px",
                fontSize: "18px",
                color: "#333333",
                opacity: 0.6,
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "user-id"
                  }]
                }
              },
              ".content-wrap .content-box .pop-wrap": {
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "flex-end",
                width: "100%",
                height: "100%",
                backgroundColor: "rgba(0,0,0,0.78)",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-wrap"
                  }]
                }
              },
              ".content-wrap .content-box .pop-wrap .pop-box": {
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                width: "100%",
                height: "100%",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-box"
                  }]
                }
              },
              ".content-wrap .content-box .pop-wrap .pop-box .pop-image": {
                width: "700px",
                height: "800px",
                objectFit: "contain",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-image"
                  }]
                }
              },
              ".content-wrap .content-box .pop-wrap .pop-box .pop-image-extra": {
                width: "750px",
                height: "600px",
                objectFit: "contain",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-image-extra"
                  }]
                }
              },
              ".content-wrap .content-box .pop-wrap .nav": {
                width: "750px",
                height: "80px",
                _meta: {
                  ruleDef: [{
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "content-box"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "pop-wrap"
                  }, {
                    t: "d"
                  }, {
                    t: "a",
                    n: "class",
                    i: false,
                    a: "element",
                    v: "nav"
                  }]
                }
              }
            }