How to transpile your scss to json friendly string format?

Question

JSON

A small playground has been added to my project, in which you can customize an external component that is loaded from us through an external script src + the same styles.
I wrote in sass (compiled via gulp) when I wrote them. Now I give them to the user from the json server. There is not much code, so for a little time saving (terms, etc.) I wrote the required format by slightly editing css minification through online tools.

"value": ".at-360-popup {\r\n\twidth: 353px;\r\n\tbackground-color: #fff;\r\n\tborder: 1px solid #e2e2e2;\r\n\tdisplay: flex;\r\n\tflex-direction: column\r\n}\r\n.at-360-popup__content {\r\n\tdisplay: flex;\r\n\tjustify-content:space-between\r\n}\r\n.at-360-popup__column {\r\n\tdisplay: flex;\r\n\tflex-direction: column\r\n}\r\n.at-360-popup__column--mr-25 {\r\n\tmargin-right: 25px\t\n}\r\n.at-360-popup__column--start-x {\r\n\talign-items: flex-start\r\n}\r\n.at-360-popup__phone {\r\n\tfont-size: 30px;\r\n\tcolor: #363636;\r\n\ttext-transform: uppercase;\r\n\tfont-weight: 500;\r\n\tmargin-bottom: 9px\r\n}\r\n.at-360-popup__section {\r\n\tpadding: 24px;\r\n\torder: 2\r\n}\r\n.at-360-popup__section--times {\r\n\torder: 1;\r\n\tborder-bottom: 1px solid #e2e2e2\r\n}\r\n.at-360-popup__btn {\r\n\tborder: 1px solid #b9b9b9;\r\n\tborder-radius: 2px;\r\n\twidth: 43px;\r\n\theight: 44px;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center\r\n}\r\n.at-360-popup__btn svg {\r\n\twidth: 60%;\r\n\theight: 60%\r\n}\r\n.at-360-popup__btn svg path {\r\n\tfill: #b9b9b9\r\n}\r\n.at-360-popup__time {\r\n\tdisplay: flex;\r\n\tfont-size:14px;\r\n\tfont-weight:300;\r\n\tcolor: #757575;\r\n\tmargin-right: 8px\r\n}\r\n.at-360-popup__weektime {\r\n\tmargin-right: 8px\r\n}\r\n.at-360-popup__address {\r\n\tcolor: #757575;\r\n\tfont-size: 16px;\r\n\tfont-weight: 300\n\r\t}\r\n.at-360-popup__spoiler {\r\n\tfont-size: 13px;\r\n\tfont-weight:300\r\n}\r\n.at-360-popup__spoiler--opened .at-360-popup__sp-content {\r\n\tdisplay: flex\r\n}\r\n.at-360-popup__sp-toggler {\r\n\tcursor: pointer;\r\n\tdisplay: inline-flex;\r\n\tmargin-bottom: 6px;\r\n\tcolor: #24b861;\r\n\tposition: relative\r\n}\r\n.at-360-popup__sp-toggler:after {\r\n\tcontent: '';\r\n\twidth: 8px;\r\n\theight: 8px;\r\n\tposition: absolute;\r\n\tright: -15px;\r\n\tbottom: 3px;\r\n\ttop: 0;\r\n\ttransform: rotate(135deg);\r\n\tmargin: auto;\r\n\tborder-right: 1px solid #24b861;\r\n\tborder-top: 1px solid #24b861\r\n}\r\n.at-360-popup__sp-content {\r\n\tpadding-bottom:6px;\r\n\tdisplay:none\r\n}\r\n.at-360-popup__footer {\r\n\torder: 3;\r\n\twidth:calc(100% + 2px);\r\n\tpadding: 8px;\r\n\tmargin-left: -1px;\r\n\tmargin-right: -1px;\r\n\tmargin-bottom: -1px;\r\n\tbackground-color: #24b861;\r\n\tcolor: #fefefe;\r\n\tfont-size: 10px;\r\n\tfont-weight: 500;\r\n\ttext-decoration: underline;\r\n\ttext-transform: uppercase;\r\n\ttext-align: center;\r\n\tcursor:default\r\n}"

In addition to minification, I had to place tab characters so that in the code editor it all had an editable look. This is the main snag, I looked at the minity uglify api and did not find similar usecase