use puppeteer instead of phantomjs

Author: philschatz

.env.example

@@ -0,0 +1,9 @@
+# valid values are: fatal, error, warn, info, debug, trace
+LOG_LEVEL=info
+
+# valid values are: short, long, simple, json, bunyan
+LOG_FORMAT=short
+
+# Set to "development" to open the "headless" browser and open Dev Tools
+# (so it pauses on `debugger` statements)
+NODE_ENV=production

.gitignore

@@ -5,3 +5,5 @@
 
 # HTML Coverage Report
 /coverage/
+
+.env

bin/css-coverage

@@ -2,267 +2,4 @@
 
 process.bin = process.title = 'css-coverage';
 
-var fs = require('fs');
-var path = require('path');
-var childProcess = require('child_process');
-var phantomjs = require('phantomjs-prebuilt');
-var commander = require('commander');
-var SourceMapConsumer = require('source-map').SourceMapConsumer;
-var cssTree = require('css-tree');
-
-
-function parseFileName(filePath) {
-  return path.resolve(process.cwd(), filePath);
-}
-
-commander
-  // .usage('[options]')
-  .description('Generate coverage info for a CSS file against an HTML file. This supports loading sourcemaps by using the sourceMappingURL=FILENAME.map CSS comment')
-  .option('--html [path/to/file.html]', 'path to a local HTML file', parseFileName) // TODO: Support multiple
-  .option('--css [path/to/file.css]', 'path to a local CSS file', parseFileName)
-  .option('--lcov [path/to/output.lcov]', 'the LCOV output file', parseFileName)
-  .option('--verbose', 'verbose/debugging output')
-  .option('--ignore-source-map', 'disable loading the sourcemap if one is found')
-  .option('--cover-declarations', 'try to cover CSS declarations as well as selectors (best-effort, difficult with sourcemaps)')
-  .parse(process.argv);
-
-// Validate args
-if (!commander.html && !commander.css) {
-  commander.help();
-}
-if (commander.html) {
-  if (!fs.statSync(commander.html).isFile()) {
-    console.error('ERROR: Invalid argument. HTML file not found at ' + commander.html);
-    process.exit(1);
-  }
-} else {
-  console.error('ERROR: Missing argument. At least 1 HTML file must be specified');
-  process.exit(1);
-}
-if (commander.css) {
-  if (!fs.statSync(commander.css).isFile()) {
-    console.error('ERROR: Invalid argument. CSS file not found at ' + commander.css);
-    process.exit(1);
-  }
-} else {
-  console.error('ERROR: Missing argument. A CSS file must be specified');
-  process.exit(1);
-}
-
-var CSS_STR = fs.readFileSync(commander.css, 'utf8');
-var ast;
-try {
-  ast = cssTree.parse(CSS_STR, { filename: commander.css, positions: true });
-} catch (e) {
-  // CssSyntaxError
-  console.error('CssSyntaxError: ' + e.message + ' @ ' + e.line + ':' + e.column);
-  throw e;
-}
-
-var cssForPhantom = [];
-cssTree.walkRules(ast, (rule) => {
-  if ('Atrule' === rule.type) {
-    // ignore
-  } else if ('Rule' === rule.type) {
-    var converted = rule.prelude.children.map((selector) => {
-      return cssTree.translate(selector)
-    })
-    cssForPhantom.push(converted)
-  } else {
-    throw new Error('BUG: Forgot to handle this rule subtype: ' + rule.type)
-  }
-})
-
-// Check if there is a sourceMappingURL
-var sourceMapConsumer = null;
-if (!commander.ignoreSourceMap && /sourceMappingURL=([^\ ]*)/.exec(CSS_STR)) {
-  var sourceMapPath = /sourceMappingURL=([^\ ]*)/.exec(CSS_STR)[1];
-  sourceMapPath = path.resolve(path.dirname(commander.css), sourceMapPath);
-  if (commander.verbose) {
-    console.error('Using sourceMappingURL at ' + sourceMapPath);
-  }
-  var sourceMapStr = fs.readFileSync(sourceMapPath);
-  var sourceMap = JSON.parse(sourceMapStr);
-  sourceMapConsumer = new SourceMapConsumer(sourceMap);
-
-  // sourceMapConsumer.eachMapping(function (m) { console.log(m.generatedLine, m.source); });
-}
-
-
-var phantomCSSJSON = JSON.stringify(cssForPhantom);
-
-var coverageOutput = [];
-var program = phantomjs.exec(path.resolve(__dirname, '../phantom-coverage.js'), require.resolve('sizzle'), commander.html, phantomCSSJSON);
-program.stderr.pipe(process.stderr);
-if (commander.verbose) {
-  program.stdout.pipe(process.stderr);
-}
-// Collect the coverage info that is written by the phantom script.
-program.stdout.on('data', function(data) {
-  data.toString().split('\n').forEach(function (entry) {
-    if (entry.trim()) {
-      try {
-        var parsedJSON = JSON.parse(entry);
-        coverageOutput.push(parsedJSON);
-      } catch (e) {
-        console.warn(entry);
-      }
-    }
-  });
-});
-program.on('exit', function(code) {
-  // if success, then write out the LCOV file
-  if (code === 0) {
-
-    var lcovStr = generateLcovStr(coverageOutput);
-    if (commander.lcov) {
-      fs.writeFileSync(commander.lcov, lcovStr);
-    } else {
-      console.log(lcovStr);
-    }
-  }
-  // do something on end
-  process.exit(code);
-});
-
-
-function generateLcovStr(coverageOutput) {
-  // coverageOutput is of the form:
-  // [[1, ['body']], [400, ['div.foo']]]
-  // where each entry is a pair of count, selectors
-  var expected = cssForPhantom.length;
-  var actual = coverageOutput.length;
-  if (expected !== actual) {
-    throw new Error('BUG: count lengths do not match. Expected: ' + expected + ' Actual: ' + actual);
-  }
-
-  var files = {}; // key is filename, value is [{startLine, endLine, count}]
-  var ret = []; // each line in the lcov file. Joined at the end of the function
-
-  var cssLines = CSS_STR.split('\n');
-
-  function addCoverage(fileName, count, startLine, endLine) {
-    // add it to the files
-    if (!files[fileName]) {
-      files[fileName] = [];
-    }
-    files[fileName].push({startLine: startLine, endLine: endLine, count: count});
-  }
-
-  var i = -1;
-  cssTree.walkRules(ast, (rule, item, list) => {
-    if ('Rule' !== rule.type) {
-      return // Skip AtRules
-    }
-
-    i += 1;
-
-    var count = coverageOutput[i][0];
-    var fileName;
-    var startLine;
-    var endLine;
-    // Look up the source map (if available)
-    if (sourceMapConsumer) {
-      // From https://github.com/mozilla/source-map#sourcemapconsumerprototypeoriginalpositionforgeneratedposition
-      // Could have been {line: rule.position.start.line, column: rule.positoin.start.column}
-      var origStart = rule.loc.start;
-      var origEnd = rule.loc.end;
-
-      if (commander.coverDeclarations) {
-
-        // Loop over every character between origStart and origEnd to make sure they are covered
-        // TODO: Do not duplicate-count lines just because this code runs character-by-character
-        var parseColumn = origStart.column;
-        for (var parseLine=origStart.line; parseLine <= origEnd.line; parseLine++) {
-          var curLineText = cssLines[parseLine - 1];
-          for (var curColumn=parseColumn-1; curColumn < curLineText.length; curColumn++) {
-            var info = sourceMapConsumer.originalPositionFor({line: parseLine, column: curColumn});
-            // stop processing when we hit origEnd
-            if (parseLine === origEnd.line && curColumn >= origEnd.column) {
-              break;
-            }
-            if (/\s/.test(curLineText[curColumn])) {
-              continue;
-            }
-            // console.error('PHIL ', curLineText[curColumn], {line: parseLine, column: curColumn}, info);
-            if (info.source) {
-              addCoverage(info.source, count, info.line, info.line);
-            } else {
-              if (commander.verbose) {
-                console.error('BUG: Could not look up source for this range:');
-                console.error('origStart', origStart);
-                console.error('origEnd', origEnd);
-                console.error('currIndexes', {line: parseLine, column: curColumn});
-              }
-            }
-          }
-          parseColumn = 1;
-        }
-
-
-      } else {
-        // Just cover the selectors
-        var startInfo = sourceMapConsumer.originalPositionFor({line: origStart.line, column: origStart.column-1});
-        var endInfo = sourceMapConsumer.originalPositionFor({line: origEnd.line, column: origEnd.column-2});
-
-        // When there is no match, startInfo.source is null
-        if (!startInfo.source /*|| startInfo.source !== endInfo.source*/) {
-          console.error('cssStart', JSON.stringify(origStart));
-          console.error('cssEnd', JSON.stringify(origEnd));
-          // console.error('sourceStart', JSON.stringify(startInfo));
-          // console.error('sourceEnd', JSON.stringify(endInfo));
-          throw new Error('BUG: sourcemap might be invalid. Maybe try regenerating it?');
-        } else {
-          if (commander.verbose) {
-            console.error('DEBUG: MATCHED this one', JSON.stringify(startInfo));
-          }
-        }
-
-        addCoverage(startInfo.source, count, startInfo.line, startInfo.line);
-      }
-
-
-    } else {
-      // No sourceMap available
-      fileName = commander.css;
-      startLine = rule.loc.start.line;
-      if (commander.coverDeclarations) {
-        endLine = rule.loc.end.line;
-      } else {
-        endLine = startLine; // Just do the selector (startLine)
-      }
-      addCoverage(fileName, count, startLine, endLine);
-    }
-
-  });
-
-  for (var fileName in files) {
-
-    var nonZero = 0; // For summary info
-    var allCounter = 0;
-    var fileNamePrefix = sourceMapPath ? path.dirname(sourceMapPath) : '';
-    ret.push('SF:' + path.resolve(fileNamePrefix, fileName));
-
-    files[fileName].forEach(function(entry) {
-      var startLine = entry.startLine;
-      var endLine = entry.endLine;
-      var count = entry.count;
-
-      for (var line=startLine; line <= endLine; line++) {
-        ret.push('DA:' + line + ',' + count);
-        if (count > 0) {
-          nonZero += 1;
-        }
-        allCounter += 1;
-      }
-
-    });
-
-    // Include summary info for the file
-    ret.push('LH:' + nonZero);
-    ret.push('LF:' + allCounter);
-    ret.push('end_of_record');
-  }
-
-  return ret.join('\n');
-}
+require('../src/runCoverage')

package.json

@@ -1,12 +1,20 @@
 {
   "name": "css-coverage",
   "version": "0.2.6",
+  "scripts": {
+    "test": "standard --fix"
+  },
   "dependencies": {
+    "bunyan": "^1.8.12",
+    "bunyan-format": "^0.2.1",
     "commander": "2.16.0",
     "css-tree": "1.0.0-alpha25",
+    "dotenv": "^6.0.0",
     "phantomjs-prebuilt": "2.1.16",
+    "puppeteer": "^1.5.0",
     "sizzle": "2.3.3",
-    "source-map": "0.5.6"
+    "source-map": "0.5.6",
+    "standard": "^11.0.1"
   },
   "bin": {
     "css-coverage": "bin/css-coverage"