@mrhenry/stylelint-mrhenry-prop-order 3.0.14 → 3.0.16

package/index.mjs

@@ -5,8 +5,8 @@ const orderSet = new Set(order);
 
 const ruleName = "@mrhenry/stylelint-mrhenry-prop-order";
 const messages = stylelint.utils.ruleMessages(ruleName, {
-	expected: (name) => {
-		return `Expected ${name} to appear at a different position.`;
+	expected: (names, orderedNames) => {
+		return `Expected ${names.join(', ')} to appear in ${orderedNames.join(', ')} order.`;
 	}
 });
 
@@ -20,8 +20,7 @@ const ignoredAtRules = [
 	'property'
 ];
 
-/** @type {import('stylelint').Rule<true|null>} */
-const ruleFunction = (primaryOption, secondaryOption, context) => {
+const ruleFunction = (primaryOption) => {
 	return (postcssRoot, postcssResult) => {
 		const validPrimary = stylelint.utils.validateOptions(postcssResult, ruleName, {
 			actual: primaryOption,
@@ -63,6 +62,7 @@ const ruleFunction = (primaryOption, secondaryOption, context) => {
 				}
 			});
 
+			/** @type {Array<Array<import('postcss').Node>>} */
 			let declarationsSections = [[]];
 			container.each((node) => {
 				if (matchedComments.has(node)) {
@@ -99,47 +99,60 @@ const ruleFunction = (primaryOption, secondaryOption, context) => {
 				const firstNodeIndex = Math.min.apply(Math, section.map((x) => container.index(x)));
 				const originalFirstNode = container.nodes[firstNodeIndex];
 
-				if (!context.fix) {
-					sortedSection.forEach((decl, index) => {
-						const oldIndex = section.indexOf(decl);
-						if (index === oldIndex) {
-							return;
-						}
+				const sectionPropNames = section.map((decl) => decl.prop);
+				const sortedSectionPropNames = sortedSection.map((decl) => decl.prop);
+
+				/** @type {import('postcss').Node} */
+				const firstDecl = section.at(0);
+				/** @type {import('postcss').Node} */
+				const lastDecl = section.at(-1);
+
+				const containerStartOffset = container.source?.start.offset;
+				const index = firstDecl.source?.start.offset - containerStartOffset;
+				const endIndex = lastDecl.source?.end.offset - containerStartOffset;
+
+				for (let i = 0; i < sectionPropNames.length; i++) {
+					const original = sectionPropNames[i];
+					const sorted = sortedSectionPropNames[i];
 
-						if (index < section.length - 1) {
-							stylelint.utils.report({
-								message: messages.expected(decl.prop),
-								node: decl,
-								index: 0,
-								endIndex: decl.prop.length,
-								result: postcssResult,
-								ruleName,
+					if (original === sorted) {
+						continue;
+					}
+
+					stylelint.utils.report({
+						message: messages.expected(sectionPropNames, sortedSectionPropNames),
+						node: container,
+						index,
+						endIndex,
+						result: postcssResult,
+						ruleName,
+						fix: () => {
+							sortedSection.reverse().forEach((decl) => {
+								container.insertBefore(firstNodeIndex, decl);
+								return;
 							});
+
+							const finalFirstNode = container.nodes[firstNodeIndex];
+							if (originalFirstNode.raws.before && finalFirstNode.raws.before) {
+								const originalRawBefore = originalFirstNode.raws.before;
+								originalFirstNode.raws.before = finalFirstNode.raws.before;
+								finalFirstNode.raws.before = originalRawBefore;
+							}
+
+							for (const [comment, prev] of matchedComments) {
+								if (!section.includes(prev)) {
+									continue;
+								}
+
+								comment.remove();
+								container.insertAfter(prev, comment);
+							}
 						}
 					});
-				}
 
-				if (context.fix) {
-					sortedSection.reverse().forEach((decl) => {
-						container.insertBefore(firstNodeIndex, decl);
-						return;
-					});
-					
-					const finalFirstNode = container.nodes[firstNodeIndex];
-					if (originalFirstNode.raws.before && finalFirstNode.raws.before) {
-						const originalRawBefore = originalFirstNode.raws.before;
-						originalFirstNode.raws.before = finalFirstNode.raws.before;
-						finalFirstNode.raws.before = originalRawBefore;
-					}
+					break;
 				}
 			});
-
-			if (context.fix) {
-				for (const [comment, prev] of matchedComments) {
-					comment.remove();
-					container.insertAfter(prev, comment);
-				}
-			}
 		});
 	};
 };

package/order.mjs

@@ -34,6 +34,10 @@ export const order = [
 	"background-position-x",
 	"background-position-y",
 	"background-repeat",
+	"background-repeat-inline",
+	"background-repeat-block",
+	"background-repeat-x",
+	"background-repeat-y",
 	"background-size",
 	"baseline-source",
 	"block-step",
@@ -305,6 +309,7 @@ export const order = [
 	"lighting-color",
 	"line-break",
 	"line-clamp",
+	"line-fit-edge",
 	"line-grid",
 	"line-height",
 	"line-height-step",
@@ -533,6 +538,7 @@ export const order = [
 	"text-align-all",
 	"text-align-last",
 	"text-anchor",
+	"text-box",
 	"text-box-edge",
 	"text-box-trim",
 	"text-combine-upright",
@@ -594,6 +600,7 @@ export const order = [
 	"view-timeline-inset",
 	"view-timeline-name",
 	"view-transition-class",
+	"view-transition-group",
 	"view-transition-name",
 	"visibility",
 	"voice-balance",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrhenry/stylelint-mrhenry-prop-order",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "description": "Mr. Henry's preferred order for CSS properties",
   "type": "module",
   "main": "index.mjs",
@@ -27,10 +27,10 @@
     "stylelint-plugin"
   ],
   "peerDependencies": {
-    "stylelint": "^16.0.0"
+    "stylelint": "^16.8.2"
   },
   "devDependencies": {
     "css-tree": "^2.3.1",
-    "stylelint": "^16.7.0"
+    "stylelint": "^16.8.2"
   }
 }