Dynamic CSS-creation (Firefox)

can anybody tell me how you can create a new stylesheet inside a
(X)HTML page with JavaScript and Firefox, if the stylesheet is only
available as a variable value, like:

var CSSStyle = "rect {fill: lightgrey;}
circle {fill: red;}
polyline {fill: none; stroke: red; stroke-width: 0.3;}
text {font-size: 2.5px;}
text.text-x-axis {text-anchor: middle;}
text.text-y-axis {text-anchor: end;}"

So far, the only workaround I found, was to link an empty stylesheet to
the page

<link rel="stylesheet" type="text/css" href="./empty.css"/>

and then use the insertRule method on this stylesheet for every single
rule from the variable (indexOf('}') / substring()).