Add selector complexity (#140)

* add selector complexity

* fix tests

Author: bartveneman

package-lock.json

@@ -59,6 +59,7 @@
     "css-media-query-browser-h4cks-analyzer": "^1.0.0",
     "css-property-browser-h4cks-analyzer": "^1.1.0",
     "css-selector-browser-h4cks-analyzer": "^1.1.0",
+    "css-selector-complexity": "^0.1.1",
     "css-shorthand-expand": "^1.2.0",
     "css-unit-sort": "^3.3.0",
     "css-value-browser-h4cks-analyzer": "^1.0.1",

package.json

@@ -122,6 +122,14 @@ analyze('foo{}')
 //   'selectors.browserhacks.total': 0,
 //   'selectors.browserhacks.unique': [],
 //   'selectors.browserhacks.totalUnique': 0,
+//   'selectors.complexity.average': 1,
+//   'selectors.complexity.max.count': 1,
+//   'selectors.complexity.max.value': 1,
+//   'selectors.complexity.max.selectors': [{value: 'foo', count: 1}],
+//   'selectors.complexity.max.count': 1,
+//   'selectors.complexity.sum': 1,
+//   'selectors.complexity.unique': [{value: 1, count: 1}],
+//   'selectors.complexity.totalUnique': 1,
 //   'stylesheets.cohesion.average': 0,
 //   'stylesheets.cohesion.min.count': 0,
 //   'stylesheets.cohesion.min.value': null,
@@ -130,6 +138,8 @@ analyze('foo{}')
 //   '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,

readme.md

@@ -0,0 +1,36 @@
+const selectorComplexity = require('css-selector-complexity')
+const uniquer = require('../../utils/uniquer')
+
+module.exports = selectors => {
+  const all = selectors.map(selector => {
+    return {
+      selector,
+      complexity: selectorComplexity(selector)
+    }
+  })
+  const allComplexities = all.map(selector => selector.complexity)
+  const maxComplexity = all.length === 0 ? 0 : Math.max(...allComplexities)
+  const {
+    unique: mostComplexSelectors,
+    totalUnique: mostComplexSelectorsCount
+  } = uniquer(
+    all
+      .filter(({complexity}) => complexity === maxComplexity)
+      .map(({selector}) => selector)
+  )
+  const unique = uniquer(allComplexities)
+  const totalComplexity = allComplexities.reduce((acc, curr) => acc + curr, 0)
+  const averageComplexityPerSelector =
+    all.length === 0 ? 0 : totalComplexity / all.length
+
+  return {
+    max: {
+      value: maxComplexity,
+      selectors: mostComplexSelectors,
+      count: mostComplexSelectorsCount
+    },
+    average: averageComplexityPerSelector,
+    sum: totalComplexity,
+    ...unique
+  }
+}

src/analyzer/selectors/complexity.js

@@ -7,6 +7,7 @@ module.exports = selectors => {
   const accessibility = require('./accessibility.js')(all)
   const specificity = require('./specificity.js')(all)
   const identifiers = require('./identifiers.js')(all)
+  const complexity = require('./complexity.js')(all)
   const browserhacks = require('./browserhacks.js')(all)
 
   return {
@@ -18,6 +19,7 @@ module.exports = selectors => {
     accessibility,
     specificity,
     identifiers,
+    complexity,
     browserhacks
   }
 }

src/analyzer/selectors/index.js

@@ -35,6 +35,6 @@ module.exports.isKeyframes = rule => {
   return (
     rule.parent &&
     rule.parent.type === 'atrule' &&
-    rule.parent.name === 'keyframes'
+    rule.parent.name.includes('keyframes')
   )
 }

src/parser/atrules.js

@@ -102,6 +102,13 @@ test('it returns the correct analysis object structure', async t => {
     'selectors.browserhacks.total': 0,
     'selectors.browserhacks.unique': [],
     'selectors.browserhacks.totalUnique': 0,
+    'selectors.complexity.average': 1,
+    'selectors.complexity.max.value': 1,
+    'selectors.complexity.max.selectors': [{value: 'foo', count: 1}],
+    'selectors.complexity.max.count': 1,
+    'selectors.complexity.sum': 1,
+    'selectors.complexity.unique': [{value: 1, count: 1}],
+    'selectors.complexity.totalUnique': 1,
     'stylesheets.cohesion.average': 0,
     'stylesheets.cohesion.min.count': 0,
     'stylesheets.cohesion.min.value': null,

test/analyzer/index.js

@@ -0,0 +1,87 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/selectors/complexity')
+
+test('it responds with the correct structure', t => {
+  const fixture = []
+  const actual = analyze(fixture)
+  const expected = {
+    max: {
+      value: 0,
+      count: 0,
+      selectors: []
+    },
+    average: 0,
+    sum: 0,
+    unique: [],
+    totalUnique: 0
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+const FIXTURE = [
+  'a b c',
+  'a b',
+  'a b c d',
+  'a b c d e',
+  'a b c d e f',
+  'g h i j k l'
+]
+
+test('it finds the selectors with the highest complexity', t => {
+  const {max: actual} = analyze(FIXTURE)
+  const expected = {
+    value: 6,
+    count: 2,
+    selectors: [
+      {value: 'a b c d e f', count: 1},
+      {value: 'g h i j k l', count: 1}
+    ]
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('it finds the selectors with the highest complexity and only shows the unique ones', t => {
+  const {max: actual} = analyze([...FIXTURE, 'a b c d e f'])
+  const expected = {
+    value: 6,
+    count: 2,
+    selectors: [
+      {value: 'a b c d e f', count: 2},
+      {value: 'g h i j k l', count: 1}
+    ]
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('it counts the sum of all selector complexities', t => {
+  const {sum: actual} = analyze(FIXTURE)
+  const expected = 3 + 2 + 4 + 5 + 6 + 6
+  t.is(actual, expected)
+})
+
+test('it finds all unique complexities of all selectors', t => {
+  const {unique: actual} = analyze(FIXTURE)
+  const expected = [
+    {value: 2, count: 1},
+    {value: 3, count: 1},
+    {value: 4, count: 1},
+    {value: 5, count: 1},
+    {value: 6, count: 2}
+  ]
+  t.deepEqual(actual, expected)
+})
+
+test('it finds the total unique complexities of all selectors', t => {
+  const {totalUnique: actual} = analyze(FIXTURE)
+  const expected = 5
+  t.deepEqual(actual, expected)
+})
+
+test('it calculates the average complexity per selector', t => {
+  const {average: actual} = analyze(FIXTURE)
+
+  t.is(actual, 26 / 6)
+})

test/analyzer/selectors/complexity.js

@@ -20,6 +20,11 @@ test('"selectors" in @keyframes are not passed as actual selectors', async t =>
       no-selector-1 { opacity: 1 }
       no-selector-2 { opacity: 0 }
     }
+
+    @-webkit-keyframes {
+      0% { opacity: 0 }
+      100% { opacity: 1 }
+    }
   `
 
   const {selectors: actual} = await parser(fixture)