Fixes #37

lib/resolve-decl.js

@@ -143,18 +143,19 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResol
 	if(shouldPreserve === true && decl.value !== valueResults.value) {
 		decl.cloneAfter();
 	}
-
-
-	// Set 'undefined' value as a string to avoid making other plugins down the line unhappy
-	// See #22
-	if (valueResults.value === undefined) {
-		valueResults.value = 'undefined';
-	}
-
-
-	// Set the new value after we are done dealing with at-rule stuff
-	decl.value = valueResults.value;
-}
+
+
+	// Set 'undefined' value as a string to avoid making other plugins down the line unhappy
+	// See #22
+	if (valueResults.value === undefined) {
+		valueResults.value = 'undefined';
+	}
+
+
+	// Set the new value after we are done dealing with at-rule stuff
+	decl.value = valueResults.value;
+}
+
 
 
 

lib/resolve-value.js

@@ -5,7 +5,30 @@ var gatherVariableDependencies = require('./gather-variable-dependencies');
 var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector');
 var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when');
 
-
+if (typeof Object.assign != 'function') {
+  Object.assign = function(target, varArgs) { // .length of function is 2
+    'use strict';
+    if (target == null) { // TypeError if undefined or null
+      throw new TypeError('Cannot convert undefined or null to object');
+    }
+
+    var to = Object(target);
+
+    for (var index = 1; index < arguments.length; index++) {
+      var nextSource = arguments[index];
+
+      if (nextSource != null) { // Skip over if undefined or null
+        for (var nextKey in nextSource) {
+          // Avoid bugs when hasOwnProperty is shadowed
+          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+    return to;
+  };
+}
 
 // var() = var( <custom-property-name> [, <any-value> ]? )
 // matches `name[, fallback]`, captures "name" and "fallback"
@@ -61,8 +84,14 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 			}
 		});
 
+		var fallbackValue;
+		if(fallback) {
+		    	var cloneDecl = Object.assign({},decl,{value:fallback});
+		    	fallbackValue = resolveValue(cloneDecl, map, false,true).value;
+		}
+
 		// Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback
-		var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallback;
+		var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallbackValue;
 		// Otherwise if the dependency health is good(no circular or self references), dive deeper and resolve
 		if(matchingVarDeclMapItem !== undefined && !gatherVariableDependencies(variablesUsedInValue, map).hasCircularOrSelfReference) {
 			// Splice the declaration parent onto the matching entry

test/fixtures/missing-variable-should-fallback-calc.css

@@ -0,0 +1,7 @@
+:root {
+    --foo1: 150px;
+}
+
+.box-bar {
+     width: var(--missing,calc(var(--foo1) + 100px));
+}

test/fixtures/missing-variable-should-fallback-calc.expected.css

@@ -0,0 +1,3 @@
+.box-bar {
+     width: calc(150px + 100px);
+}

test/fixtures/missing-variable-should-fallback-nested.css

@@ -0,0 +1,8 @@
+:root {
+    --foo1: 100px;
+    --foo2: 150px;
+}
+
+.box-bar {
+     width: var(--missing, var(--missing, var(--foo1)));
+}

test/fixtures/missing-variable-should-fallback-nested.expected.css

@@ -0,0 +1,3 @@
+.box-bar {
+     width: 100px;
+}

test/fixtures/missing-variable-should-fallback-var.css

@@ -0,0 +1,12 @@
+:root {
+    --foo-default: 100px;
+    --foo-width: 150px;
+}
+
+.box-foo {
+    width: var(--missing);
+}
+
+.box-bar {
+    width: var(--missing, var(--foo-default));
+}

test/fixtures/missing-variable-should-fallback-var.expected.css

@@ -0,0 +1,7 @@
+.box-foo {
+    width: undefined;
+}
+
+.box-bar {
+    width: 100px;
+}

test/fixtures/missing-variable-should-fallback.css

@@ -1,11 +1,6 @@
 :root {
 	--foo-width: 150px;
 }
-
-.box-foo {
-	width: var(--missing);
-}
-
 .box-bar {
 	width: var(--missing, 30px);
-}
+}

test/fixtures/missing-variable-should-fallback.expected.css

@@ -1,7 +1,4 @@
-.box-foo {
-	width: undefined;
-}
 
 .box-bar {
 	width: 30px;
-}
+}

test/test.js

@@ -186,6 +186,10 @@ describe('postcss-css-variables', function() {
 	describe('missing variable declarations', function() {
 		test('should work with missing variables', 'missing-variable-usage');
 		test('should use fallback value if provided with missing variables', 'missing-variable-should-fallback');
+		test('should use fallback variable if provided with missing variables', 'missing-variable-should-fallback-var');
+		test('should use fallback variable if provided with missing variables calc', 'missing-variable-should-fallback-calc');
+		test('should use fallback variable if provided with missing variables nested', 'missing-variable-should-fallback-nested');
+
 		it('should use string values for `undefined` values, see #22', function() {
 			return fs.readFileAsync('./test/fixtures/missing-variable-usage.css', 'utf8')
 				.then(function(buffer) {
@@ -204,6 +208,7 @@ describe('postcss-css-variables', function() {
 					});
 				});
 		});
+
 	});
 
 	it('should not parse malformed var() declarations', function() {