@mrhenry/stylelint-mrhenry-prop-order 1.0.4 → 1.0.6

package/README.md

@@ -5,7 +5,7 @@
 Mr. Henry's preferred order for CSS properties.
 
 This package does not group properties.
-It only sorts them within a "imaginary sections".
+It only sorts them within "imaginary sections".
 
 Acts as a separator between sections :
 - ignored declarations

package/order.js

@@ -351,6 +351,8 @@ module.exports = [
 	"offset-rotate",
 	"opacity",
 	"order",
+	"layout-order",
+	"reading-order",
 	"orphans",
 	"outline",
 	"outline-color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrhenry/stylelint-mrhenry-prop-order",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Mr. Henry's preferred order for CSS properties",
   "main": "stylelint-mrhenry-prop-order.js",
   "scripts": {
@@ -18,7 +18,8 @@
   "files": [
     "order.js",
     "stylelint-mrhenry-prop-order.js",
-    "LICENSE"
+    "LICENSE",
+    "README.md"
   ],
   "jest": {
     "preset": "jest-preset-stylelint"
@@ -31,7 +32,7 @@
     "stylelint": "^14.16.1"
   },
   "devDependencies": {
-    "@webref/css": "^6.2.0",
+    "@webref/css": "^6.3.0",
     "c8": "^7.12.0",
     "jest": "^29.3.1",
     "jest-preset-stylelint": "^6.0.0",

package/stylelint-mrhenry-prop-order.js

@@ -13,16 +13,21 @@ const meta = {
 	url: "https://github.com/mrhenry/stylelint-mrhenry-prop-order"
 };
 
+const ignoredAtRules = [
+	'font-face',
+	'property'
+];
+
 const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 	return (postcssRoot, postcssResult) => {
 		postcssRoot.walkRules((rule) => {
 			let parent = rule.parent;
 			while (parent) {
-				if (parent.type === 'atrule' && parent.name.toLowerCase() === 'font-face') {
+				if (parent.type === 'atrule' && ignoredAtRules.includes(parent.name.toLowerCase())) {
 					return;
 				}
 
-				parent = parent.parent
+				parent = parent.parent;
 			}
 
 			if (!rule.nodes.length) {
@@ -30,28 +35,43 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 				return;
 			}
 
-			let declarationsSections = [[]]
-			for (let i = 0; i < rule.nodes.length; i++) {
+			// Comments after a node, not one a new line should be kept together with that node.
+			// color: red; /* my color */
+			let matchedComments = new Map();
+			rule.each((node) => {
+				if (node.type === 'comment' && !node.raws?.before?.match(/\n/g)) {
+					const comment = node;
+					const prev = comment.prev();
+
+					if (prev) {
+						matchedComments.set(comment, prev);
+						comment.remove();
+					}
+				}
+			});
+
+			let declarationsSections = [[]];
+			rule.each((node) => {
 				if (
-					rule.nodes[i].type === 'decl' &&
-					!rule.nodes[i].variable &&
-					orderSet.has(rule.nodes[i].prop.toLowerCase())
+					node.type === 'decl' &&
+					!node.variable &&
+					orderSet.has(node.prop.toLowerCase())
 				) {
-					if ((rule.nodes[i].raws?.before?.match(/\n/g) || []).length >= 2) {
-						declarationsSections.push([])
+					if ((node.raws?.before?.match(/\n/g) || []).length >= 2) {
+						declarationsSections.push([]);
 					}
 
-					declarationsSections.at(-1).push(rule.nodes[i]);
+					declarationsSections.at(-1).push(node);
 
-					continue;
+					return;
 				}
 
-				declarationsSections.push([])
-			}
+				declarationsSections.push([]);
+			});
 
 			declarationsSections = declarationsSections.filter((x) => {
-				return x.length > 1
-			})
+				return x.length > 1;
+			});
 
 			declarationsSections.forEach((section) => {
 				section.sort((a, b) => {
@@ -68,8 +88,7 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 					}
 
 					if (context.fix) {
-						rule.insertBefore(desiredIndex, decl)
-
+						rule.insertBefore(desiredIndex, decl);
 						return;
 					}
 
@@ -92,6 +111,10 @@ const ruleFunction = (primaryOption, secondaryOptionObject, context) => {
 					finalFirstNode.raws.before = originalRawBefore;
 				}
 			});
+
+			for (const [comment, prev] of matchedComments) {
+				rule.insertAfter(prev, comment);
+			}
 		});
 	};
 };