Failing silently to 16px font size when values can't be calculated (e…

…g viewport relative units)

(fix #45)

lib/pixrem.js

@@ -1,8 +1,11 @@
 'use strict';
+var calc         = require('reduce-css-calc');
 var postcss      = require('postcss');
 var browserslist = require('browserslist');
+
 var _remgex, _PROPS, _VALUES, _rootvalue, _options;
-var calc = require('reduce-css-calc');
+var BASE_FONT_SIZE = 16;
+
 
 // Add pixel fallbacks for rem units to a string of CSS
 // - css `String`: the contents of a CSS file.
@@ -16,7 +19,7 @@ function Pixrem (rootvalue, options) {
   _remgex = /(\d*\.?\d+)rem/ig;
   _PROPS  = /^(background-size|border-image|border-radius|box-shadow|clip-path|column|grid|mask|object|perspective|scroll|shape|size|stroke|transform)/;
   _VALUES = /(calc|gradient)\(/;
-  _rootvalue = typeof rootvalue !== 'undefined' ? rootvalue : 16;
+  _rootvalue = typeof rootvalue !== 'undefined' ? rootvalue : BASE_FONT_SIZE;
   options = options || {};
   _options = {};
   _options.replace  = (options.replace !== undefined) ? options.replace : false;
@@ -150,10 +153,13 @@ function toPx (value) {
       return parseFloat(number);
     }
     else if (unit === 'em' || unit === 'rem') {
-      return parseFloat(number) * 16;
+      return parseFloat(number) * BASE_FONT_SIZE;
     }
     else if (unit === '%') {
-      return (parseFloat(number) / 100) * 16;
+      return (parseFloat(number) / 100) * BASE_FONT_SIZE;
+    } else {
+      // other units: vw, ex, ch, etc...
+      return BASE_FONT_SIZE;
     }
   } else {
     throw new Error('Root font-size is invalid');

spec/pixrem-spec.js

@@ -54,6 +54,13 @@ describe('pixrem', function () {
     expect(processed).toBe(expected);
   });
 
+  it('should generate fallbacks with a vw root em value', function () {
+    var expected = '.rule { font-size: 32px; font-size: 2rem }';
+    var processed = pixrem.process(css, '.625vw');
+
+    expect(processed).toBe(expected);
+  });
+
   it('should generate fallbacks with a value starting with dot', function () {
     var expected = '.rule { font-size: 16px; font-size: 2rem }';
     var processed = pixrem.process(css, '.5em');