Feature/browser hacks mq (#70)

* Adds css media query hacks analysis

* Refs #3

Author: bartveneman

package-lock.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "color-sorter": "^2.2.0",
     "css-color-names": "^1.0.0",
+    "css-media-query-browser-h4cks-analyzer": "^1.0.0",
     "css-property-browser-h4cks-analyzer": "^1.0.1",
     "css-shorthand-expand": "^1.2.0",
     "css-unit-sort": "^1.1.1",

package.json

@@ -1,12 +1,24 @@
+const isBrowserHack = require('css-media-query-browser-h4cks-analyzer')
 const uniquer = require('../../utils/uniquer')
 
 module.exports = atRules => {
   const all = atRules
     .filter(rule => rule.type === 'media')
     .map(rule => rule.params)
 
+  const browserhacks = all.filter(isBrowserHack)
+  const {
+    unique: uniqueBrowserHacks,
+    totalUnique: totalUniqueBrowserhacks
+  } = uniquer(browserhacks)
+
   return {
     total: all.length,
-    ...uniquer(all)
+    ...uniquer(all),
+    browserhacks: {
+      total: browserhacks.length,
+      unique: uniqueBrowserHacks,
+      totalUnique: totalUniqueBrowserhacks
+    }
   }
 }

src/analyzer/atrules/mediaqueries.js

@@ -13,6 +13,7 @@ module.exports = input => {
       const values = require('./values')(css.declarations)
       const stylesheets = require('./stylesheets')(
         input,
+        atrules,
         rules,
         selectors,
         declarations,

src/analyzer/index.js

@@ -1,5 +1,5 @@
-module.exports = (properties, values) => {
-  const {total, totalUnique} = [properties, values]
+module.exports = (atrules, properties, values) => {
+  const {total, totalUnique} = [atrules.mediaqueries, properties, values]
     .map(metric => metric.browserhacks)
     .reduce(
       (totals, current) => {

src/analyzer/stylesheets/browserhacks.js

@@ -1,8 +1,16 @@
-module.exports = (raw, rules, selectors, declarations, properties, values) => {
+module.exports = (
+  raw,
+  atrules,
+  rules,
+  selectors,
+  declarations,
+  properties,
+  values
+) => {
   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')(properties, values)
+  const browserhacks = require('./browserhacks.js')(atrules, properties, values)
 
   return {
     size,

src/analyzer/stylesheets/index.js

@@ -36,19 +36,6 @@
 }
 
 /**
- * TODO support CSS Hacks
- *
-@media screen\9{.selector{color:red}}
-@media screen\9{.selector{color:red}}
-@media \0screen\,screen\9{.selector{color:red}}
-@media \0screen{.selector{color:red}}
-@media screen and (min-width: 0\0){.selector{color:red}}
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.selector{color:red}}
-@-moz-document url-prefix(){.selector{color:red}}
-@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector{color:red}}
+ * browser hacks
+ */
 @media \0 all{.selector{color:red}}
-@media screen and (-moz-images-in-menus:0){.selector{color:red}}
-@media screen and (min--moz-device-pixel-ratio:0){.selector{color:red}}
-@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm){.selector{color:red}}
-@media (min-resolution: .001dpcm){.selector{color:red}}
-*/

test/analyzer/atrules/mediaqueries/input.css

@@ -1,15 +1,19 @@
 {
-  "total": 8,
-  "totalUnique": 6,
+  "total": 9,
+  "totalUnique": 7,
   "unique": [
     {
-      "value": "(max-width: 200px)",
-      "count": 1
+      "count": 1,
+      "value": "(max-width: 200px)"
     },
     {
       "value": "(min-width: 20px)",
       "count": 2
     },
+    {
+      "count": 1,
+      "value": "\\0 all"
+    },
     {
       "value": "print",
       "count": 1
@@ -26,5 +30,15 @@
       "value": "screen or print",
       "count": 1
     }
-  ]
+  ],
+  "browserhacks": {
+    "total": 1,
+    "unique": [
+      {
+        "count": 1,
+        "value": "\\0 all"
+      }
+    ],
+    "totalUnique": 1
+  }
 }

test/analyzer/atrules/mediaqueries/output.json

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

test/analyzer/index.js

@@ -21,10 +21,12 @@ test('It recognizes browser hacks correctly', t => {
   ])
   const expected = {
     total: 1,
-    unique: [{
-      value: 'blue\\9',
-      count: 1
-    }],
+    unique: [
+      {
+        value: 'blue\\9',
+        count: 1
+      }
+    ],
     totalUnique: 1
   }
 
@@ -38,10 +40,12 @@ test('It does not report values that are no browser hacks', t => {
     totalUnique: 0
   }
 
-  const actual = analyze([{
-    property: 'color',
-    value: 'blue'
-  }])
+  const actual = analyze([
+    {
+      property: 'color',
+      value: 'blue'
+    }
+  ])
 
   t.deepEqual(actual, expected)
 })