Resolve fallback with all test cases

Author: asvny

lib/resolve-value.js

@@ -5,6 +5,29 @@ var gatherVariableDependencies = require('./gather-variable-dependencies');
 var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector');
 var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when');
 
+/*
+	Object.assign polyfill
+	https://gist.github.com/WebReflection/10404826
+*/
+if (!('assign' in Object)) {
+  Object.assign = function(has){
+    'use strict';
+    return assign;
+    function assign(target, source) {
+      for (var i = 1; i < arguments.length; i++) {
+        copy(target, arguments[i]);
+      }
+      return target;
+    }
+    function copy(target, source) {
+      for (var key in source) {
+        if (has.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+  }({}.hasOwnProperty);
+}
 
 
 // var() = var( <custom-property-name> [, <any-value> ]? )
@@ -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

@@ -180,6 +180,9 @@ 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 not parse malformed var() declarations', function() {