Add pseudo selector variable resolution from base

Author: MadLittleMods

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

@@ -16,9 +16,7 @@ var generateDescendantPiecesFromSelector = function(selector) {
 		.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 '';
-			});
+			return piece.trim().replace(/\s*?>>\s*?/g, '');
 		});
 };
 

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

@@ -14,9 +14,7 @@ var generateDirectDescendantPiecesFromSelector = function(selector) {
 		.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 '';
-			});
+			return piece.trim().replace(/\s*?>\s*?/g, '');
 		});
 };
 

lib/is-under-scope.js

@@ -3,6 +3,11 @@ var escapeStringRegexp = require('escape-string-regexp');
 var isPieceAlwaysAncestorSelector = require('./is-piece-always-ancestor-selector');
 var generateDirectDescendantPiecesFromSelector = require('./generate-direct-descendant-pieces-from-selector');
 
+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+|$)/);
 
 
 function getScopeMatchResults(nodeScopeList, scopeNodeScopeList) {
@@ -12,7 +17,20 @@ 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;
+				});
 
 			currentPieceOffset = null;
 			var wasEveryPieceFound = true;

test/fixtures/pseudo-selector.css

@@ -0,0 +1,8 @@
+.foo {
+	--foo-color: #ff0000;
+	color: var(--foo-color);
+}
+
+.foo:before {
+	color: var(--foo-color);
+}

test/fixtures/pseudo-selector.expected.css

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

test/test.js

@@ -92,7 +92,9 @@ describe('postcss-css-variables', function() {
 	});
 
 
-
+	it('should work with pseudo selectors', function() {
+		return testPlugin('./test/fixtures/pseudo-selector.css', './test/fixtures/pseudo-selector.expected.css');
+	});
 
 
 	it('should work with variables defined in comma separated selector', function() {