Add support for child combinator. Fix MadLittleMods#7 - v0.3.7

Author: MadLittleMods

CHANGELOG.md

@@ -1,4 +1,9 @@
 
+# v0.3.7 - 2015-5-27
+
+ - Fix #7: Support for child combinator
+ - Added tests for child combinator coverage
+
 # v0.3.6 - 2015-5-21
 
  - Fix #6. Variable usage in comma separated selector to use proper scope

index.js

@@ -1,5 +1,5 @@
 // PostCSS CSS Variables (postcss-css-variables)
-// v0.3.6
+// v0.3.7
 //
 // https://github.com/MadLittleMods/postcss-css-variables
 
@@ -65,7 +65,7 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 	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/generate-descendant-pieces-from-selector.js

@@ -1,8 +1,8 @@
-// Unit Tests: https://regex101.com/r/oP0fM9/13
+// Unit Tests: https://regex101.com/r/oP0fM9/15
 //
 // It is a shame the regex has to be this long. Maybe a CSS selector parser would be better.
 // We could almost use `/\b\s(?![><+~][\s]+?)/` to split the selector but this doesn't work with attribute selectors
-var RE_SELECTOR_DESCENDANT_SPLIT = (/(.*?(?:(?:\[[^\]]+\]|(?![><+~\s]).)+)(?:(?:(?:\s(?!>>))|(?:\t(?!>>))|(?:\s?>>\s?))(?!\s+))(?![><+~][\s]+?))/);
+var RE_SELECTOR_DESCENDANT_SPLIT = (/(.*?(?:(?:\([^\)]+\)|\[[^\]]+\]|(?![><+~\s]).)+)(?:(?:(?:\s(?!>>))|(?:\t(?!>>))|(?:\s?>>\s?))(?!\s+))(?![><+~][\s]+?))/);
 
 
 var generateDescendantPiecesFromSelector = function(selector) {

lib/generate-direct-descendant-pieces-from-selector.js

@@ -0,0 +1,23 @@
+// Unit Tests: https://regex101.com/r/oS4zJ8/3
+
+var RE_SELECTOR_DIRECT_DESCENDANT_SPLIT = (/(.*?(?:(?:\([^\)]+\)|\[[^\]]+\]|(?!>>|<|\+|~|\s).)+)(?:(?:(?:>(?!>))|(?:\s?>(?!>)\s?))(?!\s+))(?!(?:>>|<|\+|~)[\s]+?))/);
+
+
+var generateDirectDescendantPiecesFromSelector = function(selector) {
+	return selector.split(RE_SELECTOR_DIRECT_DESCENDANT_SPLIT)
+		.filter(function(piece) {
+			if(piece.length > 0) {
+				return true;
+			}
+			return false;
+		})
+		.map(function(piece) {
+			// Trim whitespace which would be a normal descendant selector
+			// and trim off the CSS4 descendant `>>` into a normal descendant selector
+			return piece.trim().replace(/\s*?>\s*?/, function(match) {
+				return '';
+			});
+		});
+};
+
+module.exports = generateDirectDescendantPiecesFromSelector;

lib/is-under-scope.js

@@ -1,61 +1,123 @@
 var escapeStringRegexp = require('escape-string-regexp');
 
-var isPieceIsAlwaysAncestorSelector = require('./is-piece-always-ancestor-selector');
+var isPieceAlwaysAncestorSelector = require('./is-piece-always-ancestor-selector');
+var generateDirectDescendantPiecesFromSelector = require('./generate-direct-descendant-pieces-from-selector');
 
