Как минимизировать мой javascript файл, содержащий css коды

Question

У меня есть этот javascript код, который я хочу минимизировать. Пользователи должны встраивать его в заголовок своего сайта. Это чисто написано в javascript. Однако я внедрил код css в файл js. Я пытался минимизировать на сайте https://jscompress.com/, но он продолжает выдавать ошибку

File index.js: Unexpected character '`' (line: 1, col: 13)

Кто-нибудь знает альтернативу реализации моих css кодов в файле javascript без символов "` ".

Вот мой код:

var styles = `
.info{
display: flex;
color: black;
font-size: xx-small;
margin-left: 5px;
}

.text{
  margin-top: 12;
}

.verification {
        display: flex;
        flex-direction: horizontal;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 50px;
        background-color: white;
        color: white;
        padding: 6px 6px;
        margin: 8px 0;
        border: 1px solid green;
        border-radius: 4px;
        cursor: pointer;
        z-index: 500px;
       // opacity: 0.5;
       box-shadow: 5px 5px #d0dcd0;
        
}

.link {
    text-decoration: none;
    color: green;
}

`

var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet);
	window.onload = function () {
    var div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "10px";
div.style.bottom = "10px";
div.innerHTML = "<div class='verification'><div class='img'><img height='30px' src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png' /></div><div class='info'><p > Verified by Champ <a class='link' href='#'>Learn more</a> </p</div><div>";
var lastChild = document.body.lastChild;
document.body.insertBefore(div, lastChild.nextSibling);
};
	

Answer 1

Я использую Коала для минимизации файлов. Когда я попытался минимизировать ваш код, я получил ошибку обратного апострофа. Однако после использования опции Harmony ES6 все прошло гладко, и вот эффекты:

var styles=" \n.info{\ndisplay: flex;\ncolor: black;\nfont-size: xx-small;\nmargin-left: 5px;\n}\n\n.text{\n  margin-top: 12;\n}\n\n.verification {\n        display: flex;\n        flex-direction: horizontal;\n        justify-content: center;\n        align-items: center;\n        width: 80px;\n        height: 50px;\n        background-color: white;\n        color: white;\n        padding: 6px 6px;\n        margin: 8px 0;\n        border: 1px solid green;\n        border-radius: 4px;\n        cursor: pointer;\n        z-index: 500px;\n       // opacity: 0.5;\n       box-shadow: 5px 5px #d0dcd0;\n        \n}\n\n.link {\n    text-decoration: none;\n    color: green;\n}\n\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),window.onload=function(){var n=document.createElement("div");n.style.position="absolute",n.style.left="10px",n.style.bottom="10px",n.innerHTML="<div class='verification'><div class='img'><img height='30px' src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png' /></div><div class='info'><p > Verified by Champ <a class='link' href='#'>Learn more</a> </p</div><div>";var e=document.body.lastChild;document.body.insertBefore(n,e.nextSibling)};

Answer 2

Я использую этот инструмент https://jscompressor.com в порядке

var styles="\n.info{\ndisplay: flex;\ncolor: black;\nfont-size: xx-small;\nmargin-left: 5px;\n}\n\n.text{\n  margin-top: 12;\n}\n\n.verification {\n        display: flex;\n        flex-direction: horizontal;\n        justify-content: center;\n        align-items: center;\n        width: 80px;\n        height: 50px;\n        background-color: white;\n        color: white;\n        padding: 6px 6px;\n        margin: 8px 0;\n        border: 1px solid green;\n        border-radius: 4px;\n        cursor: pointer;\n        z-index: 500px;\n       // opacity: 0.5;\n       box-shadow: 5px 5px #d0dcd0;\n        \n}\n\n.link {\n    text-decoration: none;\n    color: green;\n}\n\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),window.onload=function(){var n=document.createElement("div");n.style.position="absolute",n.style.left="10px",n.style.bottom="10px",n.innerHTML="<div class='verification'><div class='img'><img height='30px' src='https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png' /></div><div class='info'><p > Verified by Champ <a class='link' href='#'>Learn more</a> </p</div><div>";var e=document.body.lastChild;document.body.insertBefore(n,e.nextSibling)};