added optional group name property and used it for error messages

rules/properties-order/README.md

@@ -34,6 +34,7 @@ Within an order array, you can include
 	* `order: "flexible"`: If property isn't set (the default), the properties in this group must come in the order specified. If `"flexible"`, the properties can be in any order as long as they are grouped correctly.
 	* `properties (array of strings)`: The properties in this group.
 	* `emptyLineBefore ("always"|"never")`: If `always`, this group must be separated from other properties by an empty newline. If emptyLineBefore is `never`, the group must have no empty lines separating it from other properties. By default this property isn't set. Rule will check empty lines between properties _only_. However, shared-line comments ignored by rule. Shared-line comment is a comment on the same line as declaration before this comment.
+	* `groupName`: An optional name for the group. This will be used in error messages.
 
 There are some important details to keep in mind:
 
@@ -208,13 +209,15 @@ Given:
 ```js
 [
 	{
+		groupName: "dimensions",
 		emptyLineBefore: "always",
 		properties: [
 			"height",
 			"width",
 		],
 	},
 	{
+		groupName: "font",
 		emptyLineBefore: "always",
 		properties: [
 			"font-size",

rules/properties-order/checkNode.js

@@ -47,10 +47,13 @@ module.exports = function checkNode(node, sharedInfo) {
 				if (sharedInfo.isFixEnabled) {
 					shouldFixOrder = true;
 				} else {
+					const { orderData } = checkedOrder.secondNode;
+
 					stylelint.utils.report({
 						message: sharedInfo.messages.expected(
 							checkedOrder.secondNode.name,
-							checkedOrder.firstNode.name
+							checkedOrder.firstNode.name,
+							orderData && orderData.groupName
 						),
 						node: checkedOrder.secondNode.node,
 						result: sharedInfo.result,

rules/properties-order/createExpectedOrder.js

@@ -5,13 +5,13 @@ module.exports = function createExpectedOrder(input) {
 	let expectedPosition = 0;
 	let separatedGroup = 1;
 
-	appendGroup(input);
+	appendGroup({ properties: input });
 
-	function appendGroup(items) {
-		items.forEach(item => appendItem(item, false));
+	function appendGroup(group) {
+		group.properties.forEach(item => appendItem(item, false, group));
 	}
 
-	function appendItem(item, inFlexibleGroup) {
+	function appendItem(item, inFlexibleGroup, group) {
 		if (_.isString(item)) {
 			// In flexible groups, the expectedPosition does not ascend
 			// to make that flexibility work;
@@ -20,7 +20,7 @@ module.exports = function createExpectedOrder(input) {
 				expectedPosition += 1;
 			}
 
-			order[item] = { separatedGroup, expectedPosition };
+			order[item] = { separatedGroup, expectedPosition, groupName: group.groupName };
 
 			return;
 		}
@@ -34,10 +34,10 @@ module.exports = function createExpectedOrder(input) {
 			expectedPosition += 1;
 
 			item.properties.forEach(property => {
-				appendItem(property, true);
+				appendItem(property, true, item);
 			});
 		} else {
-			appendGroup(item.properties);
+			appendGroup(item);
 		}
 	}
 

rules/properties-order/index.js

@@ -8,7 +8,8 @@ const validatePrimaryOption = require('./validatePrimaryOption');
 const ruleName = utils.namespace('properties-order');
 
 const messages = stylelint.utils.ruleMessages(ruleName, {
-	expected: (first, second) => `Expected "${first}" to come before "${second}"`,
+	expected: (first, second, groupName) => `
+	  Expected "${first}" to come before "${second}"${groupName ? ` in group "${groupName}"` : ''}`,
 	expectedEmptyLineBefore: property => `Expected an empty line before property "${property}"`,
 	rejectedEmptyLineBefore: property => `Unexpected an empty line before property "${property}"`,
 });

rules/properties-order/tests/grouped-flexible.js

@@ -89,6 +89,36 @@ testRule(rule, {
 	],
 });
 
+// Also test with groupName
+testRule(rule, {
+	ruleName,
+	config: [
+		[
+			{
+				groupName: 'font',
+				order: 'flexible',
+				properties: ['font-size', 'font-weight'],
+			},
+			'height',
+			'width',
+		],
+	],
+
+	accept: [
+		{
+			code: 'a { font-size: 2px; font-weight: bold; height: 1px; width: 2px; }',
+		},
+	],
+	reject: [
+		{
+			code: 'a { height: 1px; font-weight: bold; }',
+			message: messages.expected('font-weight', 'height', 'font'),
+			line: 1,
+			column: 18,
+		},
+	],
+});
+
 testRule(rule, {
 	ruleName,
 	config: [
@@ -144,3 +174,37 @@ testRule(rule, {
 		},
 	],
 });
+
+// Also test with groupName
+testRule(rule, {
+	ruleName,
+	config: [
+		[
+			{
+				groupName: 'dimensions',
+				order: 'flexible',
+				properties: ['width', 'height'],
+			},
+			{
+				groupName: 'font',
+				order: 'flexible',
+				properties: ['color', 'font-size', 'font-weight'],
+			},
+		],
+	],
+
+	accept: [
+		{
+			code: 'a { height: 1px; width: 2px; color: pink; font-size: 2px; font-weight: bold; }',
+		},
+	],
+	reject: [
+		{
+			code: 'a { height: 1px; font-weight: bold; width: 2px; }',
+			fixed: 'a { width: 2px; height: 1px; font-weight: bold; }',
+			message: messages.expected('width', 'font-weight', 'dimensions'),
+			line: 1,
+			column: 37,
+		},
+	],
+});

rules/properties-order/tests/grouped-strict.js

@@ -25,6 +25,41 @@ testRule(rule, {
 	],
 });
 
+// Also test with groupName
+testRule(rule, {
+	ruleName,
+	config: [
+		[
+			{
+				groupName: 'font',
+				properties: ['font-size', 'font-weight'],
+			},
+			'height',
+			'width',
+		],
+	],
+
+	accept: [
+		{
+			code: 'a { font-size: 2px; font-weight: bold; height: 1px; width: 2px; }',
+		},
+	],
+	reject: [
+		{
+			code: 'a { height: 1px; font-weight: bold; }',
+			message: messages.expected('font-weight', 'height', 'font'),
+			line: 1,
+			column: 18,
+		},
+		{
+			code: 'a { font-weight: bold; font-size: 2px; height: 1px; }',
+			message: messages.expected('font-size', 'font-weight', 'font'),
+			line: 1,
+			column: 24,
+		},
+	],
+});
+
 testRule(rule, {
 	ruleName,
 	config: [