Code improviments to match var() declarations in nested CSS functions, using match-recursive libr

.editorconfig removed

Author: juliovedovatto

.editorconfig

@@ -1,16 +1,14 @@
+var matchRecursive = require('match-recursive');
+
 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);
@@ -32,37 +30,42 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 
 	var variablesUsedInValueMap = {};
 	// Use `replace` as a loop to go over all occurrences with the `g` flag
-	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;
-		});
-	}
-
+	resultantValue.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}`, '------------------------');
 
 	// Resolve any var(...) substitutons
 	var isResultantValueUndefined = false;
+	
+	// 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 matches = null;
+	// iterate over possible recursive matches
+	while ((matches = matchRecursive(resultantValue, 'var(...)')).length) {
+		// var originalDeclaration = matches.shift(); // get what was matched
+
+		// iterate over found var() occurences (some declaration may have multiple var() nested)
+		matches.forEach(function (match) {
+			match = match.split(',');
+			match = [ match.shift(), match.join(',') ].filter(item => item) // clear empty items
+			
+			var [ variableName, fallback ] = match.map(item => item.trim())
 
-	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
@@ -71,7 +74,7 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 					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
@@ -80,32 +83,33 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 					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;
 			}
-	
+
 			isResultantValueUndefined = replaceValue === undefined;
 			if(isResultantValueUndefined) {
 				warnings.push(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
 			}
-	
+
+			// replace original declaration
+			resultantValue = resultantValue.replace(`var(${match.join(',')})`, replaceValue)
+
 			//console.log(debugIndent, 'replaceValue', replaceValue);
-	
-			return replaceValue;
 		});
 	}
 

lib/resolve-value.js

@@ -16,6 +16,7 @@
   "dependencies": {
     "escape-string-regexp": "^1.0.3",
     "extend": "^3.0.1",
+    "match-recursive": "^0.1.1",
     "postcss": "^6.0.8"
   },
   "devDependencies": {

package.json

@@ -1,10 +1,17 @@
 :root {
+	--some-color: red;
 	--some-width: 150px;
 	--some-other-width: 50px;
+	--some-margin: 20px;
+	--some-padding: 20px;
 }
 
 .box-foo {
-	background-color: color(var(--some-color, white));
+	background-color: color(var(--some-color));
+}
+
+.box-foo {
+	background-color: color(var(--missing, white));
 }
 
 .box-foo {
@@ -25,4 +32,19 @@
 
 .box-foo {
 	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.css

@@ -1,3 +1,7 @@
+.box-foo {
+	background-color: color(red);
+}
+
 .box-foo {
 	background-color: color(white);
 }
@@ -20,4 +24,17 @@
 
 .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));
+}
+