feat: add no-important rule

Author: yannbertrand

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,40 @@
+/**
+ * @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,
+        },
+      ],
+    },
+  ],
+});