postcss-css-variables - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# v0.13.0 - 2019-6-17
+
+ - Add `options.preserveAtRulesOrder` so media queries are outputted in the order they are defined (as expected)
+    - Thank you to [@erikthalen](https://github.com/erikthalen) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/92) via https://github.com/MadLittleMods/postcss-css-variables/pull/101
+ - Remove `calc` from readme table of contents for non-existent section
+    - Thank you to [@AlexandreArpin](https://github.com/AlexandreArpin) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/99)
+
 # v0.12.0 - 2019-2-21
@@ -2,0 +9,0 @@

index.js

@@ -68,3 +68,6 @@ // PostCSS CSS Variables (postcss-css-variables)
 	// 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.
+	// Currently defaulted to false for legacy behavior. We can update to `true` in a major version
+	preserveAtRulesOrder: false
 };
@@ -253,3 +256,3 @@
 						var decl = node;
-						resolveDecl(decl, map, opts.preserve, logResolveValueResult);
+						resolveDecl(decl, map, opts.preserve, opts.preserveAtRulesOrder, logResolveValueResult);
 					}
@@ -256,0 +259,0 @@ });

lib/resolve-decl.js

@@ -74,4 +74,5 @@ var resolveValue = require('./resolve-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*/preserveAtRulesOrder, /*optional*/logResolveValueResult) {
 	shouldPreserve = shouldPreserve || false;
+	preserveAtRulesOrder = preserveAtRulesOrder || false;
 
@@ -97,2 +98,3 @@ // Make it chainable
 	//console.log('resolveDecl 2');
+	var previousAtRuleNode;
 	eachMapItemDependencyOfDecl(valueResults.variablesUsed, map, decl, function(mimicDecl, mapItem) {
@@ -134,4 +136,8 @@ var ruleClone = shallowCloneNode(decl.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
 		}
@@ -141,4 +147,5 @@ else {
 
-			// 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);
 		}
@@ -145,0 +152,0 @@ });

package.json

 {
   "name": "postcss-css-variables",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -24,3 +24,2 @@ # PostCSS CSS Variables
 	 - [Nested Rules](#nested-rules)
-	 - [`calc()`](#calc)
  - [Why?](#why)
@@ -312,3 +311,3 @@ - [Interoperability](#interoperability)
 
-Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<h1 class="title">`
+Note the nested markup below. We only know about the DOM's inheritance from your CSS selectors. If you want nest multiple times, you need to be explicit about it in your CSS which isn't necessary with browser that natively support CSS variables. See the innermost `<div class="title">`
 
@@ -400,2 +399,9 @@ ```html
 
+### `preserveAtRulesOrder` (default: `false`)
+
+Keeps your at-rules like media queries in the order to defined them.
+
+Ideally, this would be defaulted to `true` and it will be in the next major version. All of the tests expecations need to be updated and probably just drop support for `preserveAtRulesOrder: false`
+
+
 # Quick Reference/Notes
@@ -402,0 +408,0 @@

No alert changes

Improved metrics

Total package byte prevSize

56987

2.78%

Lines of code

834

1.09%

Number of lines in readme file

425

1.43%

No dependency changes