Analyze selector browser hacks (#71)

This references #3

Author: bartveneman

package-lock.json

@@ -46,6 +46,7 @@
     "css-color-names": "^1.0.0",
     "css-media-query-browser-h4cks-analyzer": "^1.0.0",
     "css-property-browser-h4cks-analyzer": "^1.0.1",
+    "css-selector-browser-h4cks-analyzer": "^1.0.1",
     "css-shorthand-expand": "^1.2.0",
     "css-unit-sort": "^1.1.1",
     "css-value-browser-h4cks-analyzer": "^1.0.1",

package.json

@@ -0,0 +1,11 @@
+const isBrowserHack = require('css-selector-browser-h4cks-analyzer')
+const uniquer = require('../../utils/uniquer.js')
+
+module.exports = selectors => {
+  const all = selectors.filter(isBrowserHack)
+
+  return {
+    total: all.length,
+    ...uniquer(all)
+  }
+}

src/analyzer/selectors/browserhacks.js

@@ -1,4 +1,5 @@
 const specificity = require('specificity')
+const {caseInsensitive: stringCompare} = require('string-natural-compare')
 
 module.exports = selectors => {
   const totalSelectors = selectors.length
@@ -17,17 +18,16 @@ module.exports = selectors => {
   const average = totalIdentifiers / totalSelectors
 
   const top = count => {
+    // Sort by identifiers count, then by alphabet
     const sorter = (a, b) => {
       if (a.identifiers === b.identifiers) {
-        return a.selector.localeCompare(b.selector)
+        return stringCompare(a, b)
       }
 
       return b.identifiers - a.identifiers
     }
 
-    return identifiersPerSelector
-      .sort(sorter)
-      .slice(0, count)
+    return identifiersPerSelector.sort(sorter).slice(0, count)
   }
 
   return {

src/analyzer/selectors/identifiers.js

@@ -1,12 +1,13 @@
 module.exports = selectors => {
   const all = selectors
   const unique = [...new Set(all)]
-  const js = require('./js')(all)
-  const id = require('./id')(all)
-  const universal = require('./universal')(all)
-  const accessibility = require('./accessibility')(all)
-  const specificity = require('./specificity')(all)
-  const identifiers = require('./identifiers')(all)
+  const js = require('./js.js')(all)
+  const id = require('./id.js')(all)
+  const universal = require('./universal.js')(all)
+  const accessibility = require('./accessibility.js')(all)
+  const specificity = require('./specificity.js')(all)
+  const identifiers = require('./identifiers.js')(all)
+  const browserhacks = require('./browserhacks.js')(all)
 
   return {
     total: all.length,
@@ -16,6 +17,7 @@ module.exports = selectors => {
     universal,
     accessibility,
     specificity,
-    identifiers
+    identifiers,
+    browserhacks
   }
 }

src/analyzer/selectors/index.js

@@ -138,6 +138,11 @@ test('Returns the correct analysis object structure', async t => {
         total: 0,
         totalUnique: 0,
         unique: []
+      },
+      browserhacks: {
+        total: 0,
+        unique: [],
+        totalUnique: 0
       }
     },
     stylesheets: {

test/analyzer/index.js

@@ -0,0 +1,41 @@
+const test = require('ava')
+const analyze = require('../../../src/analyzer/selectors/browserhacks.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 browser hacks correctly', t => {
+  const actual = analyze(['* html .selector'])
+  const expected = {
+    total: 1,
+    unique: [
+      {
+        value: '* html .selector',
+        count: 1
+      }
+    ],
+    totalUnique: 1
+  }
+
+  t.deepEqual(actual, expected)
+})
+
+test('It does not report values that are not browser hacks', t => {
+  const expected = {
+    total: 0,
+    unique: [],
+    totalUnique: 0
+  }
+
+  const actual = analyze(['html'])
+
+  t.deepEqual(actual, expected)
+})

test/analyzer/selectors/browserhacks.js

@@ -64,37 +64,6 @@
  * Contains universal selectors
  */
 * html .selector {}
-*:first-child + html .selector {}
-*:first-child+html .selector {}
-* + html .selector {}
-*+html .selector {}
-body*.selector {}
-html > body .selector {}
-html>body .selector {}
-.selector\ {}
-:root .selector {}
-body:last-child .selector {}
-body:nth-of-type(1) .selector {}
-body:first-of-type .selector {}
-.selector:not([attr*='']) {}
-.selector:not([attr*=""]) {}
-.selector:not(*:root) {}
-body:empty .selector {}
-x:-moz-any-link {}
-body:not(:-moz-handler-blocked) .selector {}
-_::-moz-progress-bar {}
-_::-moz-range-track {}
-_:-moz-tree-row(hover) {}
-_::selection {}
-x:-IE7 {}
-_:-ms-fullscreen {}
-_:-ms-input-placeholder {}
-html:first-child .selector {}
-_:-o-prefocus {}
-*|html[xmlns*=""] .selector {}
-html[xmlns*=""] body:last-child .selector {}
-html[xmlns*=""]:root .selector  {}
-_::-moz-svg-foreign-content {}
 
 /* Don't report these ones (Issue #88) */
 tbody:first-child {}

test/analyzer/selectors/input.css

@@ -1,6 +1,6 @@
 {
-  "total": 57,
-  "totalUnique": 56,
+  "total": 26,
+  "totalUnique": 25,
   "js": {
     "total": 6,
     "totalUnique": 6,
@@ -54,52 +54,24 @@
     ]
   },
   "universal": {
-    "total": 12,
-    "totalUnique": 11,
+    "total": 5,
+    "totalUnique": 4,
     "unique": [
       {
         "value": "*",
         "count": 1
       },
-      {
-        "value": "* + html .selector",
-        "count": 1
-      },
       {
         "value": "* html .selector",
         "count": 2
       },
-      {
-        "value": "*+html .selector",
-        "count": 1
-      },
-      {
-        "value": "*:first-child + html .selector",
-        "count": 1
-      },
-      {
-        "value": "*:first-child+html .selector",
-        "count": 1
-      },
-      {
-        "value": "*|html[xmlns*=\"\"] .selector",
-        "count": 1
-      },
       {
         "value": ".foo *",
         "count": 1
       },
       {
         "value": ".foo * .bar",
         "count": 1
-      },
-      {
-        "value": ".selector:not(*:root)",
-        "count": 1
-      },
-      {
-        "value": "body*.selector",
-        "count": 1
       }
     ]
   },
@@ -183,28 +155,38 @@
     ]
   },
   "identifiers": {
-    "average": 2.6491228070175437,
+    "average": 2.8461538461538463,
     "top": [
-    {
-      "identifiers": 26,
-      "selector": ".a .b .c .d .e .f .g .h .i .j .k .l .m .n .o .p .q .r .s .t .u .v .w .x .y .z"
-     },
-     {
-       "identifiers": 11,
-       "selector": ".Foo > .Bar ~ .Baz [type=\"text\"] + span:before #bazz #fizz #buzz #drank #drugs"
-     },
-     {
-       "identifiers": 5,
-       "selector": "#multipe #ids #counted #as #one"
-     },
-     {
-       "identifiers": 5,
-       "selector": "html[xmlns*=\"\"] body:last-child .selector"
-     },
-     {
-       "identifiers": 4,
-       "selector": "html[xmlns*=\"\"]:root .selector"
-     }
-   ]
+      {
+        "identifiers": 26,
+        "selector": ".a .b .c .d .e .f .g .h .i .j .k .l .m .n .o .p .q .r .s .t .u .v .w .x .y .z"
+      },
+      {
+        "identifiers": 11,
+        "selector": ".Foo > .Bar ~ .Baz [type=\"text\"] + span:before #bazz #fizz #buzz #drank #drugs"
+      },
+      {
+        "identifiers": 5,
+        "selector": "#multipe #ids #counted #as #one"
+      },
+      {
+        "identifiers": 3,
+        "selector": "[role=\"menuitem\"][aria-checked=\"true\"]::before"
+      },
+      {
+        "identifiers": 2,
+        "selector": "* html .selector"
+      }
+    ]
+  },
+  "browserhacks": {
+    "total": 2,
+    "unique": [
+      {
+        "value": "* html .selector",
+        "count": 2
+      }
+    ],
+    "totalUnique": 1
   }
 }