Fix regex in resolve-value.js to allow nested CSS functions

lib/resolve-value.js

@@ -10,7 +10,7 @@ var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-whe
 // var() = var( <custom-property-name> [, <any-value> ]? )
 // matches `name[, fallback]`, captures "name" and "fallback"
 // See: http://dev.w3.org/csswg/css-variables/#funcdef-var
-var RE_VAR_FUNC = (/var\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/);
+var RE_VAR_FUNC = (/var\(\s*(--[^,\s]+?)(?:\s*,\s*([^()]+|.+))?\s*\)/);
 
 function toString(value) {
 	return String(value);
@@ -41,66 +41,69 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 
 	// Resolve any var(...) substitutons
 	var isResultantValueUndefined = false;
-	resultantValue = resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
-		// Loop through the list of declarations for that value and find the one that best matches
-		// By best match, we mean, the variable actually applies. Criteria:
-		//		- is under the same scope
-		//		- The latest defined `!important` if any
-		var matchingVarDeclMapItem;
-		(map[variableName] || []).forEach(function(varDeclMapItem) {
-			// Make sure the variable declaration came from the right spot
-			// And if the current matching variable is already important, a new one to replace it has to be important
-			var isRoot = varDeclMapItem.parent.type === 'root' || varDeclMapItem.parent.selectors[0] === ':root';
 
-			var underScope = isNodeUnderScope(decl.parent, varDeclMapItem.parent);
-			var underScsopeIgnorePseudo = isNodeUnderScope(decl.parent, varDeclMapItem.parent, ignorePseudoScope);
-
-			//console.log(debugIndent, 'isNodeUnderScope', underScope, underScsopeIgnorePseudo, generateScopeList(varDeclMapItem.parent, true), varDeclMapItem.decl.value);
-
-			if(
-				underScsopeIgnorePseudo &&
-				// And if the currently matched declaration is `!important`, it will take another `!important` to override it
-				(!(matchingVarDeclMapItem || {}).isImportant || varDeclMapItem.isImportant)
-			) {
-				matchingVarDeclMapItem = varDeclMapItem;
+	while (resultantValue.match(new RegExp(RE_VAR_FUNC.source, 'g'))) {
+		resultantValue = resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
+			// Loop through the list of declarations for that value and find the one that best matches
+			// By best match, we mean, the variable actually applies. Criteria:
+			//		- is under the same scope
+			//		- The latest defined `!important` if any
+			var matchingVarDeclMapItem;
+			(map[variableName] || []).forEach(function(varDeclMapItem) {
+				// Make sure the variable declaration came from the right spot
+				// And if the current matching variable is already important, a new one to replace it has to be important
+				var isRoot = varDeclMapItem.parent.type === 'root' || varDeclMapItem.parent.selectors[0] === ':root';
+
+				var underScope = isNodeUnderScope(decl.parent, varDeclMapItem.parent);
+				var underScsopeIgnorePseudo = isNodeUnderScope(decl.parent, varDeclMapItem.parent, ignorePseudoScope);
+
+				//console.log(debugIndent, 'isNodeUnderScope', underScope, underScsopeIgnorePseudo, generateScopeList(varDeclMapItem.parent, true), varDeclMapItem.decl.value);
+
+				if(
+					underScsopeIgnorePseudo &&
+					// And if the currently matched declaration is `!important`, it will take another `!important` to override it
+					(!(matchingVarDeclMapItem || {}).isImportant || varDeclMapItem.isImportant)
+				) {
+					matchingVarDeclMapItem = varDeclMapItem;
+				}
+			});
+
+			// Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations 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, /*internal*/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
+
+				var varDeclScopeList = generateScopeList(decl.parent.parent, true);
+				var innerMostAtRuleSelector = varDeclScopeList[0].slice(-1)[0];
+				var nodeToSpliceParentOnto = findNodeAncestorWithSelector(innerMostAtRuleSelector, matchingVarDeclMapItem.decl.parent);
+				// See: `test/fixtures/cascade-with-calc-expression-on-nested-rules`
+				var matchingMimicDecl = cloneSpliceParentOntoNodeWhen(matchingVarDeclMapItem.decl, decl.parent.parent, function(ancestor) {
+					return ancestor === nodeToSpliceParentOnto;
+				});
+
+				replaceValue = resolveValue(matchingMimicDecl, map, false, /*internal*/true).value;
 			}
-		});
-
-		// Default to the calculatedInPlaceValue which might be a previous fallback, then try this declarations 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, /*internal*/true).value;
+
+			isResultantValueUndefined = replaceValue === undefined;
+			if(isResultantValueUndefined) {
+				warnings.push(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
 			}
-
-			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
-
-			var varDeclScopeList = generateScopeList(decl.parent.parent, true);
-			var innerMostAtRuleSelector = varDeclScopeList[0].slice(-1)[0];
-			var nodeToSpliceParentOnto = findNodeAncestorWithSelector(innerMostAtRuleSelector, matchingVarDeclMapItem.decl.parent);
-			// See: `test/fixtures/cascade-with-calc-expression-on-nested-rules`
-			var matchingMimicDecl = cloneSpliceParentOntoNodeWhen(matchingVarDeclMapItem.decl, decl.parent.parent, function(ancestor) {
-				return ancestor === nodeToSpliceParentOnto;
-			});
-
-			replaceValue = resolveValue(matchingMimicDecl, map, false, /*internal*/true).value;
-		}
-
-		isResultantValueUndefined = replaceValue === undefined;
-		if(isResultantValueUndefined) {
-			warnings.push(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
-		}
-
-		//console.log(debugIndent, 'replaceValue', replaceValue);
-
-		return replaceValue;
-	});
+
+			//console.log(debugIndent, 'replaceValue', replaceValue);
+
+			return replaceValue;
+		});
+	}
 
 	return {
 		// The resolved value

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

@@ -1,3 +1,15 @@
+:root {
+	--some-width: 150px;
+}
+
 .box-foo {
 	background-color: color(var(--some-color, white));
 }
+
+.box-foo {
+	width: calc(58.3333333333% - var(--some-width, 100px)); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, 100px)); 
+}

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

@@ -1,3 +1,11 @@
 .box-foo {
 	background-color: color(white);
 }
+
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 100px); 
+}