Analyze at-supports rule browser hacks (#72)

This references #3

Author: bartveneman

package-lock.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "color-sorter": "^2.2.0",
+    "css-at-supports-browser-h4cks-analyzer": "^1.0.0",
     "css-color-names": "^1.0.0",
     "css-media-query-browser-h4cks-analyzer": "^1.0.0",
     "css-property-browser-h4cks-analyzer": "^1.0.1",

package.json

@@ -7,18 +7,13 @@ module.exports = atRules => {
     .map(rule => rule.params)
 
   const browserhacks = all.filter(isBrowserHack)
-  const {
-    unique: uniqueBrowserHacks,
-    totalUnique: totalUniqueBrowserhacks
-  } = uniquer(browserhacks)
 
   return {
     total: all.length,
     ...uniquer(all),
     browserhacks: {
       total: browserhacks.length,
-      unique: uniqueBrowserHacks,
-      totalUnique: totalUniqueBrowserhacks
+      ...uniquer(browserhacks)
     }
   }
 }

src/analyzer/atrules/mediaqueries.js

@@ -1,12 +1,19 @@
+const isBrowserHack = require('css-at-supports-browser-h4cks-analyzer')
 const uniquer = require('../../utils/uniquer')
 
 module.exports = atRules => {
   const all = atRules
     .filter(rule => rule.type === 'supports')
     .map(rule => rule.params)
 
+  const browserhacks = all.filter(isBrowserHack)
+
   return {
     total: all.length,
-    ...uniquer(all)
+    ...uniquer(all),
+    browserhacks: {
+      total: browserhacks.length,
+      ...uniquer(browserhacks)
+    }
   }
 }

src/analyzer/atrules/supports.js

@@ -1,5 +1,5 @@
-module.exports = (atrules, properties, values) => {
-  const {total, totalUnique} = [atrules.mediaqueries, properties, values]
+module.exports = (atrules, selectors, properties, values) => {
+  return [atrules.mediaqueries, atrules.supports, selectors, properties, values]
     .map(metric => metric.browserhacks)
     .reduce(
       (totals, current) => {
@@ -12,9 +12,4 @@ module.exports = (atrules, properties, values) => {
         totalUnique: 0
       }
     )
-
-  return {
-    total,
-    totalUnique
-  }
 }

src/analyzer/stylesheets/browserhacks.js

@@ -10,7 +10,12 @@ module.exports = (
   const size = Buffer.byteLength(raw, 'utf8')
   const simplicity = require('./simplicity.js')(rules, selectors)
   const cohesion = require('./cohesion.js')(rules, declarations)
-  const browserhacks = require('./browserhacks.js')(atrules, properties, values)
+  const browserhacks = require('./browserhacks.js')(
+    atrules,
+    selectors,
+    properties,
+    values
+  )
 
   return {
     size,

src/analyzer/stylesheets/index.js

@@ -14,5 +14,15 @@
       "value": "(filter: blur(5px))",
       "count": 1
     }
-  ]
+  ],
+  "browserhacks": {
+    "total": 2,
+    "unique": [
+      {
+        "value": "(-webkit-appearance:none)",
+        "count": 2
+      }
+    ],
+    "totalUnique": 1
+  }
 }

test/analyzer/atrules/supports/output.json

@@ -61,7 +61,12 @@ test('Returns the correct analysis object structure', async t => {
       supports: {
         total: 0,
         totalUnique: 0,
-        unique: []
+        unique: [],
+        browserhacks: {
+          total: 0,
+          unique: [],
+          totalUnique: 0
+        }
       }
     },
     declarations: {

test/analyzer/index.js

@@ -0,0 +1,44 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/stylesheets/browserhacks.js')
+
+test('it counts the totals of browserhacks correctly', t => {
+  const atRules = {
+    mediaqueries: {
+      browserhacks: {
+        total: 1,
+        totalUnique: 1
+      }
+    },
+    supports: {
+      browserhacks: {
+        total: 2,
+        totalUnique: 2
+      }
+    }
+  }
+  const selectors = {
+    browserhacks: {
+      total: 1,
+      totalUnique: 1
+    }
+  }
+  const properties = {
+    browserhacks: {
+      total: 1,
+      totalUnique: 1
+    }
+  }
+  const values = {
+    browserhacks: {
+      total: 1,
+      totalUnique: 1
+    }
+  }
+  const expected = {
+    total: 6,
+    totalUnique: 6
+  }
+  const actual = analyze(atRules, selectors, properties, values)
+
+  t.deepEqual(actual, expected)
+})