report rule with most (and least) selectors (#130)

* report rule with most (and least) selectors

* update readme

Author: bartveneman

readme.md

@@ -87,6 +87,13 @@ analyze('foo{}')
 //   'properties.unique': [],
 //   'rules.total': 1,
 //   'rules.empty.total': 1,
+//   'rules.selectors.max': 1,
+//   'rules.selectors.min': 1,
+//   'rules.selectors.minimum.count': 1,
+//   'rules.selectors.minimum.value': ['foo'],
+//   'rules.selectors.maximum.count': 1,
+//   'rules.selectors.maximum.value': ['foo'],
+//   'rules.selectors.average': 1,
 //   'selectors.accessibility.total': 0,
 //   'selectors.accessibility.totalUnique': 0,
 //   'selectors.accessibility.unique': [],

src/analyzer/rules/index.js

@@ -1,25 +1,58 @@
+const compareStrings = require('string-natural-compare')
+
 const isEmpty = rule => {
-  return rule.declarationsCount === 0
+  return rule.declarations.length === 0
 }
 
 module.exports = rules => {
   const all = rules
+  const total = all.length
   const empty = rules.filter(isEmpty)
 
-  const selectorsPerRule = rules.map(({selectorsCount}) => selectorsCount)
+  // We only want to deal with rules that have selectors.
+  // While parsing the CSS we have stripped the 'selectors' from
+  // @keyframes, so we need to ignore the accompanying
+  // declarations here too
+  const rulesSortedBySelectorCount = [...all]
+    .filter(({selectors}) => selectors.length > 0)
+    .sort((a, b) => {
+      if (a.selectors.length === b.selectors.length) {
+        return compareStrings.caseInsensitive(
+          a.selectors.join(''),
+          b.selectors.join('')
+        )
+      }
+
+      return a.selectors.length - b.selectors.length
+    })
+  const ruleWithLeastSelectors = [...rulesSortedBySelectorCount].shift()
+  const ruleWithMostSelectors = [...rulesSortedBySelectorCount].pop()
+
+  const selectorsPerRule = all.map(({selectors}) => selectors.length)
+  const averageSelectorsPerRule =
+    total === 0
+      ? 0
+      : selectorsPerRule.reduce((acc, curr) => acc + curr, 0) / total
 
   return {
-    total: all.length,
+    total,
     empty: {
       total: empty.length
     },
     selectors: {
-      min: selectorsPerRule.length > 0 ? Math.min(...selectorsPerRule) : 0,
-      max: selectorsPerRule.length > 0 ? Math.max(...selectorsPerRule) : 0,
-      average:
-        selectorsPerRule.length > 0
-          ? selectorsPerRule.reduce((acc, curr) => acc + curr, 0) / rules.length
-          : 0
+      /** @deprecated */
+      min: total === 0 ? 0 : ruleWithLeastSelectors.selectors.length,
+      /** @deprecated */
+      max: total === 0 ? 0 : ruleWithMostSelectors.selectors.length,
+      average: averageSelectorsPerRule,
+      minimum: {
+        count: total === 0 ? 0 : ruleWithLeastSelectors.selectors.length,
+        value: total === 0 ? [] : ruleWithLeastSelectors.selectors
+      },
+      maximum: {
+        count: total === 0 ? 0 : ruleWithMostSelectors.selectors.length,
+        value: total === 0 ? [] : ruleWithMostSelectors.selectors
+      }
     }
   }
 }

src/parser/declarations.js

@@ -1,6 +1,7 @@
+const IGNORE_FROM_PARENT = 'font-face'
+
 module.exports = tree => {
   const declarations = []
-  const IGNORE_FROM_PARENT = 'font-face'
 
   tree.walkDecls(declaration => {
     if (declaration.parent.name === IGNORE_FROM_PARENT) {
@@ -10,7 +11,7 @@ module.exports = tree => {
     declarations.push({
       // Need to prefix with the 'before', otherwise PostCSS will
       // trim off any browser hacks prefixes like * or _
-      property: `${declaration.raws.before.trim()}${declaration.prop}`,
+      property: declaration.raws.before.trim() + declaration.prop,
       value: declaration.value,
       important: Boolean(declaration.important)
     })

src/parser/rules.js

@@ -1,23 +1,16 @@
 const {isKeyframes} = require('./atrules')
+const getDeclarationsFromRule = require('./declarations')
+const {getSelectorsFromRule} = require('./selectors')
 
 module.exports = tree => {
   const rules = []
 
   tree.walkRules(rule => {
-    // Count declarations per rule
-    let declarationsCount = 0
+    const declarations = getDeclarationsFromRule(rule)
+    // Don't include the 'selectors' (from, 50%, to, etc.) inside @keyframes
+    const selectors = isKeyframes(rule) ? [] : getSelectorsFromRule(rule)
 
-    rule.walkDecls(() => {
-      declarationsCount += 1
-    })
-
-    // Count selectors per rule, but don't include the 'selectors'
-    // (from, 50%, to, etc.) inside @keyframes
-    const selectorsCount = isKeyframes(rule)
-      ? 0
-      : rule.selector.split(',').length
-
-    rules.push({declarationsCount, selectorsCount})
+    rules.push({declarations, selectors})
   })
 
   return rules

src/parser/selectors.js

@@ -10,8 +10,14 @@ module.exports = tree => {
     }
 
     // Get selectors: flatten the list, split each by ',' and trim the results
-    selectors.push(...rule.selector.split(',').map(s => s.trim()))
+    selectors.push(...getSelectorsFromRule(rule))
   })
 
   return selectors
 }
+
+const getSelectorsFromRule = rule => {
+  return rule.selector.split(',').map(s => s.trim())
+}
+
+module.exports.getSelectorsFromRule = getSelectorsFromRule

test/analyzer/index.js

@@ -70,6 +70,10 @@ test('Returns the correct analysis object structure', async t => {
     'rules.selectors.max': 1,
     'rules.selectors.min': 1,
     'rules.selectors.average': 1,
+    'rules.selectors.maximum.count': 1,
+    'rules.selectors.maximum.value': ['foo'],
+    'rules.selectors.minimum.count': 1,
+    'rules.selectors.minimum.value': ['foo'],
     'selectors.accessibility.total': 0,
     'selectors.accessibility.totalUnique': 0,
     'selectors.accessibility.unique': [],

test/analyzer/rules/index.js

@@ -10,49 +10,105 @@ test('it responds with the correct structure', t => {
       total: 0
     },
     selectors: {
-      min: 0,
-      max: 0,
+      min: 0 /** @deprecated */,
+      minimum: {
+        count: 0,
+        value: []
+      },
+      max: 0 /** @deprecated */,
+      maximum: {
+        count: 0,
+        value: []
+      },
       average: 0
     }
   })
 })
 
 test('it counts basic rules', t => {
-  const {total} = analyze([{declarationsCount: 1}, {declarationsCount: 8}])
+  const {total} = analyze([
+    {declarations: [], selectors: ['a']},
+    {declarations: [], selectors: ['b']}
+  ])
   t.is(total, 2)
 })
 
 test('it counts empty rules', t => {
-  const {
-    empty: {total}
-  } = analyze([{declarationsCount: 1}, {declarationsCount: 0}])
+  const actual = analyze([
+    {
+      declarations: [{property: 'a', value: 'a', important: false}],
+      selectors: ['a']
+    },
+    {declarations: [], selectors: ['a']}
+  ])
   const expected = 1
-  t.is(total, expected)
+  t.is(actual.empty.total, expected)
 })
 
 test('it counts the average selectors per rule', t => {
-  const {
-    selectors: {average}
-  } = analyze([{selectorsCount: 1}, {selectorsCount: 4}])
+  const actual = analyze([
+    {selectors: ['a', 'b', 'c', 'd'], declarations: []},
+    {selectors: ['a'], declarations: []}
+  ])
   const expected = 2.5
 
-  t.is(average, expected)
+  t.is(actual.selectors.average, expected)
+})
+
+test('it counts the minimum selectors per rule', t => {
+  const actual = analyze([
+    {selectors: ['a', 'b', 'c', 'd'], declarations: []},
+    {selectors: ['a'], declarations: []}
+  ])
+
+  t.is(actual.selectors.minimum.count, 1)
+  t.deepEqual(actual.selectors.minimum.value, ['a'])
+})
+
+test('it counts the maximum selectors per rule', t => {
+  const actual = analyze([
+    {selectors: ['a', 'b', 'c', 'd'], declarations: []},
+    {selectors: ['a'], declarations: []}
+  ])
+
+  t.is(actual.selectors.maximum.count, 4)
+  t.deepEqual(actual.selectors.maximum.value, ['a', 'b', 'c', 'd'])
+})
+
+test('it sorts the minimum selectors per rule by string length and alphabetically', t => {
+  const actual = analyze([
+    {selectors: ['aa'], declarations: []},
+    {selectors: ['A'], declarations: []},
+    {selectors: ['b'], declarations: []},
+    {selectors: ['bb'], declarations: []}
+  ])
+
+  t.is(actual.selectors.minimum.count, 1)
+  t.deepEqual(actual.selectors.minimum.value, ['A'])
 })
 
+/**
+ * @deprecated in v3.0.0
+ */
 test('it counts the min selectors per rule', t => {
-  const {
-    selectors: {min}
-  } = analyze([{selectorsCount: 1}, {selectorsCount: 4}])
+  const actual = analyze([
+    {selectors: ['a', 'b', 'c', 'd'], declarations: []},
+    {selectors: ['a'], declarations: []}
+  ])
   const expected = 1
 
-  t.is(min, expected)
+  t.is(actual.selectors.min, expected)
 })
 
+/**
+ * @deprecated v3.0.0
+ */
 test('it counts the max selectors per rule', t => {
-  const {
-    selectors: {max}
-  } = analyze([{selectorsCount: 1}, {selectorsCount: 4}])
+  const actual = analyze([
+    {selectors: ['a', 'b', 'c', 'd'], declarations: []},
+    {selectors: ['a'], declarations: []}
+  ])
   const expected = 4
 
-  t.is(max, expected)
+  t.is(actual.selectors.max, expected)
 })

test/parser/rules.js

@@ -5,8 +5,20 @@ test('basic rules are parsed', async t => {
   const fixture = 'html {color:red} @media screen { html {} }'
   const actual = await parser(fixture)
   const expected = [
-    {declarationsCount: 1, selectorsCount: 1},
-    {declarationsCount: 0, selectorsCount: 1}
+    {
+      selectors: ['html'],
+      declarations: [
+        {
+          property: 'color',
+          value: 'red',
+          important: false
+        }
+      ]
+    },
+    {
+      selectors: ['html'],
+      declarations: []
+    }
   ]
 
   t.deepEqual(actual.rules, expected)
@@ -16,8 +28,31 @@ test('declarations per rule are counted', async t => {
   const fixture = 'html, body {color:red; font-size : 12px} .foo {color: red;}'
   const actual = await parser(fixture)
   const expected = [
-    {declarationsCount: 2, selectorsCount: 2},
-    {declarationsCount: 1, selectorsCount: 1}
+    {
+      selectors: ['html', 'body'],
+      declarations: [
+        {
+          property: 'color',
+          value: 'red',
+          important: false
+        },
+        {
+          property: 'font-size',
+          value: '12px',
+          important: false
+        }
+      ]
+    },
+    {
+      selectors: ['.foo'],
+      declarations: [
+        {
+          property: 'color',
+          value: 'red',
+          important: false
+        }
+      ]
+    }
   ]
   t.deepEqual(actual.rules, expected)
 })
@@ -35,6 +70,17 @@ test('heavily nested rules are parsed', async t => {
     }
   `
   const actual = await parser(fixture)
-  const expected = [{declarationsCount: 1, selectorsCount: 1}]
+  const expected = [
+    {
+      selectors: ['.rule2'],
+      declarations: [
+        {
+          property: 'color',
+          value: 'red',
+          important: false
+        }
+      ]
+    }
+  ]
   t.deepEqual(actual.rules, expected)
 })