Add property-no-deprecated rule (#8682)

Co-authored-by: Gary Gozlan <[email protected]>
Co-authored-by: Richard Hallows <[email protected]>

Author: 3 people

.changeset/whole-tips-begin.md

@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Added: `property-no-deprecated` rule

docs/user-guide/rules.md

@@ -21,6 +21,7 @@ Disallow deprecated things with these `no-deprecated` rules.
 | [`at-rule-no-deprecated`](../../lib/rules/at-rule-no-deprecated/README.md)<br/>Disallow deprecated at-rules. | ✅ | 🔧 |
 | [`declaration-property-value-keyword-no-deprecated`](../../lib/rules/declaration-property-value-keyword-no-deprecated/README.md)<br/>Disallow deprecated keywords for properties within declarations. | ✅ | 🔧 |
 | [`media-type-no-deprecated`](../../lib/rules/media-type-no-deprecated/README.md)<br/>Disallow deprecated media types. | ✅ | |
+| [`property-no-deprecated`](../../lib/rules/property-no-deprecated/README.md)<br/>Disallow deprecated properties. | ✅ | 🔧 |
 <!-- prettier-ignore-end -->
 
 ### Descending

lib/rules/index.cjs

@@ -299,6 +299,9 @@ const rules = {
 	get 'property-disallowed-list'() {
 		return import('./property-disallowed-list/index.mjs').then((m) => m.default);
 	},
+	get 'property-no-deprecated'() {
+		return import('./property-no-deprecated/index.mjs').then((m) => m.default);
+	},
 	get 'property-no-unknown'() {
 		return import('./property-no-unknown/index.mjs').then((m) => m.default);
 	},

lib/rules/index.mjs

@@ -0,0 +1,86 @@
+# property-no-deprecated
+
+Disallow deprecated properties.
+
+<!-- prettier-ignore -->
+```css
+  a { word-wrap: break-word; }
+/**      ↑
+ * Deprecated property */
+```
+
+This rule flags properties that were removed or deprecated after being in the CSS specifications, including editor drafts, and were either:
+
+- shipped in a stable version of a browser
+- shipped by a developer channel/edition browser
+- shipped but behind experimental flags
+- polyfilled with some adoption before any browser actually shipped
+- had an MDN page at one point in time
+
+The [`fix` option](../../../docs/user-guide/options.md#fix) can automatically fix some of the problems reported by this rule.
+
+Prior art:
+
+- [@isnotdefined/no-obsolete](https://www.npmjs.com/package/@isnotdefined/stylelint-plugin)
+
+## Options
+
+### `true`
+
+```json
+{
+  "property-no-deprecated": true
+}
+```
+
+The following patterns are considered problems:
+
+<!-- prettier-ignore -->
+```css
+a { clip: rect(0, 0, 0, 0); }
+```
+
+<!-- prettier-ignore -->
+```css
+a { word-wrap: break-word; }
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+a { clip-path: rect(0, 0, 0, 0); }
+```
+
+<!-- prettier-ignore -->
+```css
+a { overflow-wrap: break-word; }
+```
+
+## Optional secondary options
+
+### `ignoreProperties`
+
+```json
+{ "ignoreProperties": ["array", "of", "properties", "/regex/"] }
+```
+
+Given:
+
+```json
+{
+  "property-no-deprecated": [true, { "ignoreProperties": ["clip", "/^grid-/"] }]
+}
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+a { clip: rect(0, 0, 0, 0); }
+```
+
+<!-- prettier-ignore -->
+```css
+a { grid-row-gap: 4px; }
+```

lib/rules/property-no-deprecated/README.md

@@ -0,0 +1,123 @@
+import rule from '../index.mjs';
+import { stripIndent } from 'common-tags';
+
+const { messages, ruleName } = rule;
+
+testRule({
+	ruleName,
+	config: [true],
+	fix: true,
+	computeEditInfo: true,
+
+	accept: [
+		{
+			code: 'a { clip-path: rect(0, 0, 0, 0); }',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { clip: rect(0, 0, 0, 0); }',
+			fixed: 'a { clip-path: rect(0, 0, 0, 0); }',
+			fix: {
+				range: [7, 8],
+				text: 'p-path',
+			},
+			message: messages.expected('clip', 'clip-path'),
+			column: 5,
+			endColumn: 9,
+			line: 1,
+			endLine: 1,
+		},
+		{
+			code: 'a { /* comment */ clip: rect(0, 0, 0, 0); }',
+			fixed: 'a { /* comment */ clip-path: rect(0, 0, 0, 0); }',
+			fix: {
+				range: [21, 22],
+				text: 'p-path',
+			},
+			message: messages.expected('clip', 'clip-path'),
+			column: 19,
+			endColumn: 23,
+			line: 1,
+			endLine: 1,
+		},
+		{
+			code: 'a { ime-mode: active; }',
+			unfixable: true,
+			message: messages.rejected('ime-mode'),
+			column: 5,
+			endColumn: 13,
+			line: 1,
+			endLine: 1,
+		},
+		{
+			code: stripIndent`
+				a {
+					-moz-box-flex: revert;
+					-moz-box-pack: start;
+				}
+			`,
+			fixed: stripIndent`
+				a {
+					flex-grow: revert;
+					-moz-box-pack: start;
+				}
+			`,
+			warnings: [
+				{
+					message: messages.expected('-moz-box-flex', 'flex-grow'),
+					fix: { range: [5, 18] },
+					column: 2,
+					endColumn: 15,
+					line: 2,
+					endLine: 2,
+				},
+				{
+					message: messages.rejected('-moz-box-pack'),
+					unfixable: true,
+					column: 2,
+					endColumn: 15,
+					line: 3,
+					endLine: 3,
+				},
+			],
+		},
+	],
+});
+
+testRule({
+	ruleName,
+	config: [
+		true,
+		{
+			ignoreProperties: [/^grid-/, 'word-wrap'],
+		},
+	],
+
+	accept: [
+		{
+			code: 'a { grid-column-gap: 1px; }',
+		},
+		{
+			code: 'a { grid-gap: 1px; }',
+		},
+		{
+			code: 'a { grid-row-gap: 1px; }',
+		},
+		{
+			code: 'a { word-wrap: break-word; }',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { -webkit-user-modify: read-only; }',
+			message: messages.rejected('-webkit-user-modify'),
+			column: 5,
+			endColumn: 24,
+			line: 1,
+			endLine: 1,
+		},
+	],
+});