Fix order and properties-order weren't recognizing SCSS nested properties

Author: hudochenkov

rules/order/index.js

@@ -321,6 +321,18 @@ function getOrderData(expectedOrder, node) {
 		&& !node.extendRule
 	) {
 		nodeType = 'less-mixins';
+	} else if (
+		node.type === 'rule'
+		&& utils.isScssNestedPropertiesRoot(node)
+	) {
+		const prop = node.selector.slice(0, -1);
+
+		if (
+			utils.isStandardSyntaxProperty(prop)
+			&& !utils.isCustomProperty(prop)
+		) {
+			nodeType = 'declarations';
+		}
 	} else if (node.type === 'rule') {
 		nodeType = {
 			type: 'rule',

rules/order/tests/index.js

@@ -810,3 +810,82 @@ testRule(rule, {
 		},
 	],
 });
+
+testRule(rule, {
+	ruleName,
+	syntax: 'scss',
+	config: [[
+		'declarations',
+		'rules',
+	]],
+
+	accept: [
+		{
+			description: 'scss 1',
+			code: `a {
+				margin: {
+					top: 3px;
+					right: 6px;
+					bottom: 3px;
+					left: 7px;
+				}
+				padding: 0;
+
+				b {}
+			}`,
+		},
+		{
+			description: 'scss 2',
+			code: `a {
+				padding: 0;
+				margin: {
+					top: 3px;
+					right: 6px;
+					bottom: 3px;
+					left: 7px;
+				}
+
+				b {}
+			}`,
+		},
+		{
+			description: 'scss 3',
+			code: `a {
+				margin: 0 {
+					left: 7px;
+				}
+				padding: 0;
+
+				b {}
+			}`,
+		},
+	],
+
+	reject: [
+		{
+			description: 'scss 4',
+			code: `a {
+				padding: 0;
+				b {}
+				margin: {
+					top: 3px;
+					right: 6px;
+					bottom: 3px;
+					left: 7px;
+				}
+			}`,
+			message: messages.expected('declaration', 'rule'),
+		},
+		{
+			description: 'scss 5',
+			code: `a {
+				padding: 0;
+				b {}
+				margin: 0 {
+					left: 7px;
+				}
+			}`,
+			message: messages.expected('declaration', 'rule'),
+		},
+	],
+});

rules/properties-order/index.js

@@ -68,8 +68,15 @@ const rule = function (expectation, options) {
 					node: child,
 				};
 
-				if (child.type === 'decl') {
-					const prop = child.prop;
+				if (
+					child.type === 'decl'
+					|| utils.isScssNestedPropertiesRoot(child)
+				) {
+					let prop = child.prop;
+
+					if (utils.isScssNestedPropertiesRoot(child)) {
+						prop = child.selector.slice(0, -1);
+					}
 
 					if (
 						utils.isStandardSyntaxProperty(prop)
@@ -96,11 +103,19 @@ const rule = function (expectation, options) {
 
 				allNodesData.push(nodeData);
 
-				// current node should be a standard declaration
 				if (
 					child.type !== 'decl'
-					|| !utils.isStandardSyntaxProperty(nodeData.node.prop)
-					|| utils.isCustomProperty(nodeData.node.prop)
+					&& !utils.isScssNestedPropertiesRoot(child)
+				) {
+					return;
+				}
+
+				// current node should have standard property name
+				const propertyName = utils.isScssNestedPropertiesRoot(child) ? nodeData.name : nodeData.node.prop;
+
+				if (
+					!utils.isStandardSyntaxProperty(propertyName)
+					|| utils.isCustomProperty(propertyName)
 				) {
 					return;
 				}

rules/properties-order/tests/flat.js

@@ -309,3 +309,59 @@ testRule(rule, {
 		message: messages.expected('left', 'margin'),
 	}],
 });
+
+testRule(rule, {
+	ruleName,
+
+	config: [[
+		'margin',
+		'padding',
+	]],
+	syntax: 'scss',
+
+	accept: [
+		{
+			code: `a {
+				margin: {
+					top: 3px;
+					right: 6px;
+					bottom: 3px;
+					left: 7px;
+				}
+				padding: 0;
+			}`,
+		},
+		{
+			code: `a {
+				margin: 0 {
+					left: 7px;
+				}
+				padding: 0;
+			}`,
+		},
+	],
+
+	reject: [
+		{
+			code: `a {
+				padding: 0;
+				margin: {
+					top: 3px;
+					right: 6px;
+					bottom: 3px;
+					left: 7px;
+				}
+			}`,
+			message: messages.expected('margin', 'padding'),
+		},
+		{
+			code: `a {
+				padding: 0;
+				margin: 0 {
+					left: 7px;
+				}
+			}`,
+			message: messages.expected('margin', 'padding'),
+		},
+	],
+});

utils/index.js

@@ -4,5 +4,6 @@ module.exports = {
 	isStandardSyntaxProperty: require('./isStandardSyntaxProperty'),
 	isDollarVariable: require('./isDollarVariable'),
 	isAtVariable: require('./isAtVariable'),
+	isScssNestedPropertiesRoot: require('./isScssNestedPropertiesRoot'),
 	renamedRuleWarning: require('./renamedRuleWarning'),
 };

utils/isScssNestedPropertiesRoot.js

@@ -0,0 +1,13 @@
+/**
+ * Check whether a rule is a SCSS nested properties root
+ *
+ * a {
+ *     margin: { ← nested properties root
+ *         left: 10px;
+ *     }
+ * }
+ */
+
+module.exports = function isScssNestedPropertiesRoot(node) {
+	return node && node.type === 'rule' && node.selector.slice(-1) === ':';
+};