Resolve var usage in fallbacks

Thanks to @asvny and @marklu

Author: asvny

lib/resolve-value.js

@@ -62,7 +62,16 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 		});
 
 		// Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations fallback
-		var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || fallback;
+		var replaceValue = (matchingVarDeclMapItem || {}).calculatedInPlaceValue || (function() {
+			// Resolve `var` values in fallback
+			var fallbackValue = fallback;
+			if(fallback) {
+				var fallbackDecl = decl.clone({ parent: decl.parent, value: fallback });
+				fallbackValue = resolveValue(fallbackDecl, map, false, true).value;
+			}
+
+			return 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

@@ -8,4 +8,4 @@
 
 .box-bar {
 	width: var(--missing, 30px);
-}
+}

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

@@ -1,7 +1,8 @@
+
 .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() {