Merge pull request #12 from openstax/unsupported-declarations

feat: mark unsupported declarations

Author: philschatz

package.json

@@ -3,7 +3,7 @@
   "version": "1.3.1",
   "scripts": {
     "pretest": "sass --source-map ./test/test.scss ./test/test.css",
-    "test": "./bin/css-coverage.js --cover-declarations --html ./test/test.html --css ./test/test.css --lcov ./test/test.lcov",
+    "test": "./bin/css-coverage.js --html ./test/test.html --css ./test/test.css --lcov ./test/test.lcov --ignore-declarations 'move-to,move-foobar'",
     "test-debug": "node --inspect-brk ./bin/css-coverage.js --cover-declarations --html ./test/test.html --css ./test/test.css --lcov ./test/test.lcov",
     "posttest": "standard --fix"
   },

src/runCoverage.js

@@ -19,6 +19,10 @@ function parseFileName (filePath) {
   return path.resolve(process.cwd(), filePath)
 }
 
+function parseTokenList (tokenString) {
+  return tokenString.split(',').map(token => token.trim().toLowerCase())
+}
+
 const STATUS_CODE = {
   ERROR: 111,
   OK: 0
@@ -32,7 +36,7 @@ commander
   .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)')
+  .option('--ignore-declarations [move-to,content]', 'A comma-separated list of declarations to ignore', parseTokenList)
   .parse(process.argv)
 
 // Validate args
@@ -69,11 +73,24 @@ try {
 }
 
 const cssRules = []
+const cssDeclarations = {} // so it is serializable to the browser
+
 cssTree.walkRules(ast, (rule) => {
   if (rule.type === 'Atrule') {
     // ignore
   } else if (rule.type === 'Rule') {
     const converted = rule.prelude.children.map((selector) => {
+      rule.block.children.each(declaration => {
+        if (commander.ignoreDeclarations.indexOf(declaration.property.toLowerCase()) >= 0) {
+          return // skip because it is ignored
+        }
+        // Append to a list of locations
+        const key = cssTree.translate(declaration)
+        let locs = cssDeclarations[key]
+        locs = locs || []
+        locs.push(declaration.loc)
+        cssDeclarations[key] = locs
+      })
       return cssTree.translate(selector)
     })
     cssRules.push(converted)
@@ -152,7 +169,7 @@ async function runCoverage () {
   })
 
   log.debug(`Calculating coverage`)
-  const coverageOutput = await page.evaluate(cssRules => {
+  const { matchedSelectors: coverageOutput, supportedDeclarations } = await page.evaluate((cssRules, cssDeclarations) => {
     // This is the meat of the code. It runs inside the browser
     console.log(`Starting evaluation`)
     const rules = cssRules
@@ -165,7 +182,7 @@ async function runCoverage () {
       window.Sizzle.selectors.pseudos[pseudo] = function (elem) { return elem }
     })
 
-    const ret = []
+    const matchedSelectors = []
     rules.forEach(function (selectors) {
       console.log(`Checking selector: "${JSON.stringify(selectors)}"`)
 
@@ -194,20 +211,30 @@ async function runCoverage () {
 
       console.log(`Found ${count} matche(s)`)
 
-      ret.push([count, selectors])
+      matchedSelectors.push([count, selectors])
     })
 
     console.log(`Finished checking selectors`)
-    return ret
-  }, cssRules)
+
+    console.log(`Checking if declarations are understandable by the browser`)
+    const supportedDeclarations = []
+    for (const decl of cssDeclarations) {
+      if (window.CSS.supports(decl)) {
+        supportedDeclarations.push(decl)
+      } else {
+        console.warn(`Unsupported declaration ${decl}`)
+      }
+    }
+    return { matchedSelectors, supportedDeclarations }
+  }, cssRules, Object.keys(cssDeclarations))
 
   log.debug('Closing browser')
   await browser.close()
 
   log.debug('Finished evaluating selectors')
   log.info('Generating LCOV string...')
 
-  const lcovStr = await generateLcovStr(coverageOutput)
+  const lcovStr = await generateLcovStr(coverageOutput, supportedDeclarations)
   if (commander.lcov) {
     fs.writeFileSync(commander.lcov, lcovStr)
   } else {
@@ -223,7 +250,7 @@ runCoverage()
     process.exit(STATUS_CODE.ERROR)
   })
 
-async function generateLcovStr (coverageOutput) {
+async function generateLcovStr (coverageOutput, supportedDeclarations) {
   // coverageOutput is of the form:
   // [[1, ['body']], [400, ['div.foo']]]
   // where each entry is a pair of count, selectors
@@ -247,11 +274,28 @@ async function generateLcovStr (coverageOutput) {
     sourceMapPath = realConsumer.sourceMapPath
   }
 
+  function getStartInfo (origStart, origEnd) {
+    const startInfo = sourceMapConsumer.originalPositionFor({ line: origStart.line, column: origStart.column - 1 })
+    // const 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))
+      origEnd && 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))
+      }
+    }
+    return startInfo
+  }
+
   const files = {} // key is filename, value is [{startLine, endLine, count}]
   const ret = [] // each line in the lcov file. Joined at the end of the function
 
-  const cssLines = CSS_STR.split('\n')
-
   function addCoverage (fileName, count, startLine, endLine) {
     // add it to the files
     if (!files[fileName]) {
@@ -279,55 +323,8 @@ async function generateLcovStr (coverageOutput) {
       const origStart = rule.loc.start
       const 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
-        let parseColumn = origStart.column
-        for (let parseLine = origStart.line; parseLine <= origEnd.line; parseLine++) {
-          const curLineText = cssLines[parseLine - 1]
-          for (let curColumn = parseColumn - 1; curColumn < curLineText.length; curColumn++) {
-            const 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
-        const startInfo = sourceMapConsumer.originalPositionFor({ line: origStart.line, column: origStart.column - 1 })
-        // const 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)
-      }
+      const startInfo = getStartInfo(origStart, origEnd)
+      addCoverage(startInfo.source, count, startInfo.line, startInfo.line)
     } else {
       // No sourceMap available
       fileName = commander.css
@@ -341,6 +338,15 @@ async function generateLcovStr (coverageOutput) {
     }
   })
 
+  // Mark all the unsupported declarations
+  const unsupportedDeclarations = Object.keys(cssDeclarations).filter(decl => supportedDeclarations.indexOf(decl) < 0)
+  for (const decl of unsupportedDeclarations) {
+    for (const loc of cssDeclarations[decl]) {
+      const startInfo = getStartInfo(loc.start)
+      addCoverage(startInfo.source, 0, startInfo.line, startInfo.line)
+    }
+  }
+
   for (const fileName in files) {
     let nonZero = 0 // For summary info
     let allCounter = 0