small code improvement to map css variables correctly (for nested variables with CSS functions) and added few more tests.

Author: juliovedovatto

lib/resolve-value.js

@@ -32,9 +32,13 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 
 	var variablesUsedInValueMap = {};
 	// Use `replace` as a loop to go over all occurrences with the `g` flag
-	resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
-		variablesUsedInValueMap[variableName] = true;
-	});
+	var resultantValueCopy = resultantValue;
+	while (resultantValueCopy.match(new RegExp(RE_VAR_FUNC.source, 'g'))) {
+		resultantValueCopy = resultantValueCopy.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
+			variablesUsedInValueMap[variableName] = true;
+		});
+	}
+
 	var variablesUsedInValue = Object.keys(variablesUsedInValueMap);
 
 	//console.log(debugIndent, (_debugIsInternal ? '' : 'Try resolving'), generateScopeList(decl.parent, true), `ignorePseudoScope=${ignorePseudoScope}`, '------------------------');

test/fixtures/nested-inside-other-func.css

@@ -1,5 +1,6 @@
 :root {
 	--some-width: 150px;
+	--some-other-width: 50px;
 }
 
 .box-foo {
@@ -12,4 +13,16 @@
 
 .box-foo {
 	width: calc(58.3333333333% - var(--missing, 100px)); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, var(--some-width, 100px))); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing)); 
+}
+
+.box-foo {
+	width: calc(var(--some-width) - var(--some-other-width)); 
 }

test/fixtures/nested-inside-other-func.expected.css

@@ -8,4 +8,16 @@
 
 .box-foo {
 	width: calc(58.3333333333% - 100px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: undefined; 
+}
+
+.box-foo {
+	width: calc(150px - 50px); 
 }