Add support for custom properties

Now that custom properties are more commonly used in
CSS, we can use the postcss-custom-properties plugin
to compile to raw values that are more useful when
collecting stats data.

packages/cssstats/index.js

@@ -1,6 +1,7 @@
 var _ = require('lodash')
 var postcss = require('postcss')
 var safeParser = require('postcss-safe-parser')
+var customProperties = require('postcss-custom-properties')
 var bytes = require('bytes')
 var gzipSize = require('gzip-size')
 
@@ -21,12 +22,21 @@ module.exports = function (src, opts) {
     repeatedSelectors: false,
     propertyResets: false,
     vendorPrefixedProperties: false,
+    preserveCustomProperties: false
   })
 
   function parse(root, result) {
     var stats = {}
 
-    var string = postcss().process(root).css
+    const plugins = []
+    if (!opts.preserveCustomProperties) {
+      plugins.push(customProperties({ preserve: false }))
+    }
+
+    const parser = postcss()
+    plugins.forEach(plugin => parser.use(plugin))
+
+    var string = parser.process(root).css
     stats.size = size(string)
     stats.gzipSize = gzipSize.sync(string)
     stats.humanizedSize = bytes(stats.size, { decimalPlaces: 0 })

packages/cssstats/package.json

@@ -28,6 +28,7 @@
     "is-vendor-prefixed": "^3.5.0",
     "lodash": "^4.17.20",
     "postcss": "^8.1.4",
+    "postcss-custom-properties": "^10.0.0",
     "postcss-safe-parser": "^5.0.2",
     "specificity": "^0.4.1"
   }

packages/cssstats/test/custom-properties-test.js

@@ -0,0 +1,17 @@
+const test = require('ava')
+
+const { getStatsForFixture } = require('./util')
+
+test('handles custom properties', (t) => {
+  const result = getStatsForFixture('github').declarations.properties.color
+
+  t.snapshot(result)
+})
+
+test('does not handle custom properties when told not to', (t) => {
+  const result = getStatsForFixture('github', {
+    preserveCustomProperties: true,
+  }).declarations.properties.color
+
+  t.snapshot(result)
+})