feat: add ability to preserve undefined variables

Author: ignatvilesov

index.js

@@ -60,7 +60,10 @@ var defaults = {
   preserveInjectedVariables: true,
   // Will write media queries in the same order as in the original file.
   // Currently defaulted to false for legacy behavior. We can update to `true` in a major version
-  preserveAtRulesOrder: false
+  preserveAtRulesOrder: false,
+  // Allows you to preserve custom properties which can't calculated during build time
+  // Currently defaulted to false for legacy behavior which produces undefined when custom properties can't be calculated during build time
+  preserveUndefinedVariables: false,
 };
 
 module.exports = (options = {}) => {
@@ -158,7 +161,7 @@ module.exports = (options = {}) => {
       eachCssVariableDeclaration(css, function(decl) {
         var declParentRule = decl.parent;
 
-        var valueResults = logResolveValueResult(resolveValue(decl, map));
+        var valueResults = logResolveValueResult(resolveValue(decl, map, undefined, opts.preserveUndefinedVariables));
         // Split out each selector piece into its own declaration for easier logic down the road
         decl.parent.selectors.forEach(function(selector) {
           // Create a detached clone
@@ -263,7 +266,8 @@ module.exports = (options = {}) => {
               map,
               opts.preserve,
               opts.preserveAtRulesOrder,
-              logResolveValueResult
+              logResolveValueResult,
+              opts.preserveUndefinedVariables
             );
           }
         });

lib/resolve-decl.js

@@ -71,7 +71,7 @@ function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) {
 
 // Resolve the decl with the computed value
 // Also add in any media queries that change the value as necessary
-function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserveAtRulesOrder, /*optional*/logResolveValueResult) {
+function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserveAtRulesOrder, /*optional*/logResolveValueResult, /*optional*/preserveUndefinedVariables) {
 	shouldPreserve = (typeof shouldPreserve === "function" ? shouldPreserve(decl) : shouldPreserve) || false;
 	preserveAtRulesOrder = preserveAtRulesOrder || false;
 
@@ -88,7 +88,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserve
 
 	// Grab the balue for this declarations
 	//console.log('resolveDecl 1');
-	var valueResults = _logResolveValueResult(resolveValue(decl, map));
+	var valueResults = _logResolveValueResult(resolveValue(decl, map, undefined, preserveUndefinedVariables));
 
 
 	// Resolve the cascade dependencies
@@ -112,7 +112,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/preserve
 		}
 
 		// No mangle resolve
-		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map, true)).value;
+		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map, true, preserveUndefinedVariables)).value;
 
 		if(mapItem.isUnderAtRule) {
 			// Create the clean atRule for which we place the declaration under

lib/resolve-value.js

@@ -61,9 +61,7 @@ function balancedVar(value) {
 // Note: We do not modify the declaration
 // Note: Resolving a declaration value without any `var(...)` does not harm the final value.
 //		This means, feel free to run everything through this function
-var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal debugging*/_debugIsInternal) {
-	var debugIndent = _debugIsInternal ? '\t' : '';
-
+var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*optional*/preserveUndefinedVariables) {
 	var matchingVarDecl = undefined;
 	var resultantValue = toString(decl.value);
 	var warnings = [];
@@ -157,17 +155,22 @@ var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal
 		}
 
 		isResultantValueUndefined = replaceValue === undefined;
-		if(isResultantValueUndefined) {
+
+		if(isResultantValueUndefined && !preserveUndefinedVariables) {
 			warnings.push(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
 		}
 
+		replaceValue = isResultantValueUndefined && preserveUndefinedVariables
+			? 'var(' + matchingVarDecl.body + ')'
+			: replaceValue
+
 		// Replace original declaration with found value
 		resultantValue = (matchingVarDecl.pre || '') + replaceValue + (matchingVarDecl.post || '')
 	}
 
 	return {
 		// The resolved value
-		value: !isResultantValueUndefined ? resultantValue : undefined,
+		value: isResultantValueUndefined && !preserveUndefinedVariables ? undefined : resultantValue,
 		// Array of variable names used in resolving this value
 		variablesUsed: variablesUsedInValue,
 		// Any warnings generated from parsing this value

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "postcss-css-variables",
-  "version": "0.19.0",
+  "name": "postcss-calc-css-variables",
+  "version": "0.20.0",
   "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
   "keywords": [
     "postcss",