add z-index analysis (#95)

Analyze z-indexes, while ignoring CSS keywords and globals. Return a list
of z-indexes sorted from low to high.

Author: bartveneman

readme.md

@@ -128,6 +128,9 @@ analyze('foo{}')
 //   'values.fontsizes.total': 0,
 //   'values.fontsizes.totalUnique': 0,
 //   'values.fontsizes.unique': [],
+//   'values.zindexes.total': 0,
+//   'values.zindexes.unique': [],
+//   'values.zindexes.totalUnique': 0,
 //   'values.prefixed.share': 0,
 //   'values.prefixed.total': 0,
 //   'values.prefixed.totalUnique': 0,

src/analyzer/values/index.js

@@ -7,6 +7,7 @@ module.exports = declarations => {
   const colors = require('./colors.js')(declarations)
   const browserhacks = require('./browserhacks.js')(declarations)
   const boxshadows = require('./box-shadows.js')(declarations)
+  const zindexes = require('./z-indexes.js')(declarations)
 
   return {
     total: all.length,
@@ -15,6 +16,7 @@ module.exports = declarations => {
     fontfamilies,
     colors,
     browserhacks,
-    boxshadows
+    boxshadows,
+    zindexes
   }
 }

src/analyzer/values/z-indexes.js

@@ -0,0 +1,20 @@
+const uniquer = require('../../utils/uniquer')
+const {KEYWORDS} = require('../../utils/css')
+
+module.exports = declarations => {
+  const all = declarations
+    // Ignore all declarations that are not z-index
+    .filter(({property}) => property === 'z-index')
+    // Ignore all CSS keywords and globals
+    .filter(({value}) => !KEYWORDS.includes(value))
+    // Create a list of integers
+    .map(({value}) => parseInt(value, 10))
+
+  const {unique, totalUnique} = uniquer(all, (a, b) => a - b)
+
+  return {
+    total: all.length,
+    unique,
+    totalUnique
+  }
+}

test/analyzer/index.js

@@ -108,6 +108,9 @@ test('Returns the correct analysis object structure', async t => {
     'values.fontsizes.total': 0,
     'values.fontsizes.totalUnique': 0,
     'values.fontsizes.unique': [],
+    'values.zindexes.total': 0,
+    'values.zindexes.totalUnique': 0,
+    'values.zindexes.unique': [],
     'values.prefixed.share': 0,
     'values.prefixed.total': 0,
     'values.prefixed.totalUnique': 0,

test/analyzer/values/output.json

@@ -417,5 +417,10 @@
     "total": 0,
     "unique": [],
     "totalUnique": 0
+  },
+  "zindexes": {
+    "total": 0,
+    "unique": [],
+    "totalUnique": 0
   }
 }

test/analyzer/values/z-indexes.js

@@ -0,0 +1,119 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/values/z-indexes.js')
+
+test('It responds with the correct structure', t => {
+  const actual = analyze([])
+  const expected = {
+    total: 0,
+    unique: [],
+    totalUnique: 0
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('It recognizes a z-index correctly', t => {
+  const actual = analyze([
+    {
+      property: 'z-index',
+      value: '1'
+    }
+  ])
+  const expected = {
+    total: 1,
+    unique: [
+      {
+        value: 1,
+        count: 1
+      }
+    ],
+    totalUnique: 1
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('It ignores keywords, and global values', t => {
+  const expected = {
+    total: 0,
+    totalUnique: 0,
+    unique: []
+  }
+  const actual = analyze([
+    {
+      property: 'z-index',
+      value: 'auto'
+    },
+    {
+      property: 'z-index',
+      value: 'unset'
+    }
+  ])
+
+  t.deepEqual(actual, expected)
+})
+
+test('It sorts multiple z-indexes correctly, from small to large', t => {
+  const expected = {
+    total: 4,
+    unique: [
+      {
+        value: -1,
+        count: 1
+      },
+      {
+        value: 0,
+        count: 1
+      },
+      {
+        value: 2,
+        count: 1
+      },
+      {
+        value: 99999,
+        count: 1
+      }
+    ],
+    totalUnique: 4
+  }
+  const actual = analyze([
+    {
+      property: 'z-index',
+      value: '2'
+    },
+    {
+      property: 'z-index',
+      value: '99999'
+    },
+    {
+      property: 'z-index',
+      value: '0'
+    },
+    {
+      property: 'z-index',
+      value: '-1'
+    }
+  ])
+
+  t.deepEqual(actual, expected)
+})
+
+test('It ignores properties that are not z-index', t => {
+  const expected = {
+    total: 0,
+    unique: [],
+    totalUnique: 0
+  }
+  const actual = analyze([
+    {
+      property: 'line-height',
+      value: '1'
+    },
+    {
+      property: 'margin',
+      value: '0'
+    }
+  ])
+
+  t.deepEqual(actual, expected)
+})