title: CSS Styling from JSON
body: <p>I am creating an app in which you can apply custom css to html templates. The custom css is drawn from a <code>.json</code> file, I then parse it, transmute it into css and then intstantiate a custom <code>&lt;style&gt;</code>.</p>
  
  <p>I think I am very close to having this working as intended, the only issue is that I can't quite work out how to remove the <code>,</code> in between a selectors properties. i.e. in the example below... <code>#textContainer {border:blue solid 2px;,background-color:#ff0;}</code> the comma right before <code>background-color</code>.</p>
  
  <p><strong>note:</strong> in the example below, the <code>styles object</code> represents the external <code>.json</code> file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var styles = {
    "#textContainer": {
      "border": "blue solid 2px;",
      "background-color": "#ff0;"
    },
    "#textContainer &gt; button": {
      "color": "#f00"
    }
  };
  
  
  var newStyle = document.createElement('style');
  newStyle.type = "text/css";
  
  newStyle.appendChild(document.createTextNode(getCSS()));
  document.querySelector("#textContainer").appendChild(newStyle);
  
  function getCSS() {
    var css = [];
    for (let selector in styles) {
      console.log("&gt;&gt; Selector &gt;&gt; ", selector, JSON.stringify(styles[selector]));
      var nest = [];
      for (let prop in styles[selector]) {
        nest.push(prop + ":" + JSON.stringify(styles[selector][prop]));
      }
      css.push(selector + " " + JSON.stringify(styles[selector]));
    }
  
    var cssStr = css.join("\n");
    cssStr = cssStr.replace(/["]/g, "");
    console.log("-------------------------------------------------");
    console.log(cssStr);
    return cssStr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="textContainer" class="col-xs-offset-8 col-xs-4"&gt;
    &lt;button type="button" class="btn btn-default btn-lg"&gt;Hello&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>