MadLittleMods#30 - added option to preserve at-rule order

Author: erikthalen

index.js

@@ -65,7 +65,10 @@ var defaults = {
 	variables: {},
 	// Preserve variables injected via JS with the `variables` option above
 	// before serializing to CSS (`false` will remove these variables from output)
-	preserveInjectedVariables: true
+	preserveInjectedVariables: true,
+	// Will write media queries in the same order as in the original file.
+	// Set it to true if you're working with min-width
+	preserveAtRulesOrder: false
 };
 
 module.exports = postcss.plugin('postcss-css-variables', function(options) {
@@ -249,7 +252,7 @@ module.exports = postcss.plugin('postcss-css-variables', function(options) {
 				ruleToWorkOn.nodes.slice(0).forEach(function(node) {
 					if(node.type === 'decl') {
 						var decl = node;
-						resolveDecl(decl, map, opts.preserve, logResolveValueResult);
+						resolveDecl(decl, map, opts.preserve, logResolveValueResult, opts.preserveAtRulesOrder);
 					}
 				});
 			});

lib/resolve-decl.js

@@ -49,6 +49,7 @@ function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) {
 
 				// Add the declaration to it
 				mimicDecl = decl.clone();
+				console.log(mimicDecl)
 				ruleClone.append(mimicDecl);
 
 				var lastPseudoSelectorMatches = mapItem.parent.selector.match(new RegExp(isUnderScope.RE_PSEUDO_SELECTOR.source + '$'));
@@ -71,8 +72,9 @@ function eachMapItemDependencyOfDecl(variablesUsedList, map, decl, cb) {
 
 // Resolve the decl with the computed value
 // Also add in any media queries that change the value as necessary
-function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResolveValueResult) {
+function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResolveValueResult, /*optional*/preserveAtRulesOrder) {
 	shouldPreserve = shouldPreserve || false;
+	preserveAtRulesOrder = preserveAtRulesOrder || false;
 
 	// Make it chainable
 	var _logResolveValueResult = function(valueResults) {
@@ -93,6 +95,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResol
 	// Resolve the cascade dependencies
 	// Now find any at-rule declarations that need to be added below each rule
 	//console.log('resolveDecl 2');
+	var previousAtRuleNode;
 	eachMapItemDependencyOfDecl(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
 		var ruleClone = shallowCloneNode(decl.parent);
 		var declClone = decl.clone();
@@ -112,6 +115,7 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResol
 
 			// Add the rule to the atRule
 			atRuleNode.append(ruleClone);
+			//console.log(atRuleNode)
 
 
 			// Since that atRuleNode can be nested in other atRules, we need to make the appropriate structure
@@ -129,14 +133,19 @@ function resolveDecl(decl, map, /*optional*/shouldPreserve, /*optional*/logResol
 				currentAtRuleNode = currentAtRuleNode.parent;
 			}
 
-			// Put the atRuleStructure after the declaration's rule
-			decl.parent.parent.insertAfter(decl.parent, parentAtRuleNode);
+			// Put the first atRuleStructure after the declaration's rule,
+			// and after that, put them right after the previous one
+			decl.parent.parent.insertAfter(preserveAtRulesOrder && previousAtRuleNode || decl.parent, parentAtRuleNode);
+
+			// Save referance of previous atRuleStructure
+			previousAtRuleNode = parentAtRuleNode
 		}
 		else {
 			ruleClone.selector = mimicDecl.parent.selector;
 
-			// Put the atRuleStructure after the declaration's rule
-			decl.parent.parent.insertAfter(decl.parent, ruleClone);
+			// Put the first atRuleStructure after the declaration's rule,
+			// and after that, put them right after the previous one
+			decl.parent.parent.insertAfter(preserveAtRulesOrder && previousAtRuleNode || decl.parent, ruleClone);
 		}
 	});