How to minify my javascript file containing css codes

Question

I have this javascript code I want to minify.Users are meant to embed it in the head of their website. It's purely written in javascript. I however embedded come css code within the js file. I tried minifying on the website https://jscompress.com/ but it keeps throwing the error

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

Does anyone know an alternative to implementing my css codes in javascript file without "`" symbols.

Here is my code:

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);
};

Krzysztof Antosik · Accepted Answer · 2020-03-25 08:33:31Z

I'm using Koala to minify files. When I tried to minify your code, I got a reverse apostrophe error. However, after using the Harmony ES6 option, everything went smoothly, and here are the effects:

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)};

Bao Nam · Accepted Answer · 2020-04-30 14:49:25Z

I using this tool https://jscompressor.com is ok

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)};

Collectives™ on Stack Overflow

How to minify my javascript file containing css codes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related