-// Given the nodes scope, and the target scope,
-// Is the node in the same or under the target scope (cascade wise)
-//
-// Another way to think about it: Can the target cascade properties to the node?
-//
-// For scope-lists see: `generateScopeList`
-var isUnderScope = function(nodeScopeList, scopeNodeScopeList) {
-	var matchesScope = scopeNodeScopeList.some(function(scopeNodeScopePieces) {
+
+
+function asdfqwer(nodeScopeList, scopeNodeScopeList) {
+	var currentPieceOffset;
+	var scopePieceIndex;
+
+	// Check each comma separated piece of the complex selector
+	var doesMatchScope = scopeNodeScopeList.some(function(scopeNodeScopePieces) {
 		return nodeScopeList.some(function(nodeScopePieces) {
-			var currentPieceOffset;
-			var wasEveryPieceFound = scopeNodeScopePieces.every(function(scopePiece) {
+
+
+			currentPieceOffset = null;
+			var wasEveryPieceFound = true;
+			// scopeNodeScopePieces.every(function(scopePiece) {
+			for(scopePieceIndex = 0; scopePieceIndex < scopeNodeScopePieces.length; scopePieceIndex++) {
+				var scopePiece = scopeNodeScopePieces[scopePieceIndex];
 				var pieceOffset = currentPieceOffset || 0;
 
 				var foundIndex = -1;
-				var firstAlwaysAncestorPieceIndex = -1;
 				// Look through the remaining pieces(start from the offset)
 				var piecesWeCanMatch = nodeScopePieces.slice(pieceOffset);
-				piecesWeCanMatch.some(function(nodeScopePiece, index) {
-					var overallIndex = pieceOffset + index;
-
-					if(firstAlwaysAncestorPieceIndex < 0 && isPieceIsAlwaysAncestorSelector(nodeScopePiece)) {
-						firstAlwaysAncestorPieceIndex = overallIndex;
-					}
+				//piecesWeCanMatch.some(function(nodeScopePiece, index) {
+				for(var nodeScopePieceIndex = 0; nodeScopePieceIndex < piecesWeCanMatch.length; nodeScopePieceIndex++) {
+					var nodeScopePiece = piecesWeCanMatch[nodeScopePieceIndex];
+					var overallIndex = pieceOffset + nodeScopePieceIndex;
 
 					// Find the scope piece at the end of the node selector
 					// Last-occurence
-					if(new RegExp(escapeStringRegexp(scopePiece) + '$').test(nodeScopePiece)) {
+					if(
+						// If the part on the end of the piece itself matches:
+						//		scopePiece `.bar` matches node `.bar`
+						//		scopePiece `.bar` matches node `.foo + .bar`
+						new RegExp(escapeStringRegexp(scopePiece) + '$').test(nodeScopePiece)
+					) {
 						foundIndex = overallIndex;
-						// Escape
-						return true;
+						break;
+					}
+
+
+					// If the scope piece is a always-ancestor, then it is valid no matter what
+					//
+					// Or the node scope piece could be an always-ancestor selector itself
+					// And we only want the first occurence so we can keep matching future scope pieces
+					if(isPieceAlwaysAncestorSelector(scopePiece) || isPieceAlwaysAncestorSelector(nodeScopePiece)) { 
+						foundIndex = overallIndex;
+
+						break;
+					}
+
+
+					// Handle any direct descendant operators in each piece
+					var directDescendantPieces = generateDirectDescendantPiecesFromSelector(nodeScopePiece);
+					if(directDescendantPieces.length > 1) {
+
+						var ddNodeScopeList = [].concat([directDescendantPieces]);
+						var ddScopeList = [].concat([
+							scopeNodeScopePieces
+								.slice(scopePieceIndex)
+								.reduce(function(prevScopePieces, scopePiece) {
+									return prevScopePieces.concat(generateDirectDescendantPiecesFromSelector(scopePiece));
+								}, [])
+						]);
+						var result = asdfqwer(ddNodeScopeList, ddScopeList);
+
+						// If it matches completely
+						// or there are still more pieces to match in the future
+						if(result.doesMatchScope || scopePieceIndex+1 < scopeNodeScopePieces.length) {
+							foundIndex = overallIndex;
+							// -1 because the fo loop increments at the top
+							scopePieceIndex += result.scopePieceIndex-1;
+						}
+
+						break;
+					}
+
+					if(directDescendantPieces.length > 1) {
+						var asdf = scopeNodeScopePieces.slice(scopePieceIndex);
+
 					}
-					return false;
-				});
-				// If the scope piece is a always-ancestor, then it is valid no matter what
-				if(foundIndex < 0 && isPieceIsAlwaysAncestorSelector(scopePiece)) {
-					foundIndex = pieceOffset + 1;
-				}
-				// The piece could be a always-ancestor selector itself
-				// And we only want the first occurence so we can keep matching future scope pieces
-				else if(foundIndex < 0 && firstAlwaysAncestorPieceIndex > 0) {
-					foundIndex = firstAlwaysAncestorPieceIndex;
 				}
+				
 
-				var isFurther = foundIndex > pieceOffset || (foundIndex >= 0 && currentPieceOffset === undefined);
+				var isFurther = foundIndex >= pieceOffset;
 
-				currentPieceOffset = foundIndex;
-				return isFurther;
-			});
+				currentPieceOffset = foundIndex+1;
+
+				wasEveryPieceFound = wasEveryPieceFound && isFurther;
+				if(!wasEveryPieceFound) {
+					break;
+				}
+			}
 
 			return wasEveryPieceFound;
 		});
 	});
 
-	return matchesScope;
+	return {
+		doesMatchScope: doesMatchScope,
+		nodeScopePieceIndex: currentPieceOffset-1,
+		scopePieceIndex: scopePieceIndex
+	};
+}
+
+
+
+
+
+// Given the nodes scope, and the target scope,
+// Is the node in the same or under the target scope (cascade wise)
+//
+// 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) {
+	return asdfqwer(nodeScopeList, scopeNodeScopeList).doesMatchScope;
 };
 
 module.exports = isUnderScope;

lib/resolve-decl.js

@@ -17,6 +17,8 @@ function resolveDecl(decl, map, /*optional*/logResolveValueResult) {
 		return valueResults;
 	};
 
+
+
 	// Grab the balue for this declarations
 	var valueResults = _logResolveValueResult(resolveValue(decl, map));
 

lib/resolve-value.js

@@ -18,7 +18,7 @@ var RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/);
 // 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, _debugIsInternal) {
+var resolveValue = function(decl, map, /*internal debugging*/_debugIsInternal) {
 
 	var resultantValue = decl.value;
 	var warnings = [];
@@ -31,7 +31,6 @@ var resolveValue = function(decl, map, _debugIsInternal) {
 	var variablesUsedInValue = Object.keys(variablesUsedInValueMap);
 
 
-
 	// Resolve any var(...) substitutons
 	var isResultantValueUndefined = false;
 	resultantValue = resultantValue.replace(new RegExp(RE_VAR_FUNC.source, 'g'), function(match, variableName, fallback) {
@@ -50,7 +49,7 @@ var resolveValue = function(decl, map, _debugIsInternal) {
 			//console.log(debugIndent, generateScopeList(decl.parent, true));
 			//console.log(debugIndent, generateScopeList(varDeclMapItem.parent, true));
 			//console.log(debugIndent, 'isNodeUnderScope', isNodeUnderScope(decl.parent, varDeclMapItem.parent), varDeclMapItem.decl.value);
-			
+
 			if(
 				isNodeUnderScope(decl.parent, varDeclMapItem.parent) &&
 				// And if the currently matched declaration is `!important`, it will take another `!important` to override it

package.json

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

test/fixtures/direct-descendant-selector-descendant-scope.css

@@ -0,0 +1,31 @@
+
+.baz {
+	--baz-width: 180px;
+}
+
+.baz .qux {
+	--baz-width: 300px;
+}
+
+.baz > .qux > .wan {
+	width: var(--baz-width);
+}
+
+.some-parent > .baz > .qux > .wan {
+	width: var(--baz-width);
+}
+
+.some-parent > .baz > .wan > .qux {
+	width: var(--baz-width);
+}
+
+
+
+
+.baz .qux .further-child {
+	--baz-width: 320px;
+}
+
+.some-parent > .baz > .qux > .wan .further-child .ger {
+	width: var(--baz-width);
+}

test/fixtures/direct-descendant-selector-descendant-scope.expected.css

@@ -0,0 +1,17 @@
+.baz > .qux > .wan {
+	width: 300px;
+}
+
+.some-parent > .baz > .qux > .wan {
+	width: 300px;
+}
+
+.some-parent > .baz > .wan > .qux {
+	width: 300px;
+}
+
+
+
+.some-parent > .baz > .qux > .wan .further-child .ger {
+	width: 320px;
+}

test/fixtures/direct-descendant-selector-direct-descendant-scope.css

@@ -0,0 +1,16 @@
+.foo > .bar {
+	--foo-bar-width: 400px;
+}
+
+.foo > .bar > .baz {
+	width: var(--foo-bar-width);
+}
+
+.qux + .foo > .bar > .baz {
+	width: var(--foo-bar-width);
+}
+
+.foo > .bar + .baz {
+	/* undefined */
+	width: var(--foo-bar-width);
+}

test/fixtures/direct-descendant-selector-direct-descendant-scope.expected.css

@@ -0,0 +1,12 @@
+.foo > .bar > .baz {
+	width: 400px;
+}
+
+.qux + .foo > .bar > .baz {
+	width: 400px;
+}
+
+.foo > .bar + .baz {
+	/* undefined */
+	width: undefined;
+}

test/fixtures/direct-descendant-selector.css

@@ -0,0 +1,7 @@
+.foo {
+	--foo-width: 150px;
+}
+
+.foo > .bar {
+	width: var(--foo-width);
+}

test/fixtures/direct-descendant-selector.expected.css

@@ -0,0 +1,3 @@
+.foo > .bar {
+	width: 150px;
+}