Add in variable expansion/unroll for defining new variable value where usage could apply

Author: MadLittleMods

index.js

@@ -76,50 +76,99 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 
 
 
+
 		// Collect all of the variables defined
 		// ---------------------------------------------------------
 		// ---------------------------------------------------------
-		eachCssVariableDeclaration(css, function(decl) {
+		eachCssVariableDeclaration(css, function(variableDecl) {
 			// We cache the parent rule because after decl removal, it will be undefined
-			const declParentRule = decl.parent;
-			const variableName = decl.prop;
+			const variableDeclParentRule = variableDecl.parent;
+			const variableName = variableDecl.prop;
+			const variableValue = variableDecl.value;
+			const isImportant = variableDecl.important || false;
+			const variableSelectorBranchs = generateSelectorBranchesFromPostcssNode(variableDeclParentRule);
+
+			debug(`Collecting ${variableName}=${variableValue} isImportant=${isImportant} from ${variableDeclParentRule.selector.toString()}`);
 
 			map[variableName] = (map[variableName] || []).concat({
 				name: variableName,
-				value: decl.value,
-				isImportant: decl.important || false,
-				selectorBranches: generateSelectorBranchesFromPostcssNode(declParentRule)
+				value: variableValue,
+				isImportant,
+				selectorBranches: variableSelectorBranchs
+			});
+
+
+			// Expand/rollout/unroll variable usage
+			// Where we define variables, also add in any usage that falls under scope
+			// ex.
+			// Before:
+			// .foo { --color: #f00; color: var(--color); }
+			// .foo:hover { --color: #0f0; };
+			// After:
+			// .foo { color: #f00; }
+			// .foo:hover { color: #0f0; }
+			// --------------------------------
+			css.walkDecls(function(usageDecl) {
+				// Avoid duplicating the usage decl on itself
+				if(variableDeclParentRule === usageDecl.parent) {
+					return;
+				}
+
+				const usageSelectorBranches = generateSelectorBranchesFromPostcssNode(usageDecl.parent);
+
+				variableSelectorBranchs.some((variableSelectorBranch) => {
+					return usageSelectorBranches.some((usageSelectorBranch) => {
+						// In this case, we look whether the usage is under the scope of the definition
+						const isUnderScope = isSelectorBranchUnderScope(usageSelectorBranch, variableSelectorBranch);
+
+						debug(`Should expand usage? isUnderScope=${isUnderScope}`, usageSelectorBranch.selector.toString(), '|', variableSelectorBranch.selector.toString())
+
+						if(isUnderScope) {
+							usageDecl.value.replace(new RegExp(RE_VAR_FUNC.source, 'g'), (match, matchedVariableName) => {
+								if(matchedVariableName === variableName) {
+									variableDecl.after(usageDecl.clone());
+								}
+							});
+						}
+
+						return isUnderScope;
+					});
+				});
 			});
 
+
+
 			// Remove the variable declaration because they are pretty much useless after we resolve them
 			if(!opts.preserve) {
-				decl.remove();
+				variableDecl.remove();
 			}
 			// Or we can also just show the computed value used for that variable
 			else if(opts.preserve === 'computed') {
 				// TODO: put computed value here
 			}
 
 			// Clean up the rule that declared them if it doesn't have anything left after we potentially remove the variable decl
-			if(declParentRule.nodes.length <= 0) {
-				declParentRule.remove();
+			if(variableDeclParentRule.nodes.length <= 0) {
+				variableDeclParentRule.remove();
 			}
 		});
 
 		debug('map', map);
 
+		debug('After collecting variables ------');
+		debug(css.toString());
+		debug('---------------------------------');
 
 
 		// Resolve variables everywhere
 		// ---------------------------------------------------------
 		// ---------------------------------------------------------
 		css.walkDecls(function(decl) {
-			// If it uses variables
-			// and is not a variable declarations that we may be preserving from earlier
+			// Avoid any variable decls, `--foo: var(--bar);`, that may have been preserved
 			if(!RE_VAR_PROP.test(decl.prop)) {
 				const selectorBranches = generateSelectorBranchesFromPostcssNode(decl.parent);
 
-				decl.value = decl.value.replace(new RegExp(RE_VAR_FUNC.source, 'g'), (match, variableName) => {
+				decl.value = decl.value.replace(new RegExp(RE_VAR_FUNC.source, 'g'), (match, variableName, fallback) => {
 					debug('usage', variableName);
 					const variableEntries = map[variableName] || [];
 
@@ -131,10 +180,11 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 						// We only need to find one branch that matches
 						variableEntry.selectorBranches.some((variableSelectorBranch) => {
 							return selectorBranches.some((selectorBranch) => {
+								// Look whether the variable definition is under the scope of the usage
 								const isUnderScope = isSelectorBranchUnderScope(variableSelectorBranch, selectorBranch);
 								const specificity = getSpecificity(variableSelectorBranch.selector.toString());
 
-								debug(`isUnderScope=${isUnderScope} compareSpecificity=${compareSpecificity(specificity, currentGreatestSpecificity)} specificity=${specificity}`, variableSelectorBranch.selector.toString(), selectorBranch.selector.toString())
+								debug(`isUnderScope=${isUnderScope} compareSpecificity=${compareSpecificity(specificity, currentGreatestSpecificity)} specificity=${specificity}`, variableSelectorBranch.selector.toString(), '|', selectorBranch.selector.toString())
 
 								if(isUnderScope && compareSpecificity(specificity, currentGreatestSpecificity) >= 0) {
 									currentGreatestSpecificity = specificity;
@@ -148,7 +198,13 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 
 					debug('currentGreatestVariableEntry', currentGreatestVariableEntry);
 
-					return currentGreatestVariableEntry.value;
+					const resultantValue = (currentGreatestVariableEntry && currentGreatestVariableEntry.value) || fallback;
+
+					if(!resultantValue) {
+						result.warn(['variable ' + variableName + ' is undefined and used without a fallback', { node: decl }]);
+					}
+
+					return resultantValue || 'undefined';
 				});
 			}
 		});

test/fixtures/missing-variable-should-fallback-calc.css

@@ -1,7 +1,7 @@
 :root {
-    --foo1: 150px;
+	--foo1: 150px;
 }
 
 .box-bar {
-     width: var(--missing,calc(var(--foo1) + 100px));
+	width: var(--missing,calc(var(--foo1) + 100px));
 }

test/fixtures/missing-variable-should-fallback-calc.expected.css

@@ -1,3 +1,3 @@
 .box-bar {
-     width: calc(150px + 100px);
-}
+	width: calc(150px + 100px);
+}

test/fixtures/missing-variable-should-fallback-var.css

@@ -1,12 +1,12 @@
 :root {
-    --foo-default: 100px;
-    --foo-width: 150px;
+	--foo-default: 100px;
+	--foo-width: 150px;
 }
 
 .box-foo {
-    width: var(--missing);
+	width: var(--missing);
 }
 
 .box-bar {
-    width: var(--missing, var(--foo-default));
-}
+	width: var(--missing, var(--foo-default));
+}

test/fixtures/missing-variable-should-fallback-var.expected.css

@@ -1,7 +1,7 @@
 .box-foo {
-    width: undefined;
+	width: undefined;
 }
 
 .box-bar {
-    width: 100px;
-}
+	width: 100px;
+}

test/fixtures/pseudo-selector-declare-variable.css

@@ -7,16 +7,15 @@
 	--foo-color: #00ff00;
 }
 
-
-/* This should add nothing to `.foo`, wrong scope */
 .bar:hover + .foo {
 	--foo-color: #f0f000;
 }
+
 /* This should add nothing to `.foo`, wrong scope */
 .foo:hover + .bar {
 	--foo-color: #0000ff;
 }
 /* This should add nothing to `.foo`, wrong scope */
 .foo:hover + .bar:focus {
 	--foo-color: #000f0f;
-}
+}

test/fixtures/pseudo-selector-declare-variable.expected.css

@@ -5,3 +5,7 @@
 .foo:hover {
 	color: #00ff00;
 }
+
+.bar:hover + .foo {
+	color: #f0f000;
+}

test/test.js

@@ -35,14 +35,18 @@ var testPlugin = function(filePath, expectedFilePath, options) {
 					preset: { plugins: [normalizeWhitespace, discardComments] }
 				})
 			])
-				.process(String(actualBuffer));
+				.process(String(actualBuffer), {
+					from: filePath,
+				});
 
 			var expectedResult = postcss([
 				cssnano({
 					preset: { plugins: [normalizeWhitespace, discardComments] }
 				})
 			])
-				.process(String(expectedBuffer));
+				.process(String(expectedBuffer), {
+					from: expectedFilePath,
+				});
 
 			return Promise.props({
 				actualResult: actualResult,
@@ -56,7 +60,7 @@ var testPlugin = function(filePath, expectedFilePath, options) {
 
 var fixtureBasePath = './test/fixtures/';
 var test = function(message, fixtureName, options) {
-	it(message, function() {
+	it(`${message} (${fixtureName})`, function() {
 		return testPlugin(
 			path.join(fixtureBasePath, fixtureName + '.css'),
 			path.join(fixtureBasePath, fixtureName + '.expected.css'),