postcss-sorting - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## 4.1.0
+* Added: Support for HTML style tag and attribute (when used with [postcss-html](https://github.com/gucong3000/postcss-html) syntax).
+* Added: Support for CSS-in-JS (when used with [postcss-jsx](https://github.com/gucong3000/postcss-jsx) syntax).
+
 ## 4.0.1
@@ -7,0 +11,0 @@ * Fixed: Incorrect sorting in Node.js 11, due recent change to `Array.sort()` in V8.

lib/isRuleWithNodes.js

 const atRuleExcludes = ['function', 'if', 'else', 'for', 'each', 'while'];
 
 module.exports = function isRuleWithNodes(node) {
-	return (
-		(node.type === 'rule' || node.type === 'atrule') &&
-		node.nodes &&
-		node.nodes.length &&
-		atRuleExcludes.indexOf(node.name) === -1
-	);
+	if (node.type === 'atrule' && atRuleExcludes.includes(node.name)) {
+		return false;
+	}
+
+	return node.nodes && node.nodes.length && !node.nodes.some(item => item.type === 'literal');
 };

lib/order/index.js

@@ -5,2 +5,3 @@ const createExpectedOrder = require('../createExpectedOrder');
 const processMostNodes = require('../processMostNodes');
+const getContainingNode = require('../getContainingNode');
 const sorting = require('../sorting');
@@ -11,4 +12,5 @@
 
-	css.walk(function(node) {
-		// Process only rules and atrules with nodes
+	css.walk(function(input) {
+		const node = getContainingNode(input);
+
 		if (isRuleWithNodes(node)) {
@@ -15,0 +17,0 @@ // Nodes for sorting

lib/properties-order/index.js

@@ -6,2 +6,3 @@ const postcss = require('postcss');
 const getPropertiesOrderData = require('../getPropertiesOrderData');
+const getContainingNode = require('../getContainingNode');
 const isCustomProperty = require('../isCustomProperty');
@@ -23,4 +24,5 @@ const isRuleWithNodes = require('../isRuleWithNodes');
 
-	css.walk(function(node) {
-		// Process only rules and atrules with nodes
+	css.walk(function(input) {
+		const node = getContainingNode(input);
+
 		if (isRuleWithNodes(node)) {
@@ -27,0 +29,0 @@ const allRuleNodes = [];

package.json

 {
   "name": "postcss-sorting",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "PostCSS plugin to keep rules and at-rules content in order.",
@@ -33,9 +33,13 @@ "keywords": [
   "devDependencies": {
-    "eslint": "~5.9.0",
+    "eslint": "~5.15.0",
     "eslint-config-hudochenkov": "~3.0.0",
-    "eslint-config-prettier": "~3.2.0",
+    "eslint-config-prettier": "~4.1.0",
     "husky": "^1.1.3",
-    "jest": "^23.4.1",
+    "jest": "^24.1.0",
+    "jest-watch-typeahead": "^0.2.1",
     "lint-staged": "^8.0.4",
-    "prettier": "~1.15.2"
+    "postcss-html": "^0.36.0",
+    "postcss-jsx": "^0.36.0",
+    "postcss-syntax": "^0.36.2",
+    "prettier": "~1.16.4"
   },
@@ -62,3 +66,7 @@ "scripts": {
     "testEnvironment": "node",
-    "testRegex": "__tests__/.*\\.js$"
+    "testRegex": "__tests__/[a-zA-Z-]+\\.js$",
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
   },
@@ -65,0 +73,0 @@ "husky": {

README.md

@@ -15,3 +15,3 @@ # PostCSS Sorting [![Build Status][ci-img]][ci] [![npm version][npm-version-img]][npm] [![npm downloads last month][npm-downloads-img]][npm]
 * Groups properties, custom properties, dollar variables, nested rules, nested at-rules.
-* Supports CSS, SCSS (if [postcss-scss] parser is used), [PreCSS] and most likely any other syntax added by other PostCSS plugins.
+* Supports CSS, SCSS (using [postcss-scss]), HTML (with [postcss-html]), CSS-in-JS (with [postcss-jsx]), [PreCSS] and most likely any other syntax added by other PostCSS plugins.
 
@@ -33,4 +33,6 @@ ## Installation
 
-## Handling comments
+## Caveats
 
+### Handling comments
+
 Comments that are before node and on a separate line linked to that node. Shared-line comments are also linked to that node. Shared-line comments are comments which are located after a node and on the same line as a node.
@@ -47,6 +49,29 @@
 
-## Ignored at-rules
+### Ignored at-rules
 
 Some at-rules, like [control](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions) and [function](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#function_directives) directives in Sass, are ignored. It means rules won't touch content inside these at-rules, as doing so could change or break functionality.
 
+### CSS-in-JS
+
+Plugin will ignore rules, which have template literal interpolation, to avoid breaking logic:
+
+```js
+const Component = styled.div`
+	/* The following properties WILL NOT be sorted, because interpolation is on properties level */
+	z-index: 1;
+	top: 1px;
+	${props => props.great && 'color: red'};
+	position: absolute;
+	display: block;
+
+	div {
+		/* The following properties WILL be sorted, because interpolation for property value only */
+		z-index: 2;
+		position: static;
+		top: ${2 + 10}px;
+		display: inline-block;
+	}
+`;
+```
+
 ## Migration from `2.x`
@@ -213,4 +238,6 @@
 [postcss-scss]: https://github.com/postcss/postcss-scss
+[postcss-html]: https://github.com/gucong3000/postcss-html
+[postcss-jsx]: https://github.com/gucong3000/postcss-jsx
 [Prettier]: https://prettier.io/
 [stylelint]: https://stylelint.io/
 [stylelint-order]: https://github.com/hudochenkov/stylelint-order

No alert changes

Improved metrics

Total package byte prevSize

50558

increased by3.5%

Number of package files

28

increased by3.7%

Lines of code

758

increased by1.74%

Number of lines in readme file

240

increased by12.68%

Worsened metrics

Dev dependency count

11

increased by57.14%

No dependency changes