Store CSS in string

Question

.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';.ql-snow .ql-tooltip a.ql-action2::after{border-right:1px solid #ccc;content:"Cancel";}

Is there an online site that converts HTML, or CSS into string, to play everything within a variable? For example:

I put in the form that:

body {
 margin:0;
 padding: 0;
}

He’d return something like this to me, making all the escape arrangements:

var css = 'body{margin:0;padding:0}';

If it were in PHP, I would do so:

$var =  <<<END
   .ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';.ql-snow .ql-tooltip a.ql-action2::after{border-right:1px solid #ccc;content:"Cancel";}
END;

I need to do this to generate a PDF:

var valor1 = 'aqui viria o css minificado com as aspas escapada';
var valor2 = 'mais CSS aqui...';

 $('.main').prepend('<style type="text/css">' + [
                 valor1,
                 valor2
              ].join('') + '</style>');

OBS: My question is clear, the problem is that people did not understand, and so I’m having to add more information, to clarify for those who cannot understand what is obvious:

1 - I’m not looking for a solution to minify CSS

2 - I’m looking for a solution to play CSS minified inside a variable with a string inside quotes.

3 - I don’t want to do the string manually (that is, I don’t want to type it), I want to generate a string in the string format and not its value.

Answer 1

I don’t know if I understand what you want, because I don’t understand the usefulness of this, but I think all you need to do is remove the line breaks and spaces from the text.

document.getElementById('btn-remover').addEventListener('click', fnClick);

function fnClick(){
  var val = document.getElementById('txt-css').value;
  val = val.replace(/[\s]/g, ' ');
  console.log(val);
}

textarea {
  height: 300px;
  width: 300px;
}

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

Answer 2

I made this example based on the @jbueno response trying to touch what I think was your expectation. See if it suits you.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick() {
  var val = str.replace(/\s+/g, ' ');
  console.log(val);
  textArea.innerHTML += val;
}

textarea {
  height: 150px;
  width: 300px;
}

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

ESCAPING QUOTES

Here the code changes all " for \":

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick(){
  var val = str.replace(/\s+/g, ' ');
  var newVal = val.replace(/"/g, '\\"');
  console.log(newVal);
  textArea.innerHTML += newVal;
}

textarea {
  height: 150px;
  width: 300px;
}
.escaped {
  content: "http://urlAleatório.com";
}

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

IN QUOTES

Here, in addition to changing the quotes, the variable is created already inside the ' '.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var str = document.getElementsByTagName('style')[0].firstChild.data;
var textArea = document.getElementById('txt-css');

function fnClick(){
  var val = str.replace(/\s+/g, ' ');
  var escVal = val.replace(/"/g, '\\"');
  var newVal = "'" + escVal + "'";
  console.log(newVal);
  textArea.innerHTML += newVal;
}

textarea {
  height: 150px;
  width: 300px;
}
.escaped {
  content: "http://urlAleatório.com";
}

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

SEPARATE STYLE SHEET

This option will work just using a separate style sheet and will do everything that the last option does. This function will also replace all single quotes in double escaped quotes. If you are doing it offline, Chrome may give security error as it does not let js do this function. In that case, you would need to start Chrome with websecurity disabled, or test it with online files.

document.getElementById('btn-remover').addEventListener('click', fnClick);
var textArea = document.getElementById('txt-css');
var str;
$.ajax({
  url: 'style.css',
  success: function(data) {
    str = data;
  }
});

function fnClick() {
  var val = str.replace(/\s+/g, ' ');
  var escVal = val.replace(/"/g, '\\"');
  var escVal = escVal.replace(/'/g, '\\"');
  var newVal = "'" + escVal + "'";
  console.log(newVal);
  textArea.innerHTML += newVal;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<textarea id="txt-css"></textarea> <br>
<button id="btn-remover">Remover</button>

Answer 3

Maybe that’s what:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue; 
    color: red;
}
p {
    background-color: green; 
    color: red;
}
</style>
</head>
<body>

<p>Click the button to display the style properties of this document.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementsByTagName("STYLE")[0];
    document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>

</body>
</html>

Source