Resolve var usage in fallbacks

lib/resolve-value.js

@@ -61,8 +61,15 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 			}
 		});
 
+		// Resolve values in fallback
+		var fallbackValue = fallback;
+		if(fallback) {
+			var fallbackDecl = decl.clone({ parent: decl.parent, value: fallback });
+			fallbackValue = resolveValue(fallbackDecl, 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

@@ -204,6 +204,9 @@ describe('postcss-css-variables', function() {
 					});
 				});
 		});
+		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 not parse malformed var() declarations', function() {