implement LOC metrics (#138)

* implement LOC metrics

* fixed a test that has NEVER worked

Author: bartveneman

package-lock.json

@@ -2,6 +2,10 @@
   "name": "@projectwallace/css-analyzer",
   "version": "2.4.0",
   "author": "Bart Veneman",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/projectwallace/css-analyzer"
+  },
   "homepage": "https://www.projectwallace.com/oss",
   "issues": "https://github.com/projectwallace/css-analyzer/issues",
   "license": "MIT",
@@ -65,6 +69,7 @@
     "postcss": "^7.0.14",
     "postcss-values-parser": "^3.0.2",
     "specificity": "^0.4.1",
+    "split-lines": "^2.0.0",
     "string-natural-compare": "^2.0.3",
     "tinycolor2": "^1.4.1",
     "vendor-prefixes": "^1.0.0"

package.json

@@ -16,11 +16,13 @@ module.exports = async rawCss => {
   const values = require('./values')(css.declarations)
   const stylesheets = require('./stylesheets')({
     rawCss,
+    css,
     atrules,
     rules: css.rules,
     selectors,
     properties,
-    values
+    values,
+    declarations
   })
 
   return Promise.resolve(

src/analyzer/index.js

@@ -1,4 +1,12 @@
-module.exports = ({rawCss, atrules, rules, selectors, properties, values}) => {
+module.exports = ({
+  rawCss,
+  css,
+  atrules,
+  rules,
+  selectors,
+  properties,
+  values
+}) => {
   const filesize = require('./size.js')(rawCss)
   const simplicity = require('./simplicity.js')(rules, selectors)
   const cohesion = require('./cohesion.js')(rules)
@@ -8,12 +16,19 @@ module.exports = ({rawCss, atrules, rules, selectors, properties, values}) => {
     properties,
     values
   )
+  const linesOfCode = require('./lines-of-code')({
+    rawCss,
+    atRules: css.atRules,
+    selectors: css.selectors,
+    declarations: css.declarations
+  })
 
   return {
     size: filesize.uncompressed.totalBytes,
     filesize,
     simplicity,
     cohesion,
-    browserhacks
+    browserhacks,
+    linesOfCode
   }
 }

src/analyzer/stylesheets/index.js

@@ -0,0 +1,14 @@
+const splitLines = require('split-lines')
+
+module.exports = ({rawCss, atRules, selectors, declarations}) => {
+  const totalLinesOfCode = splitLines(rawCss).length
+  const totalSourceLinesOfCode =
+    atRules.length + selectors.length + declarations.length
+
+  return {
+    total: totalLinesOfCode,
+    sourceLinesOfCode: {
+      total: totalSourceLinesOfCode
+    }
+  }
+}

src/analyzer/stylesheets/lines-of-code.js

@@ -110,6 +110,8 @@ test('it returns the correct analysis object structure', async t => {
     'stylesheets.filesize.compressed.gzip.compressionRatio': -4,
     'stylesheets.filesize.compressed.gzip.totalBytes': 25,
     'stylesheets.filesize.uncompressed.totalBytes': 5,
+    'stylesheets.linesOfCode.sourceLinesOfCode.total': 1,
+    'stylesheets.linesOfCode.total': 1,
     'stylesheets.simplicity': 1,
     'stylesheets.size': 5,
     'stylesheets.browserhacks.total': 0,

test/analyzer/index.js

@@ -13,7 +13,12 @@ const FIXTURE = {
     supports: {browserhacks: {total: 0, totalUnique: 0}}
   },
   properties: {browserhacks: {total: 0, totalUnique: 0}},
-  values: {browserhacks: {total: 0, totalUnique: 0}}
+  values: {browserhacks: {total: 0, totalUnique: 0}},
+  css: {
+    atRules: [],
+    selectors: [],
+    declarations: []
+  }
 }
 
 test('it responds with the correct structure', t => {
@@ -45,6 +50,7 @@ test('it responds with the correct structure', t => {
     browserhacks: {
       total: 0,
       totalUnique: 0
-    }
+    },
+    linesOfCode: {total: 1, sourceLinesOfCode: {total: 0}}
   })
 })

test/analyzer/stylesheets/index.js

@@ -0,0 +1,82 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/stylesheets/lines-of-code')
+
+const EMPTY_FIXTURE = {
+  rawCss: '',
+  atRules: [],
+  selectors: [],
+  declarations: []
+}
+
+test('it counts lines of code', t => {
+  t.is(1, analyze(EMPTY_FIXTURE).total)
+  t.is(1, analyze({...EMPTY_FIXTURE, rawCss: 'foo{}'}).total)
+  t.is(1, analyze({...EMPTY_FIXTURE, rawCss: 'a { color: red; }'}).total)
+  t.is(
+    3,
+    analyze({
+      ...EMPTY_FIXTURE,
+      rawCss: `a {
+        color: red;
+      }`
+    }).total
+  )
+  t.is(
+    7,
+    analyze({
+      ...EMPTY_FIXTURE,
+      rawCss: `a {
+        color: red;
+      }
+
+      b {
+        color: green;
+      }`
+    }).total
+  )
+
+  t.is(
+    11,
+    analyze({
+      ...EMPTY_FIXTURE,
+      rawCss: `/**
+        * 3 comment lines
+        */
+
+      a {
+        color: red;
+      }
+
+      b {
+        color: green;
+      }`
+    }).total
+  )
+})
+
+test('it counts source lines of code', t => {
+  t.is(0, analyze(EMPTY_FIXTURE).sourceLinesOfCode.total)
+  t.is(
+    1,
+    analyze({...EMPTY_FIXTURE, selectors: ['foo']}).sourceLinesOfCode.total
+  )
+  t.is(
+    4,
+    analyze({
+      ...EMPTY_FIXTURE,
+      atRules: [
+        {
+          type: 'media',
+          params: '(min-width: 1em)'
+        }
+      ],
+      selectors: ['.selector', '#selector'],
+      declarations: [
+        {
+          property: 'color',
+          value: 'red'
+        }
+      ]
+    }).sourceLinesOfCode.total
+  )
+})

test/analyzer/stylesheets/lines-of-code.js

@@ -1,24 +1,22 @@
-const {promisify} = require('util')
-const {readFile} = require('fs')
+const {readFileSync} = require('fs')
 const {join} = require('path')
 const test = require('ava')
 const analyze = require('../../src/analyzer')
 
-const readFileAsync = promisify(readFile)
-
 test('it analyzes large CSS files without errors - facebook', async t => {
-  const css = await readFileAsync(join(__dirname, '/facebook-20190319.css'))
+  const css = readFileSync(join(__dirname, '/facebook-20190319.css'), 'utf8')
   await t.notThrowsAsync(analyze(css))
 })
 
 test('it analyzes large CSS files without errors - css-tricks', async t => {
-  const css = await readFileAsync(join(__dirname, '/css-tricks-20190319.css'))
+  const css = readFileSync(join(__dirname, '/css-tricks-20190319.css'), 'utf8')
   await t.notThrowsAsync(analyze(css))
 })
 
 test('it analyzes large CSS files without errors - smashing magazine', async t => {
-  const css = await readFileAsync(
-    join(__dirname, '/smashing-magazine-20190319.css')
+  const css = readFileSync(
+    join(__dirname, '/smashing-magazine-20190319.css'),
+    'utf8'
   )
   await t.notThrowsAsync(analyze(css))
 })