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

lib/resolve-value.js

@@ -1,16 +1,14 @@
+var balanced = require('balanced-match');
+
 var generateScopeList = require('./generate-scope-list');
 var isNodeUnderScope = require('./is-node-under-scope');
 var gatherVariableDependencies = require('./gather-variable-dependencies');
 
 var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector');
 var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when');
 
-
-
-// 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*\)/);
+// regex to capture variable names
+var RE_VAR_FUNC = (/var\(\s*(--[^,\s)]+)/);
 
 function toString(value) {
 	return String(value);
@@ -41,12 +39,19 @@ 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;
+
+	// 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 match;
+	while (match = balanced('var(', ')', resultantValue)) {
+		var matchingVarDeclMapItem = undefined;
+
+		// split comma to find variable name and fallback value
+		match.body = match.body.split(',');
+		// get variable name and fallback, filtering empty items
+		var [ variableName, fallback ] = [ match.body.shift(), match.body.join(',') ].map(item => item.trim()).filter(item => !!item);
+
 		(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
@@ -97,10 +102,9 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 			warnings.push(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
 		}
 
-		//console.log(debugIndent, 'replaceValue', replaceValue);
-
-		return replaceValue;
-	});
+		// replace original declaration
+		resultantValue = `${match.pre || ''}${replaceValue}${match.post || ''}`;
+	}
 
 	return {
 		// The resolved value

package.json

@@ -13,7 +13,9 @@
     "type": "git",
     "url": "https://github.com/MadLittleMods/postcss-css-variables.git"
   },
+  "preinstall": "npm install escape-string-regexp extend match-recursive postcss",
   "dependencies": {
+    "balanced-match": "^1.0.0",
     "escape-string-regexp": "^1.0.3",
     "extend": "^3.0.1",
     "postcss": "^6.0.8"

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

@@ -1,3 +1,54 @@
+:root {
+	--some-color: red;
+	--some-width: 150px;
+	--some-other-width: 50px;
+	--some-margin: 25px;
+	--some-padding: 20px;
+}
+
+.box-foo {
+	background-color: color(var(--some-color));
+}
+
+.box-foo {
+	background-color: color(var(--missing, white));
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--some-width, 100px)); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, 100px)); 
+}
+
+.box-foo {
+	width: calc(80vw - var(--missing, var(--some-other-width))); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, var(--some-width, 100px))); 
+}
+
+.box-foo {
+	width: calc(100vw - var(--missing)); 
+}
+
 .box-foo {
-	background-color: color(var(--some-color, white));
+	width: calc(var(--some-width) - var(--some-other-width)); 
 }
+
+.box-foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+
+.box-foo {
+	margin: calc(var(--some-margin) - 2px) calc(1rem - var(--missing));
+}
+
+.box-foo {
+	padding: calc(var(--some-padding) - 2px) calc(100px - var(--some-padding)) calc(100px - calc(var(--missing, 20px) - 10px));
+}

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

@@ -1,3 +1,44 @@
+.box-foo {
+	background-color: color(red);
+}
+
 .box-foo {
 	background-color: color(white);
 }
+
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 100px); 
+}
+
+.box-foo {
+	width: calc(80vw - 50px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: undefined; 
+}
+
+.box-foo {
+	width: calc(150px - 50px); 
+}
+
+.box-foo {
+	width: calc(calc(100px / 2) / 2);
+}
+
+.box-foo {
+	margin: undefined
+}
+
+.box-foo {
+	padding: calc(20px - 2px) calc(100px - 20px) calc(100px - calc(20px - 10px));
+}
+