Fix MadLittleMods#6 - var. use in comma separated selector 0.3.6

Author: MadLittleMods

CHANGELOG.md

@@ -1,4 +1,8 @@
 
+# v0.3.6 - 2015-5-21
+
+ - Fix #6. Variable usage in comma separated selector to use proper scope
+
 # v0.3.5 - 2015-5-12
 
  - Big refactor of code to reduce cyclomatic complexity. Still needs work though.

README.md

@@ -8,7 +8,7 @@ CSS variables or CSS Custom Properties limited subset polyfill/shim.
 
 We strive for the most complete transformation but we/no plugin can achieve true complete parity according to the [specification](http://dev.w3.org/csswg/css-variables/) because of the DOM cascade unknowns.
 
-## Latest Version: v0.3.5
+## Latest Version: v0.3.6
 ### [Changelog](https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md)
 
 ### Install

index.js

@@ -1,5 +1,5 @@
 // PostCSS CSS Variables (postcss-css-variables)
-// v0.3.5
+// v0.3.6
 //
 // https://github.com/MadLittleMods/postcss-css-variables
 
@@ -9,12 +9,8 @@
 var postcss = require('postcss');
 var extend = require('extend');
 
-var cloneSpliceParentOntoNodeWhen = require('./lib/clone-splice-parent-onto-node-when');
-var findNodeAncestorWithSelector = require('./lib/find-node-ancestor-with-selector');
 var resolveValue = require('./lib/resolve-value');
-var isNodeUnderScope = require('./lib/is-node-under-scope');
-var generateScopeList = require('./lib/generate-scope-list');
-var gatherVariableDependencies = require('./lib/gather-variable-dependencies');
+var resolveDecl = require('./lib/resolve-decl');
 
 
 // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS)
@@ -36,49 +32,22 @@ function eachCssVariableDeclaration(css, cb) {
 }
 
 
-function eachMapItemUnderAtRuleUsedByVariable(variablesUsedList, map, decl, cb) {
-	// Now find any at-rule declarations that pertains to each rule
-	// Loop through the variables used
-	variablesUsedList.forEach(function(variableUsedName) {
-
-		// Find anything in the map that corresponds to that variable
-		gatherVariableDependencies(variablesUsedList, map).deps.forEach(function(mapItem) {
-			if(mapItem.isUnderAtRule) {
-				
-				// Get the inner-most selector of the at-rule scope variable declaration we are matching
-				//		Because the inner-most selector will be the same for each branch, we can look at the first one [0] or any of the others
-				var varDeclScopeList = generateScopeList(mapItem.parent, true);
-				var innerMostAtRuleSelector = varDeclScopeList[0].slice(-1)[0];
-				var nodeToSpliceParentOnto = findNodeAncestorWithSelector(innerMostAtRuleSelector, decl.parent);
-
-				// Splice on where the selector starts matching the selector inside at-rule
-				// See: `test/fixtures/cascade-on-nested-rules.css`
-				var varDeclAtRule = mapItem.parent.parent;
-				var mimicDecl = cloneSpliceParentOntoNodeWhen(decl, varDeclAtRule, function(ancestor) {
-					return ancestor === nodeToSpliceParentOnto;
-				});
-
 
-				//console.log('amd og', generateScopeList(decl.parent, true));
-				//console.log('amd', generateScopeList(mimicDecl.parent, true));
-				//console.log(generateScopeList(mapItem.parent, true));
-				//console.log('amd isNodeUnderScope', isNodeUnderScope(mimicDecl.parent, mapItem.parent), mapItem.decl.value);
+function cleanUpNode(currentNodeToRemove) {
+	// If we removed all of the declarations in the rule(making it empty), then just remove it
+	var currentNodeToPossiblyCleanUp = currentNodeToRemove;
+	while(currentNodeToPossiblyCleanUp && currentNodeToPossiblyCleanUp.nodes.length <= 0) {
+		var nodeToRemove = currentNodeToPossiblyCleanUp;
+		// Get a reference to it before we remove and lose reference to the child after removing it
+		currentNodeToPossiblyCleanUp = currentNodeToPossiblyCleanUp.parent;
 
-				// If it is under the proper scope,
-				// we need to check because we are iterating over all map entries that are `isUnderAtRule`
-				// Then lets create the new rules
-				if(isNodeUnderScope(mimicDecl.parent, mapItem.parent)) {
-					cb(mimicDecl, mapItem);
-				}
-			}
-		});
-	});
+		nodeToRemove.removeSelf();
+	}
 }
 
 
 
 
-
 module.exports = postcss.plugin('postcss-css-variables', function(options) {
 	var defaults = {
 		// Allows you to preserve custom properties & var() usage in output.
@@ -100,9 +69,6 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 		try {
 		/* */
 
-		// List of nodes to add at the end
-		// We use this so we don't add to the tree as we are processing it (infinite loop)
-		var createNodeCallbackList = [];
 		// List of nodes that if empty, will be removed
 		// We use this because we don't want to modify the AST when we still need to reference these later on
 		var nodesToRemoveAtEnd = [];
@@ -203,102 +169,76 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 			//else {}
 
 			// We add to the clean up list if we removed some variable declarations to make it become an empty rule
+			// We clean up later on because we don't want to modify the AST when we still need to reference these later on
 			if(declParentRule.nodes.length <= 0) {
 				nodesToRemoveAtEnd.push(declParentRule);
 			}
 		});
 
 
 
+
+
 		// Resolve variables everywhere
 		// ---------------------------------------------------------
 		// ---------------------------------------------------------
-		css.eachDecl(function(decl) {
-			// Ignore any variable declarations that we may be preserving from earlier
-			// Don't worry, they are already processed
-			// If not a variable decalaraton... then resolve
-			if(!RE_VAR_PROP.test(decl.prop)) {
-
-
-				// Grab the balue for this declarations
-				var valueResults = logResolveValueResult(resolveValue(decl, map));
-
 
-				// Resolve the cascade
-				// Now find any at-rule declarations that need to be added below each rule
-				eachMapItemUnderAtRuleUsedByVariable(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
-					// Create the clean atRule for which we place the declaration under
-					var atRuleNode = mapItem.parent.parent.clone().removeAll();
-
-					var ruleClone = decl.parent.clone().removeAll();
-					var declClone = decl.clone();
-					declClone.value = logResolveValueResult(resolveValue(mimicDecl, map)).value;
+		// Collect all the rules that have declarations that use variables
+		var rulesThatHaveDeclarationsWithVariablesList = [];
+		css.eachRule(function(rule) {
+			var doesRuleUseVariables = rule.nodes.some(function(node) {
+				if(node.type == 'decl') {
+					var decl = node;
+					// If it uses variables
+					// and is not a variable declarations that we may be preserving from earlier
+					if(resolveValue.RE_VAR_FUNC.test(decl.value) && !RE_VAR_PROP.test(decl.prop)) {
+						return true;
+					}
+				}
 
-					// Add the declaration to our new rule
-					ruleClone.append(declClone);
-					// Add the rule to the atRule
-					atRuleNode.append(ruleClone);
+				return false;
+			});
 
+			if(doesRuleUseVariables) {
+				rulesThatHaveDeclarationsWithVariablesList.push(rule);
+			}
+		});
 
-					// Since that atRuleNode can be nested in other atRules, we need to make the appropriate structure
-					var parentAtRuleNode = atRuleNode;
-					var currentAtRuleNode = mapItem.parent.parent;
-					while(currentAtRuleNode.parent.type === 'atrule') {
-						// Create a new clean clone of that at rule to nest under
-						var newParentAtRuleNode = currentAtRuleNode.parent.clone().removeAll();
+		rulesThatHaveDeclarationsWithVariablesList.forEach(function(rule) {
+			var rulesToWorkOn = [].concat(rule);
+			// Split out the rule into each comma separated selector piece
+			// We only need to split if is actually comma separted(selectors > 1)
+			if(rule.selectors.length > 1) {
+				// Reverse the selectors so that we can cloneAfter in the same comma separated order
+				rulesToWorkOn = rule.selectors.reverse().map(function(selector) {
+					var ruleClone = rule.cloneAfter();
+					ruleClone.selector = selector;
+
+					return ruleClone;
+				});
 
-						// Append the old parent
-						newParentAtRuleNode.append(parentAtRuleNode);
-						// Then set the new one as the current for next iteration
-						parentAtRuleNode = newParentAtRuleNode;
+				rule.removeSelf();
+			}
 
-						currentAtRuleNode = currentAtRuleNode.parent;
+			// Resolve the declarations
+			rulesToWorkOn.forEach(function(ruleToWorkOn) {
+				ruleToWorkOn.nodes.slice(0).forEach(function(node) {
+					if(node.type == 'decl') {
+						var decl = node;
+						resolveDecl(decl, map);
 					}
-
-					createNodeCallbackList.push(function() {
-						// Put the atRuleStructure after the declaration's rule
-						decl.parent.parent.insertAfter(decl.parent, parentAtRuleNode);
-					});
 				});
+			});
 
-
-				// If we are preserving var(...) usage and the value changed meaning it had some
-				if(opts.preserve === true && decl.value !== valueResults.value) {
-					createNodeCallbackList.push(function() {
-						decl.cloneAfter();
-
-						// Set the new value after we are done dealing with at-rule stuff
-						decl.value = valueResults.value;
-					});
-				}
-				else {
-					// Set the new value after we are done dealing with at-rule stuff
-					decl.value = valueResults.value;
-				}
-				
-			}
 		});
 
+		
 
 
-		// Add some nodes that we need to add
-		// We use this so we don't add to the tree as we are processing it (infinite loop)
-		createNodeCallbackList.forEach(function(cb) {
-			cb();
-		});
 
 		// Clean up any nodes we don't want anymore
-		nodesToRemoveAtEnd.forEach(function(currentChildToRemove) {
-			// If we removed all of the declarations in the rule(making it empty), then just remove it
-			var currentNodeToPossiblyCleanUp = currentChildToRemove;
-			while(currentNodeToPossiblyCleanUp && currentNodeToPossiblyCleanUp.nodes.length <= 0) {
-				var nodeToRemove = currentNodeToPossiblyCleanUp;
-				// Get a reference to it before we remove and lose reference to the child after removing it
-				currentNodeToPossiblyCleanUp = currentNodeToPossiblyCleanUp.parent;
-
-				nodeToRemove.removeSelf();
-			}
-		});
+		// We clean up at the end because we don't want to modify the AST when we still need to reference these later on
+		nodesToRemoveAtEnd.forEach(cleanUpNode);
 
 
 		//console.log('map', map);

lib/resolve-decl.js

@@ -0,0 +1,115 @@
+var resolveValue = require('./resolve-value');
+var generateScopeList = require('./generate-scope-list');
+var gatherVariableDependencies = require('./gather-variable-dependencies');
+var isNodeUnderScope = require('./is-node-under-scope');
+
+var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector');
+var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-when');
+
+// Resolve the decl with the computed value
+// Also add in any media queries that change the value as necessary
+function resolveDecl(decl, map, /*optional*/logResolveValueResult) {
+	var _logResolveValueResult = function(valueResults) {
+		if(logResolveValueResult) {
+			logResolveValueResult(valueResults);
+		}
+
+		return valueResults;
+	};
+
+	// Grab the balue for this declarations
+	var valueResults = _logResolveValueResult(resolveValue(decl, map));
+	
+
+
+	// Resolve the cascade
+	// Now find any at-rule declarations that need to be added below each rule
+	eachMapItemUnderAtRuleUsedByVariable(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
+		// Create the clean atRule for which we place the declaration under
+		var atRuleNode = mapItem.parent.parent.clone().removeAll();
+
+		var ruleClone = decl.parent.clone().removeAll();
+		var declClone = decl.clone();
+		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map)).value;
+
+		// Add the declaration to our new rule
+		ruleClone.append(declClone);
+		// Add the rule to the atRule
+		atRuleNode.append(ruleClone);
+
+
+		// Since that atRuleNode can be nested in other atRules, we need to make the appropriate structure
+		var parentAtRuleNode = atRuleNode;
+		var currentAtRuleNode = mapItem.parent.parent;
+		while(currentAtRuleNode.parent.type === 'atrule') {
+			// Create a new clean clone of that at rule to nest under
+			var newParentAtRuleNode = currentAtRuleNode.parent.clone().removeAll();
+
+			// Append the old parent
+			newParentAtRuleNode.append(parentAtRuleNode);
+			// Then set the new one as the current for next iteration
+			parentAtRuleNode = newParentAtRuleNode;
+
+			currentAtRuleNode = currentAtRuleNode.parent;
+		}
+
+		// Put the atRuleStructure after the declaration's rule
+		decl.parent.parent.insertAfter(decl.parent, parentAtRuleNode);
+		
+	});
+
+
+	// If we are preserving var(...) usage and the value changed meaning it had some
+	if(opts.preserve === true && decl.value !== valueResults.value) {
+		decl.cloneAfter();
+	}
+
+	// Set the new value after we are done dealing with at-rule stuff
+	decl.value = valueResults.value;
+	
+}
+
+
+function eachMapItemUnderAtRuleUsedByVariable(variablesUsedList, map, decl, cb) {
+	// Now find any at-rule declarations that pertains to each rule
+	// Loop through the variables used
+	variablesUsedList.forEach(function(variableUsedName) {
+
+		// Find anything in the map that corresponds to that variable
+		gatherVariableDependencies(variablesUsedList, map).deps.forEach(function(mapItem) {
+			if(mapItem.isUnderAtRule) {
+				
+				// Get the inner-most selector of the at-rule scope variable declaration we are matching
+				//		Because the inner-most selector will be the same for each branch, we can look at the first one [0] or any of the others
+				var varDeclScopeList = generateScopeList(mapItem.parent, true);
+				var innerMostAtRuleSelector = varDeclScopeList[0].slice(-1)[0];
+				var nodeToSpliceParentOnto = findNodeAncestorWithSelector(innerMostAtRuleSelector, decl.parent);
+
+				// Splice on where the selector starts matching the selector inside at-rule
+				// See: `test/fixtures/cascade-on-nested-rules.css`
+				var varDeclAtRule = mapItem.parent.parent;
+				var mimicDecl = cloneSpliceParentOntoNodeWhen(decl, varDeclAtRule, function(ancestor) {
+					return ancestor === nodeToSpliceParentOnto;
+				});
+
+
+				//console.log('amd og', generateScopeList(decl.parent, true));
+				//console.log('amd', generateScopeList(mimicDecl.parent, true));
+				//console.log(generateScopeList(mapItem.parent, true));
+				//console.log('amd isNodeUnderScope', isNodeUnderScope(mimicDecl.parent, mapItem.parent), mapItem.decl.value);
+
+				// If it is under the proper scope,
+				// we need to check because we are iterating over all map entries that are `isUnderAtRule`
+				// Then lets create the new rules
+				if(isNodeUnderScope(mimicDecl.parent, mapItem.parent)) {
+					cb(mimicDecl, mapItem);
+				}
+			}
+		});
+	});
+}
+
+
+
+
+module.exports = resolveDecl;

lib/resolve-value.js

@@ -7,8 +7,8 @@ var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-whe
 
 
 
-// matches `name[, fallback]`, captures "name" and "fallback"
 // 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*(.+))?\)/);
 
@@ -95,5 +95,7 @@ var resolveValue = function(decl, map, _debugIsInternal) {
 	};
 };
 
+resolveValue.RE_VAR_FUNC = RE_VAR_FUNC;
+
 
 module.exports = resolveValue;