Keep form feed characters in CSS-string unchanged in javascript

Question

How can I avoid form feed characters to be parsed in a javascript string?

I have a variable holding this string

var css = 'content: "\f005"';

but the string is not left unchanged when I use it. E.g. console.log(css) gives content: "005"

My "solution" so far is this lille hack

decodeURIComponent(
    encodeURIComponent(css).replace(/%0C/g, "\\f")
);

Is there a better way?

Use case (Update)

I am building a web widget, and I want a single JS lib without dependencies to CSS files. Therefore, when I build my project I read the minified css file, and inject it into the JS file as a string. When the JS lib is initialised at the client, it creates a <style> element and injects the css there.

var style = document.createElement('style');
style.type = 'text/css';
var css = '...long css string...'; // form feed characters must be escaped
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);

Answer 1

If you want to write the literal characters \f in a Javascript string literal you need to escape the backslash:

var css = 'content: "\\f005"';

Otherwise \f is interpreted as form-feed character.