at-risk: add inset-area (#1434)

plugins-stylelint/at-risk/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### Unreleased (minor)
+
+- Add a warning for `inset-area`
+
 ### 1.0.0
 
 _March 5, 2024_

plugins-stylelint/at-risk/index.mjs

@@ -6,8 +6,24 @@ const messages = stylelint.utils.ruleMessages(ruleName, {
 	rejectedNestingDeclOrder: () => {
 		return 'Declarations after nested rules or at-rules are currently re-ordered but might not be in the future. Place all declarations before any nested rules or at-rules to prevent future compat issues.';
 	},
+	rejectedAtRiskPropertyReplacement: (atRisk, replacement) => {
+		return `The '${atRisk}' property is being replaced with '${replacement}'.`;
+	},
+	rejectedAtRiskPropertyRemoval: (atRisk) => {
+		return `The '${atRisk}' property is being removed.`;
+	},
 });
 
+const atRiskProperties = {
+	replacements: [
+		[
+			'inset-area',
+			'position-area',
+		],
+	],
+	removals: [],
+};
+
 const meta = {
 	url: 'https://github.com/csstools/postcss-plugins/blob/main/plugins-stylelint/at-risk',
 	fixable: true,
@@ -22,32 +38,72 @@ const ruleFunction = (primaryOption) => {
 		// Nested Declarations after Rules/At-Rules
 		{
 			postcssRoot.walkDecls((decl) => {
-				let prev = decl.prev();
-
-				while (prev && prev.type === 'comment') {
-					prev = prev.prev();
-				}
-
-				if (!prev) {
-					return;
-				}
-
-				if (prev?.type !== 'decl') {
-					stylelint.utils.report({
-						message: messages.rejectedNestingDeclOrder(),
-						node: decl,
-						index: 0,
-						endIndex: 5,
-						result: postcssResult,
-						ruleName,
-					});
-				}
+				checkNestingDeclOrder(decl, postcssResult);
+
+				checkAtRiskProperties(decl, postcssResult);
 			});
 		}
 
 	};
 };
 
+function checkNestingDeclOrder(decl, postcssResult) {
+	let prev = decl.prev();
+
+	while (prev && prev.type === 'comment') {
+		prev = prev.prev();
+	}
+
+	if (!prev) {
+		return;
+	}
+
+	if (prev?.type !== 'decl') {
+		stylelint.utils.report({
+			message: messages.rejectedNestingDeclOrder(),
+			node: decl,
+			index: 0,
+			endIndex: decl.prop.length,
+			result: postcssResult,
+			ruleName,
+		});
+	}
+}
+
+function checkAtRiskProperties(decl, postcssResult) {
+	const lowerCaseProp = decl.prop.toLowerCase();
+
+	atRiskProperties.replacements.forEach(([atRisk, replacement]) => {
+		if (lowerCaseProp !== atRisk) {
+			return;
+		}
+
+		stylelint.utils.report({
+			message: messages.rejectedAtRiskPropertyReplacement(atRisk, replacement),
+			node: decl,
+			index: 0,
+			endIndex: decl.prop.length,
+			result: postcssResult,
+			ruleName,
+		});
+	});
+
+	atRiskProperties.removals.forEach((atRisk) => {
+		if (lowerCaseProp !== atRisk) {
+			return;
+		}
+
+		stylelint.utils.report({
+			message: messages.rejectedAtRiskPropertyRemoval(atRisk),
+			node: decl,
+			index: 0,
+			endIndex: decl.prop.length,
+			result: postcssResult,
+			ruleName,
+		});
+	});
+}
+
 ruleFunction.ruleName = ruleName;
 ruleFunction.messages = messages;
 ruleFunction.meta = meta;

plugins-stylelint/at-risk/index.test.mjs

@@ -13,6 +13,9 @@ testRule({
 			code: 'div { color: cyan; & { color: purple } }',
 			description: 'decl before rule',
 		},
+		{
+			code: 'div { position-area: inherit; }',
+		},
 	],
 
 	reject: [
@@ -43,6 +46,14 @@ testRule({
 			endLine: 1,
 			endColumn: 40,
 		},
+		{
+			code: 'div { inset-area: inherit; }',
+			message: rule.messages.rejectedAtRiskPropertyReplacement('inset-area', 'position-area'),
+			line: 1,
+			column: 7,
+			endLine: 1,
+			endColumn: 17,
+		},
 	],
 });