title: JavaScript stylesheet.insertRule not inserting rule but returns no errors or exceptions
body: <p>I need to create some dynamic css and trying to use insertRule. I am creating a style tag, then attempting to use insertRule within a loop to create a number of rules. </p>
  
  <p>What's happening: Style tag is generated and added to the head, no rules insterted to the tag. No errors in console.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>let addCSSRule = function(sheet, selector, rules, index) {
          sheet.insertRule(selector + "{" + rules + "}", index);
      };
  
      let styleTagGenerator = function() {
          let tag = document.createElement('style');
          tag.id = 'myskills_dynamic_style';
          tag.type = 'text/css';
          document.head.appendChild(tag);
      };
  </code></pre>
  
  <p>Then in the loop where I call the addCSSRule function. I have played around with the index:</p>
  
  <pre><code>for(let key in response) {
       let val = response[key];
        let selector = '.progressbar-bg span.progressbar-' + key + ':after';
        let rule = 'animation-name: pb-' + val + '-after';
        let styleTag = document.getElementById('myskills_dynamic_style').sheet;
                          addCSSRule(styleTag, selector, rule);
    }
  </code></pre>