postcss-css-variables - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

CHANGELOG.md

 
+# v0.3.2 - 2015-5-11
+
+ - Add support for last piece of combinator chain in selector resolution matching. 
+ 	 - `.foo + .bar` can match variables declared in `.bar`
+
+
 # v0.3.1 - 2015-5-5
@@ -3,0 +9,0 @@

index.js

 // PostCSS CSS Variables (postcss-css-variables)
-// v0.3.1
+// v0.3.2
 //
@@ -11,2 +11,3 @@ // https://github.com/MadLittleMods/postcss-css-variables
 var extend = require('extend');
+var escapeStringRegexp = require('escape-string-regexp');
 
@@ -121,2 +122,19 @@ // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS)
 
+function generateDescendantPieces(selector) {
+	return selector.split(RE_SELECTOR_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 '';
+			});
+		});
+}
+
 function generateScopeList(node, /*optional*/includeSelf) {
@@ -165,16 +183,3 @@ includeSelf = includeSelf || false;
 				if(scopeObject.type === 'selector') {
-					descendantPieces = scopeObject.value.split(RE_SELECTOR_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 '';
-							});
-						});
+					descendantPieces = generateDescendantPieces(scopeObject.value);
 				}
@@ -189,2 +194,4 @@
 
+		// Start from a new list so we can
+		// Flatten out the branches a bit and and merge back into the list
 		selectorScopeList = [];
@@ -201,8 +208,4 @@ branches.forEach(function(branch) {
 
-function isUnderScope(node, scopeNode) {
-
-	var nodeScopeList = generateScopeList(node, true);
-	var scopeNodeList = generateScopeList(scopeNode, true);
-
-	var matchesScope = scopeNodeList.some(function(scopeNodeScopePieces) {
+function isUnderScope(nodeScopeList, scopeNodeScopeList) {
+	var matchesScope = scopeNodeScopeList.some(function(scopeNodeScopePieces) {
 		return nodeScopeList.some(function(nodeScopePieces) {
@@ -213,3 +216,16 @@ var currentPieceOffset;
 				// Start from the previous index and make sure we can find it
-				var foundIndex = nodeScopePieces.indexOf(scopePiece, pieceOffset);
+				//var foundIndex = nodeScopePieces.indexOf(scopePiece, pieceOffset);
+
+				var foundIndex = -1;
+				var piecesWeCanMatch = nodeScopePieces.slice(pieceOffset);
+				piecesWeCanMatch.some(function(nodeScopePiece, index) {
+					// Find the scope piece at the end of the node selector
+					// Last-occurence
+					if(new RegExp(escapeStringRegexp(scopePiece) + '$').test(nodeScopePiece)) {
+						foundIndex = pieceOffset + index;
+						// Escape
+						return true;
+					}
+					return false;
+				});
 				// If it is a star or root, then it is valid no matter what
@@ -234,3 +250,11 @@ // We might consider adding `html` and `body` to this list as well
 
+function isNodeUnderNode(node, scopeNode) {
 
+	var nodeScopeList = generateScopeList(node, true);
+	var scopeNodeScopeList = generateScopeList(scopeNode, true);
+
+	return isUnderScope(nodeScopeList, scopeNodeScopeList);
+}
+
+
 // Pass in a value string to parse/resolve and a map of available values
@@ -264,9 +288,7 @@ // and we can figure out the final value
 
-			var mimicDeclParent = decl.parent;
-
-			//console.log(generateScopeList(mimicDeclParent, true));
+			//console.log(generateScopeList(decl.parent, true));
 			//console.log(generateScopeList(varDeclMapItem.parent, true));
-			//console.log('isunderscope', isUnderScope(mimicDeclParent, varDeclMapItem.parent), varDeclMapItem.value);
+			//console.log('isNodeUnderNode', isNodeUnderNode(decl.parent, varDeclMapItem.parent), varDeclMapItem.value);
 			if(
-				isUnderScope(mimicDeclParent, varDeclMapItem.parent) &&
+				isNodeUnderNode(decl.parent, varDeclMapItem.parent) &&
 				// And if the currently matched declaration is `!important`, it will take another `!important` to override it
@@ -480,3 +502,3 @@ (!(matchingVarDeclMapItem || {}).isImportant || varDeclMapItem.isImportant)
 							//console.log(generateScopeList(varDeclMapItem.parent, true));
-							//console.log('amd isunderscope', isUnderScope(mimicDecl.parent, varDeclMapItem.parent), varDeclMapItem.value);
+							//console.log('amd isNodeUnderNode', isNodeUnderNode(mimicDecl.parent, varDeclMapItem.parent), varDeclMapItem.value);
 							
@@ -486,3 +508,3 @@
 							// Then lets create the new rules
-							if(isUnderScope(mimicDecl.parent, varDeclMapItem.parent)) {
+							if(isNodeUnderNode(mimicDecl.parent, varDeclMapItem.parent)) {
 								// Create the clean atRule for which we place the declaration under
@@ -566,3 +588,3 @@ var atRuleNode = varDeclMapItem.parent.parent.clone().removeAll();
 
-		//console.log(map);
+		//console.log('map', map);
 
@@ -569,0 +591,0 @@ /* * /

package.json

 {
   "name": "postcss-css-variables",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
@@ -24,2 +24,3 @@ "keywords": [
     "chai-as-promised": "^5.0.0",
+    "escape-string-regexp": "^1.0.3",
     "gulp": "^3.8.11",
@@ -26,0 +27,0 @@ "gulp-eslint": "^0.11.1",

README.md

@@ -5,3 +5,3 @@ [![npm version](https://badge.fury.io/js/postcss-css-variables.svg)](http://badge.fury.io/js/postcss-css-variables) [![Build Status](https://travis-ci.org/MadLittleMods/postcss-css-variables.svg)](https://travis-ci.org/MadLittleMods/postcss-css-variables)
 
-PostCSS plugin to transform [`CSS Custom Properties(CSS variables)`](http://dev.w3.org/csswg/css-variables/) syntax into a static representation. This plugin provides a future-proof way of using **most** of CSS variables featuers.
+[PostCSS](https://github.com/postcss/postcss) plugin to transform [`CSS Custom Properties(CSS variables)`](http://dev.w3.org/csswg/css-variables/) syntax into a static representation. This plugin provides a future-proof way of using **most** of CSS variables featuers.
 
@@ -12,3 +12,3 @@ CSS variables or CSS Custom Properties limited subset polyfill/shim.
 
-## Latest Version: v0.3.1
+## Latest Version: v0.3.2
 ### [Changelog](https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md)
@@ -15,0 +15,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31559

3.71%

Lines of code

470

4.44%

Worsened metrics

Dev dependency count

8

14.29%

No dependency changes