Add variable dependency pseudo selector support

Author: MadLittleMods

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v0.3.8 - 2015-5-28
+
+ - Add support for pseudo selectors `:hover` `:before`
 
 # v0.3.7 - 2015-5-27
 

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.7
+## Latest Version: v0.3.8
 ### [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.7
+// v0.3.8
 //
 // https://github.com/MadLittleMods/postcss-css-variables
 
@@ -46,26 +46,26 @@ function cleanUpNode(currentNodeToRemove) {
 }
 
 
-
+var defaults = {
+	// Allows you to preserve custom properties & var() usage in output.
+	// `true`, `false`, or `'computed'`
+	preserve: false,
+	// Define variables via JS
+	// Simple key-value pair
+	// or an object with a `value` property and an optional `isImportant` bool property
+	variables: {}
+};
 
 module.exports = postcss.plugin('postcss-css-variables', function(options) {
-	var defaults = {
-		// Allows you to preserve custom properties & var() usage in output.
-		// `true`, `false`, or `'computed'`
-		preserve: false,
-		// Define variables via JS
-		// Simple key-value pair
-		// or an object with a `value` property and an optional `isImportant` bool property
-		variables: {}
-	};
+	
 	opts = extend({}, defaults, options);
 
 	// Work with opts here
 
 	return function (css, result) {
 		// Transform CSS AST here
 
-		/* */
+		/* * /
 		try {
 		/* */
 
@@ -243,7 +243,7 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 
 		//console.log('map', map);
 
-		/* */
+		/* * /
 		}
 		catch(e) {
 			//console.log('e', e.message);

lib/is-node-under-scope.js

@@ -1,11 +1,11 @@
 var isUnderScope = require('./is-under-scope');
 var generateScopeList = require('./generate-scope-list');
 
-var isNodeUnderScope = function(node, scopeNode) {
+var isNodeUnderScope = function(node, scopeNode, /*optional*/ignorePseudo) {
 	var nodeScopeList = generateScopeList(node, true);
 	var scopeNodeScopeList = generateScopeList(scopeNode, true);
 
-	return isUnderScope(nodeScopeList, scopeNodeScopeList);
+	return isUnderScope(nodeScopeList, scopeNodeScopeList, ignorePseudo);
 };
 
 module.exports = isNodeUnderScope;

lib/is-under-scope.js

@@ -7,7 +7,7 @@ var RE_AT_RULE_SCOPE_PIECE  = (/^@.*/);
 // This will match pseudo selectors that have a base part
 // ex. .foo:hover
 // It will NOT match `:root`
-var RE_PSEUDO_SELECTOR = (/([^\s]+)((?::|::).*?)(?:\s+|$)/);
+var RE_PSEUDO_SELECTOR = (/([^\s:]+)((?::|::)[^\s]*?)(\s+|$)/);
 
 
 function getScopeMatchResults(nodeScopeList, scopeNodeScopeList) {
@@ -17,20 +17,9 @@ function getScopeMatchResults(nodeScopeList, scopeNodeScopeList) {
 	// Check each comma separated piece of the complex selector
 	var doesMatchScope = scopeNodeScopeList.some(function(scopeNodeScopePieces) {
 		return nodeScopeList.some(function(nodeScopePieces) {
-			// Because we only care about the scopeNodeScope matching to the nodeScope
-			// Remove the pseudo selectors from the nodeScope so it can match a broader version
-			// ex. `.foo:hover` can resolve variables from `.foo`
-			nodeScopePieces = nodeScopePieces
-				.map(function(descendantPiece) {
-					// If not an at-rule piece, remove the pseudo selector part `@media (max-width: 300px)`
-					if(!RE_AT_RULE_SCOPE_PIECE.test(descendantPiece)) {
-						return descendantPiece.replace(new RegExp(RE_PSEUDO_SELECTOR.source, 'g'), function(whole, baseSelector, pseudo) {
-							return baseSelector;
-						});
-					}
 
-					return descendantPiece;
-				});
+			//console.log('sp', scopeNodeScopePieces);
+			//console.log('np', nodeScopePieces);
 
 			currentPieceOffset = null;
 			var wasEveryPieceFound = true;
@@ -123,6 +112,19 @@ function getScopeMatchResults(nodeScopeList, scopeNodeScopeList) {
 
 
 
+var stripPseudoSelectorsFromScopeList = function(scopeList) {
+	return scopeList.map(function(scopePieces) {
+		return scopePieces.map(function(descendantPiece) {
+				// If not an at-rule piece, remove the pseudo selector part `@media (max-width: 300px)`
+				if(!RE_AT_RULE_SCOPE_PIECE.test(descendantPiece)) {
+					return descendantPiece.replace(new RegExp(RE_PSEUDO_SELECTOR.source, 'g'), function(whole, baseSelector, pseudo, trailingWhitespace) {
+						return baseSelector + trailingWhitespace;
+					});
+				}
+				return descendantPiece;
+			});
+	});
+};
 
 
 // Given the nodes scope, and the target scope,
@@ -131,8 +133,19 @@ function getScopeMatchResults(nodeScopeList, scopeNodeScopeList) {
 // Another way to think about it: Can the target scope cascade properties to the node?
 //
 // For scope-lists see: `generateScopeList`
-var isUnderScope = function isUnderScope(nodeScopeList, scopeNodeScopeList) {
+var isUnderScope = function(nodeScopeList, scopeNodeScopeList, /*optional*/ignorePseudo) {
+	// Because we only care about the scopeNodeScope matching to the nodeScope
+	// Remove the pseudo selectors from the nodeScope so it can match a broader version
+	// ex. `.foo:hover` can resolve variables from `.foo`
+	nodeScopeList = stripPseudoSelectorsFromScopeList(nodeScopeList);
+
+	if(ignorePseudo) {
+		scopeNodeScopeList = stripPseudoSelectorsFromScopeList(scopeNodeScopeList);
+	}
+
 	return getScopeMatchResults(nodeScopeList, scopeNodeScopeList).doesMatchScope;
 };
 
+isUnderScope.RE_PSEUDO_SELECTOR = RE_PSEUDO_SELECTOR;
+
 module.exports = isUnderScope;

lib/resolve-decl.js

@@ -1,6 +1,8 @@
 var resolveValue = require('./resolve-value');
 var generateScopeList = require('./generate-scope-list');
 var gatherVariableDependencies = require('./gather-variable-dependencies');
+
+var isUnderScope = require('./is-under-scope');
 var isNodeUnderScope = require('./is-node-under-scope');
 
 var findNodeAncestorWithSelector = require('./find-node-ancestor-with-selector');
@@ -24,40 +26,50 @@ function resolveDecl(decl, map, /*optional*/logResolveValueResult) {
 
 
 
-	// Resolve the cascade
+	// Resolve the cascade dependencies
 	// 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();
-
+	eachMapItemDependencyOfDecl(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
 		var ruleClone = decl.parent.clone().removeAll();
 		var declClone = decl.clone();
-		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map)).value;
+		// No mangle resolve
+		declClone.value = _logResolveValueResult(resolveValue(mimicDecl, map, true)).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();
+		if(mapItem.isUnderAtRule) {
+			// Create the clean atRule for which we place the declaration under
+			var atRuleNode = mapItem.parent.parent.clone().removeAll();
+
+			// Add the rule to the atRule
+			atRuleNode.append(ruleClone);
+
 
-			// Append the old parent
-			newParentAtRuleNode.append(parentAtRuleNode);
-			// Then set the new one as the current for next iteration
-			parentAtRuleNode = newParentAtRuleNode;
+			// 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;
+			}
 
-			currentAtRuleNode = currentAtRuleNode.parent;
+			// Put the atRuleStructure after the declaration's rule
+			decl.parent.parent.insertAfter(decl.parent, parentAtRuleNode);
 		}
+		else {
+			ruleClone.selector = mimicDecl.parent.selector;
 
-		// Put the atRuleStructure after the declaration's rule
-		decl.parent.parent.insertAfter(decl.parent, parentAtRuleNode);
-		
+			// Put the atRuleStructure after the declaration's rule
+			decl.parent.parent.insertAfter(decl.parent, ruleClone);
+		}
 	});
 
 
@@ -72,13 +84,15 @@ function resolveDecl(decl, map, /*optional*/logResolveValueResult) {
 }
 
 
-function eachMapItemUnderAtRuleUsedByVariable(variablesUsedList, map, decl, cb) {
+function eachMapItemDependencyOfDecl(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) {
+			
+			var mimicDecl;
 			if(mapItem.isUnderAtRule) {
 
 				// Get the inner-most selector of the at-rule scope variable declaration we are matching
@@ -90,7 +104,7 @@ function eachMapItemUnderAtRuleUsedByVariable(variablesUsedList, map, decl, cb)
 				// 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) {
+				mimicDecl = cloneSpliceParentOntoNodeWhen(decl, varDeclAtRule, function(ancestor) {
 					return ancestor === nodeToSpliceParentOnto;
 				});
 
@@ -99,13 +113,27 @@ function eachMapItemUnderAtRuleUsedByVariable(variablesUsedList, map, decl, cb)
 				//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);
+			}
+			// TODO: use regex from `isUnderScope`
+			else if(isUnderScope.RE_PSEUDO_SELECTOR.test(mapItem.parent.selector)) {
+				// Create a detached clone
+				var ruleClone = decl.parent.clone().removeAll();
+				ruleClone.parent = decl.parent.parent;
+
+				// Add the declaration to it
+				mimicDecl = decl.clone();
+				ruleClone.append(mimicDecl);
+
+				var lastPseudoSelectorMatches = mapItem.parent.selector.match(new RegExp(isUnderScope.RE_PSEUDO_SELECTOR.source + '$'));
+				var lastPseudoSelector = lastPseudoSelectorMatches ? lastPseudoSelectorMatches[2] : '';
+
+				ruleClone.selector += lastPseudoSelector;
+			}
 
-				// 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);
-				}
+			// If it is under the proper scope,
+			// we need to check because we are iterating over all map entries
+			if(mimicDecl && isNodeUnderScope(mimicDecl, mapItem.parent, true)) {
+				cb(mimicDecl, mapItem);
 			}
 		});
 	});

lib/resolve-value.js

@@ -14,11 +14,13 @@ var RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/);
 
 // Pass in a value string to parse/resolve and a map of available values
 // and we can figure out the final value
+//
+// `ignorePseudoScope`: Optional bool to determine whether the scope resolution should be left alone or not
 // 
 // 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, /*internal debugging*/_debugIsInternal) {
+var resolveValue = function(decl, map, /*optional*/ignorePseudoScope, /*internal debugging*/_debugIsInternal) {
 
 	var resultantValue = decl.value;
 	var warnings = [];
@@ -51,7 +53,7 @@ var resolveValue = function(decl, map, /*internal debugging*/_debugIsInternal) {
 			//console.log(debugIndent, 'isNodeUnderScope', isNodeUnderScope(decl.parent, varDeclMapItem.parent), varDeclMapItem.decl.value);
 
 			if(
-				isNodeUnderScope(decl.parent, varDeclMapItem.parent) &&
+				isNodeUnderScope(decl.parent, varDeclMapItem.parent, ignorePseudoScope) &&
 				// And if the currently matched declaration is `!important`, it will take another `!important` to override it
 				(!(matchingVarDeclMapItem || {}).isImportant || varDeclMapItem.isImportant)
 			) {
@@ -73,7 +75,7 @@ var resolveValue = function(decl, map, /*internal debugging*/_debugIsInternal) {
 				return ancestor === nodeToSpliceParentOnto;
 			});
 
-			replaceValue = resolveValue(matchingMimicDecl, map, true).value;
+			replaceValue = resolveValue(matchingMimicDecl, map, /*internal*/true).value;
 		}
 
 		isResultantValueUndefined = replaceValue === undefined;

package.json

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

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

@@ -0,0 +1,22 @@
+.foo {
+	--foo-color: #ff0000;
+	color: var(--foo-color);
+}
+
+.foo:hover {
+	--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

@@ -0,0 +1,7 @@
+.foo {
+	color: #ff0000;
+}
+
+.foo:hover {
+	color: #00ff00;
+}

test/test.js

@@ -96,6 +96,11 @@ describe('postcss-css-variables', function() {
 		return testPlugin('./test/fixtures/pseudo-selector.css', './test/fixtures/pseudo-selector.expected.css');
 	});
 
+	it('should work with variables declared in pseudo selectors', function() {
+		return testPlugin('./test/fixtures/pseudo-selector-declare-variable.css', './test/fixtures/pseudo-selector-declare-variable.expected.css');
+	});
+
+
 
 	it('should work with variables defined in comma separated selector', function() {
 		return testPlugin('./test/fixtures/comma-separated-variable-declaration.css', './test/fixtures/comma-separated-variable-declaration.expected.css');