@mrhenry/stylelint-mrhenry-prop-order 3.0.13 → 3.0.15

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.`;
 	}
 });
 
@@ -63,6 +63,7 @@ const ruleFunction = (primaryOption, secondaryOption, context) => {
 				}
 			});
 
+			/** @type {Array<Array<import('postcss').Node>>} */
 			let declarationsSections = [[]];
 			container.each((node) => {
 				if (matchedComments.has(node)) {
@@ -99,47 +100,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

@@ -1,9 +1,5 @@
 export const order = [
 	"accent-color",
-	"align-content",
-	"align-items",
-	"align-self",
-	"alignment-baseline",
 	"all",
 	"anchor-name",
 	"anchor-scope",
@@ -39,9 +35,7 @@ export const order = [
 	"background-position-y",
 	"background-repeat",
 	"background-size",
-	"baseline-shift",
 	"baseline-source",
-	"block-ellipsis",
 	"block-step",
 	"block-step-align",
 	"block-step-insert",
@@ -120,7 +114,10 @@ export const order = [
 	"border-bottom-right-radius",
 	"border-boundary",
 	"border-limit",
+
+	"corners",
 	"border-radius",
+
 	"border-spacing",
 	"border-clip",
 	"border-clip-top",
@@ -163,16 +160,15 @@ export const order = [
 	"color-interpolation",
 	"color-interpolation-filters",
 	"color-scheme",
+	"columns",
 	"column-count",
 	"column-fill",
-	"column-gap",
 	"column-rule",
 	"column-rule-color",
 	"column-rule-style",
 	"column-rule-width",
 	"column-span",
 	"column-width",
-	"columns",
 	"contain",
 	"contain-intrinsic-size",
 	"contain-intrinsic-width",
@@ -187,7 +183,6 @@ export const order = [
 	"continue",
 	"copy-into",
 	"corner-shape",
-	"corners",
 	"counter-increment",
 	"counter-reset",
 	"counter-set",
@@ -261,6 +256,8 @@ export const order = [
 	"footnote-policy",
 	"forced-color-adjust",
 	"gap",
+	"row-gap",
+	"column-gap",
 	"glyph-orientation-vertical",
 	"grid",
 	"grid-gap",
@@ -304,9 +301,6 @@ export const order = [
 	"inset-block-end",
 	"interpolate-size",
 	"isolation",
-	"justify-content",
-	"justify-items",
-	"justify-self",
 	"letter-spacing",
 	"lighting-color",
 	"line-break",
@@ -360,6 +354,7 @@ export const order = [
 	"math-shift",
 	"math-style",
 	"max-lines",
+	"block-ellipsis",
 	"min-intrinsic-sizing",
 	"mix-blend-mode",
 	"nav-up",
@@ -429,15 +424,21 @@ export const order = [
 	"perspective",
 	"perspective-origin",
 	"place-content",
+	"align-content",
+	"justify-content",
 	"place-items",
+	"align-items",
+	"justify-items",
 	"place-self",
+	"align-self",
+	"justify-self",
 	"pointer-events",
 	"position",
 	"position-anchor",
-	"position-area",
 	"position-try",
 	"position-try-order",
 	"position-try-fallbacks",
+	"position-area",
 	"position-visibility",
 	"print-color-adjust",
 	"quotes",
@@ -449,7 +450,6 @@ export const order = [
 	"rest-before",
 	"rest-after",
 	"rotate",
-	"row-gap",
 	"ruby-align",
 	"ruby-merge",
 	"ruby-overhang",
@@ -587,6 +587,8 @@ export const order = [
 	"user-select",
 	"vector-effect",
 	"vertical-align",
+	"alignment-baseline",
+	"baseline-shift",
 	"view-timeline",
 	"view-timeline-axis",
 	"view-timeline-inset",

package/package.json

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