title: Convert external CSS to Inline on button press with javascript
body: <p>I am currently developing a page that needs to be displayed on the screen as well as be sent out as HTML email.</p>
  
  <p>I have created all the style in a separate (external) CSS file like I usually do.</p>
  
  <p>This page has multiple different templates, all sharing the same classes styled using CSS, which makes it quite a long and tedious job to go and manually inline all the CSS.</p>
  
  <p>I was wonder if there's a way to automatically get the css and convert it to inline.</p>
  
  <p>I have done some reseach and some code test as well.</p>
  
  <p>This is how far I got:</p>
  
  <ul>
  <li>I can get the css using a GET request</li>
  <li>I have the HTML of the page cleaned (removed all the unwanted parts)</li>
  </ul>
  
  <p>and now i'd like to automatically inline the properties when a class is found in the css and html.</p>
  
  <p>I have made this attempt here  <a href="https://codepen.io/NickHG/pen/wqyzGj?editors=1010" rel="nofollow noreferrer">https://codepen.io/NickHG/pen/wqyzGj?editors=1010</a></p>
  
  <pre><code>var classMatches, cls, css, cssRule, el, html, i, j, k, l, len, len1, len2, len3, len4, len5, listOfClasses, m, n, o, parsedCss, parsedHtml, parser, ref, res, v;
  
  css = ".inside1{background:red;}.inside2{background:purple;}";
  
  parser = new cssjs();
  
  parsedCss = parser.parseCSS(css);
  
  html = $('.outside').html();
  
  parsedHtml = $.parseHTML(html);
  
  listOfClasses = [];
  
  for (k = i = 0, len = parsedHtml.length; i &lt; len; k = ++i) {
    v = parsedHtml[k];
    listOfClasses.push(v.className);
  }
  
  classMatches = [];
  
  for (k = j = 0, len1 = parsedCss.length; j &lt; len1; k = ++j) {
    v = parsedCss[k];
    for (l = 0, len2 = listOfClasses.length; l &lt; len2; l++) {
      cls = listOfClasses[l];
      if ("." + cls === v.selector) {
        console.log("matching class - ", v.selector);
        ref = v.rules;
        for (m = 0, len3 = ref.length; m &lt; len3; m++) {
          cssRule = ref[m];
          res = cssRule.directive + ':' + cssRule.value + ';';
          classMatches.push({
            "class": cls,
            css: res
          });
        }
      }
    }
  }
  
  console.log(classMatches);
  
  for (k = n = 0, len4 = parsedHtml.length; n &lt; len4; k = ++n) {
    v = parsedHtml[k];
    debugger;
    for (o = 0, len5 = classMatches.length; o &lt; len5; o++) {
      el = classMatches[o];
      if (v.className === el["class"]) {
        if (v.attributes['style'] != null) {
          v.attributes['style'].value = el.css;
        }
      }
    }
  }
  
  $('.outside').html(parsedHtml);
  </code></pre>
  
  <p><strong>(the code above is a compiled version of CoffeeScript)</strong></p>
  
  <p>but it's not working correctly and it should also be recursive as I have some nested elements as well, so I would prefer to use a library that exists already (if exists) rather than having to write my own.</p>
  
  <p>Any ideas/suggestions?</p>
  
  <p>Thanks</p>