Fix VSTS code coverage reporting by inlining CSS

script.js

let fs = require("fs-jetpack"),
  path = require("path"),
  inline = require("inline-css");

// This inlines the css of the HTML coverage output as VSTS
// strips all external CSS files

const CODE_COVERAGE_DIRECTORY = "./coverage";

const files = fs.find(CODE_COVERAGE_DIRECTORY, { matching: "*.html" });
files.forEach(filePath => {
  let options = {
    url: "file://" + path.resolve(filePath),
    extraCss:
      ".wrapper {height: initial;} .clearfix { display: inline-block; } table {width: 1px;} .cline-any, .line-count {font-size: 12px;line-height: 16px;}"
  };

  const data = fs.read(path.resolve(filePath));
  inline(data, options)
    .then(html => {
      let outputFile = path.resolve(filePath);
      fs.write(outputFile, html);
    })
    .catch(err => {
      console.log(err);
    });
});

Thanks for your contribution!

Thanks for this code !! Helps .. Beyond me why Lcov still does not have this fixed !!

Also for the lcov report I am having some issues in exposing some of the html links that the report has. By that I mean

• The table produces a number of index.html and those links are present as symlinks and are present within the docker container
• Somehow those index.html files are not getting found by the lcov report in the main .html report

Any ideas there would be helpful , do tell me if you need more information ??