feat: add no-important rule

README.md

@@ -60,6 +60,7 @@ export default [
 | :--------------------------------------------------------------- | :------------------------------- | :-------------: |
 | [`no-duplicate-imports`](./docs/rules/no-duplicate-imports.md)   | Disallow duplicate @import rules |       yes       |
 | [`no-empty-blocks`](./docs/rules/no-empty-blocks.md)             | Disallow empty blocks            |       yes       |
+| [`no-important`](./docs/rules/no-important.md)                   | Disallow !important annotations  |       yes       |
 | [`no-invalid-at-rules`](./docs/rules/no-invalid-at-rules.md)     | Disallow invalid at-rules        |       yes       |
 | [`no-invalid-properties`](./docs/rules/no-invalid-properties.md) | Disallow invalid properties      |       yes       |
 

docs/rules/no-important.md

@@ -0,0 +1,21 @@
+# no-important
+
+Disallow `!important` annotations.
+
+## Background
+
+Needing !important indicates there may be a larger underlying issue.
+
+## Rule Details
+
+Examples of incorrect code:
+
+```css
+a {
+	color: red !important;
+}
+
+a .link {
+	font-size: padding: 10px 20px 30px 40px !important;
+}
+```

src/index.js

@@ -13,6 +13,7 @@ import noEmptyBlocks from "./rules/no-empty-blocks.js";
 import noDuplicateImports from "./rules/no-duplicate-imports.js";
 import noInvalidProperties from "./rules/no-invalid-properties.js";
 import noInvalidAtRules from "./rules/no-invalid-at-rules.js";
+import noImportant from "./rules/no-important.js";
 
 //-----------------------------------------------------------------------------
 // Plugin
@@ -29,6 +30,7 @@ const plugin = {
 	rules: {
 		"no-empty-blocks": noEmptyBlocks,
 		"no-duplicate-imports": noDuplicateImports,
+		"no-important": noImportant,
 		"no-invalid-at-rules": noInvalidAtRules,
 		"no-invalid-properties": noInvalidProperties,
 	},
@@ -38,6 +40,7 @@ const plugin = {
 			rules: /** @type {const} */ ({
 				"css/no-empty-blocks": "error",
 				"css/no-duplicate-imports": "error",
+				"css/no-important": "error",
 				"css/no-invalid-at-rules": "error",
 				"css/no-invalid-properties": "error",
 			}),

src/rules/no-important.js

@@ -0,0 +1,41 @@
+/**
+ * @fileoverview Rule to prevent !important in CSS.
+ * @author Yann Bertrand
+ */
+
+//-----------------------------------------------------------------------------
+// Rule Definition
+//-----------------------------------------------------------------------------
+
+export default {
+	meta: {
+		type: /** @type {const} */ ("problem"),
+
+		docs: {
+			description: "Disallow !important annotations",
+			recommended: true,
+		},
+
+		messages: {
+			unexpectedImportant: "Unexpected !important annotation found.",
+		},
+	},
+
+	create(context) {
+		return {
+			"Declaration[important=true]"(node) {
+				context.report({
+					loc: {
+						start: node.loc.start,
+						end: {
+							line: node.loc.start.line,
+							column:
+								node.loc.start.column + node.property.length,
+						},
+					},
+					messageId: "unexpectedImportant",
+				});
+			},
+		};
+	},
+};

tests/rules/no-important.test.js

@@ -0,0 +1,74 @@
+/**
+ * @fileoverview Tests for no-important rule.
+ * @author Yann Bertrand
+ */
+
+//------------------------------------------------------------------------------
+// Imports
+//------------------------------------------------------------------------------
+
+import rule from "../../src/rules/no-important.js";
+import css from "../../src/index.js";
+import { RuleTester } from "eslint";
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+	plugins: {
+		css,
+	},
+	language: "css/css",
+});
+
+ruleTester.run("no-important", rule, {
+	valid: [
+		"a { color: red; }",
+		"a { color: red; background-color: blue; }",
+		"a { color: red; transition: none; }",
+		"body { --custom-property: red; }",
+		"body { padding: 0; }",
+		"a { color: red; -moz-transition: bar }",
+		"@font-face { font-weight: 100 400 }",
+		'@property --foo { syntax: "*"; inherits: false; }',
+	],
+	invalid: [
+		{
+			code: "a { color: red !important; }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 5,
+					endLine: 1,
+					endColumn: 10,
+				},
+			],
+		},
+		{
+			code: ".link { width: 100% !important }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 9,
+					endLine: 1,
+					endColumn: 14,
+				},
+			],
+		},
+		{
+			code: "a .link { padding: 10px 20px 30px 40px !important }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 11,
+					endLine: 1,
+					endColumn: 18,
+				},
+			],
+		},
+	],
+});