打算自己写程序将 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" }] } } }