[WIP] Adds css value hacks analysis (#69)

* Adds css value hacks analysis

* Adds css property hacks analysis

Author: bartveneman

.prettierignore

@@ -0,0 +1 @@
+**/*.css

package-lock.json

@@ -28,11 +28,26 @@
     "space": true,
     "semicolon": false
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "overrides": [
+      {
+        "files": "*.json",
+        "options": {
+          "useTabs": false
+        }
+      }
+    ]
+  },
   "dependencies": {
     "color-sorter": "^2.2.0",
     "css-color-names": "^1.0.0",
+    "css-property-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",
     "path": "^0.12.7",
     "postcss": "^7.0.2",
     "postcss-values-parser": "^2.0.0",

package.json

@@ -15,7 +15,9 @@ module.exports = input => {
         input,
         rules,
         selectors,
-        declarations
+        declarations,
+        properties,
+        values
       )
 
       resolve({
@@ -27,8 +29,8 @@ module.exports = input => {
         properties,
         values
       })
-    } catch (err) {
-      reject(err)
+    } catch (error) {
+      reject(error)
     }
   })
 }

src/analyzer/index.js

@@ -0,0 +1,13 @@
+const isBrowserHack = require('css-property-browser-h4cks-analyzer')
+const uniquer = require('../../utils/uniquer')
+
+module.exports = properties => {
+  const all = properties.filter(isBrowserHack)
+  const {unique, totalUnique} = uniquer(all)
+
+  return {
+    total: all.length,
+    unique,
+    totalUnique
+  }
+}

src/analyzer/properties/browserhacks.js

@@ -1,14 +1,15 @@
-const uniquer = require('../../utils/uniquer')
+const uniquer = require('../../utils/uniquer.js')
 
 module.exports = declarations => {
-  const all = declarations
-    .map(declaration => declaration.property)
+  const all = declarations.map(declaration => declaration.property)
 
-  const prefixed = require('./prefixed')(all)
+  const prefixed = require('./prefixed.js')(all)
+  const browserhacks = require('./browserhacks.js')(all)
 
   return {
     total: all.length,
     ...uniquer(all),
-    prefixed
+    prefixed,
+    browserhacks
   }
 }

src/analyzer/properties/index.js

@@ -0,0 +1,20 @@
+module.exports = (properties, values) => {
+  const {total, totalUnique} = [properties, values]
+    .map(metric => metric.browserhacks)
+    .reduce(
+      (totals, current) => {
+        totals.total += current.total
+        totals.totalUnique += current.totalUnique
+        return totals
+      },
+      {
+        total: 0,
+        totalUnique: 0
+      }
+    )
+
+  return {
+    total,
+    totalUnique
+  }
+}

src/analyzer/stylesheets/browserhacks.js

@@ -1,11 +1,13 @@
-module.exports = (raw, rules, selectors, declarations) => {
+module.exports = (raw, rules, selectors, declarations, properties, values) => {
   const size = Buffer.byteLength(raw, 'utf8')
-  const simplicity = require('./simplicity')(rules, selectors)
-  const cohesion = require('./cohesion')(rules, declarations)
+  const simplicity = require('./simplicity.js')(rules, selectors)
+  const cohesion = require('./cohesion.js')(rules, declarations)
+  const browserhacks = require('./browserhacks.js')(properties, values)
 
   return {
     size,
     simplicity,
-    cohesion
+    cohesion,
+    browserhacks
   }
 }

src/analyzer/stylesheets/index.js

@@ -0,0 +1,16 @@
+const isBrowserHack = require('css-value-browser-h4cks-analyzer')
+const uniquer = require('../../utils/uniquer')
+
+module.exports = declarations => {
+  const all = declarations
+    .filter(declaration => isBrowserHack(declaration.value))
+    .map(declaration => declaration.value)
+
+  const {unique, totalUnique} = uniquer(all)
+
+  return {
+    total: all.length,
+    unique,
+    totalUnique
+  }
+}

src/analyzer/values/browserhacks.js

@@ -2,16 +2,18 @@ module.exports = declarations => {
   const all = declarations
     .map(declaration => declaration.value)
 
-  const prefixed = require('./prefixed')(all)
-  const fontsizes = require('./font-sizes')(declarations)
-  const fontfamilies = require('./font-families')(declarations)
-  const colors = require('./colors')(declarations)
+  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)
 
   return {
     total: all.length,
     prefixed,
     fontsizes,
     fontfamilies,
-    colors
+    colors,
+    browserhacks
   }
 }