feat: add suggestion to no-important rule to remove !important flag (eslint#217)

* feat: add suggestion to no-important rule to remove !important flag

* trim whitespace before !important

Author: thecalamiity

src/rules/no-important.js

@@ -16,10 +16,17 @@ import { findOffsets } from "../util.js";
 
 /**
  * @import { CSSRuleDefinition } from "../types.js"
- * @typedef {"unexpectedImportant"} NoImportantMessageIds
+ * @typedef {"unexpectedImportant" | "removeImportant"} NoImportantMessageIds
  * @typedef {CSSRuleDefinition<{ RuleOptions: [], MessageIds: NoImportantMessageIds }>} NoImportantRuleDefinition
  */
 
+//-----------------------------------------------------------------------------
+// Helpers
+//-----------------------------------------------------------------------------
+
+const importantPattern = /!(\s|\/\*.*?\*\/)*important/iu;
+const trailingWhitespacePattern = /\s*$/u;
+
 //-----------------------------------------------------------------------------
 // Rule Definition
 //-----------------------------------------------------------------------------
@@ -29,6 +36,8 @@ export default {
 	meta: {
 		type: "problem",
 
+		hasSuggestions: true,
+
 		docs: {
 			description: "Disallow !important flags",
 			recommended: true,
@@ -37,12 +46,11 @@ export default {
 
 		messages: {
 			unexpectedImportant: "Unexpected !important flag found.",
+			removeImportant: "Remove !important flag.",
 		},
 	},
 
 	create(context) {
-		const importantPattern = /!(\s|\/\*.*?\*\/)*important/iu;
-
 		return {
 			Declaration(node) {
 				if (node.important) {
@@ -86,6 +94,33 @@ export default {
 							},
 						},
 						messageId: "unexpectedImportant",
+						suggest: [
+							{
+								messageId: "removeImportant",
+								fix(fixer) {
+									const importantStart = importantMatch.index;
+									const importantEnd =
+										importantStart +
+										importantMatch[0].length;
+
+									// Find any trailing whitespace before the !important
+									const valuePart = declarationText.slice(
+										0,
+										importantStart,
+									);
+									const whitespaceEnd = valuePart.search(
+										trailingWhitespacePattern,
+									);
+
+									const start =
+										node.loc.start.offset + whitespaceEnd;
+									const end =
+										node.loc.start.offset + importantEnd;
+
+									return fixer.removeRange([start, end]);
+								},
+							},
+						],
 					});
 				}
 			},