add box-shadow analysis (#93)

closes #87

Author: bartveneman

readme.md

@@ -110,6 +110,9 @@ analyze('foo{}')
 //   'stylesheets.size': 5,
 //   'stylesheets.browserhacks.total': 0,
 //   'stylesheets.browserhacks.totalUnique': 0,
+//   'values.boxshadows.total': 0,
+//   'values.boxshadows.unique': [],
+//   'values.boxshadows.totalUnique': 0,
 //   'values.browserhacks.total': 0,
 //   'values.browserhacks.unique': [],
 //   'values.browserhacks.totalUnique': 0,

src/analyzer/values/box-shadows.js

@@ -0,0 +1,15 @@
+const uniquer = require('../../utils/uniquer')
+
+module.exports = declarations => {
+  const all = declarations
+    .filter(({property}) => property === 'box-shadow')
+    .map(declaration => declaration.value)
+
+  const {unique, totalUnique} = uniquer(all)
+
+  return {
+    total: all.length,
+    unique,
+    totalUnique
+  }
+}

src/analyzer/values/index.js

@@ -1,19 +1,20 @@
 module.exports = declarations => {
-  const all = declarations
-    .map(declaration => declaration.value)
+  const all = declarations.map(declaration => declaration.value)
 
   const prefixed = require('./prefixed.js')(all)
   const fontsizes = require('./font-sizes.js')(declarations)
   const fontfamilies = require('./font-families.js')(declarations)
   const colors = require('./colors.js')(declarations)
   const browserhacks = require('./browserhacks.js')(declarations)
+  const boxshadows = require('./box-shadows.js')(declarations)
 
   return {
     total: all.length,
     prefixed,
     fontsizes,
     fontfamilies,
     colors,
-    browserhacks
+    browserhacks,
+    boxshadows
   }
 }

test/analyzer/index.js

@@ -90,6 +90,9 @@ test('Returns the correct analysis object structure', async t => {
     'stylesheets.size': 5,
     'stylesheets.browserhacks.total': 0,
     'stylesheets.browserhacks.totalUnique': 0,
+    'values.boxshadows.total': 0,
+    'values.boxshadows.unique': [],
+    'values.boxshadows.totalUnique': 0,
     'values.browserhacks.total': 0,
     'values.browserhacks.unique': [],
     'values.browserhacks.totalUnique': 0,

test/analyzer/values/box-shadows.js

@@ -0,0 +1,82 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/values/box-shadows.js')
+
+// Source: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects
+const SIMPLE_BOX_SHADOW = '1px 1px 1px black'
+const MULTIPLE_BOX_SHADOWS =
+  '1px 1px 1px black,inset 2px 3px 5px rgba(0,0,0,0.3),inset -2px -3px 5px rgba(255,255,255,0.5)'
+const INSET_BOX_SHADOW = 'inset -2px -3px 5px rgba(255,255,255,0.5)'
+
+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 simple/single box-shadow correctly', t => {
+  const actual = analyze([
+    {
+      property: 'box-shadow',
+      value: SIMPLE_BOX_SHADOW
+    }
+  ])
+  const expected = {
+    total: 1,
+    unique: [
+      {
+        value: SIMPLE_BOX_SHADOW,
+        count: 1
+      }
+    ],
+    totalUnique: 1
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('It recognizes box-shadow that uses inset', t => {
+  const expected = {
+    total: 1,
+    totalUnique: 1,
+    unique: [
+      {
+        value: INSET_BOX_SHADOW,
+        count: 1
+      }
+    ]
+  }
+  const actual = analyze([
+    {
+      property: 'box-shadow',
+      value: INSET_BOX_SHADOW
+    }
+  ])
+
+  t.deepEqual(actual, expected)
+})
+
+test('It recognizes an advanced box-shadow with multiple shadows', t => {
+  const expected = {
+    total: 1,
+    unique: [
+      {
+        value: MULTIPLE_BOX_SHADOWS,
+        count: 1
+      }
+    ],
+    totalUnique: 1
+  }
+  const actual = analyze([
+    {
+      property: 'box-shadow',
+      value: MULTIPLE_BOX_SHADOWS
+    }
+  ])
+
+  t.deepEqual(actual, expected)
+})

test/analyzer/values/output.json

@@ -412,5 +412,10 @@
       }
     ],
     "totalUnique": 1
+  },
+  "boxshadows": {
+    "total": 0,
+    "unique": [],
+    "totalUnique": 0
   }
 }