docs: add keyframe !important documentation (#150)

Author: thecalamiity

docs/rules/no-important.md

@@ -13,14 +13,23 @@ The `!important` flag is a CSS declaration modifier that overrides normal cascad
 
 ## Rule Details
 
-This rule warns when it detects the `!important` flag in declarations.
+This rule warns when it detects the `!important` flag in declarations. This includes declarations within `@keyframes` rules, where `!important` is ignored by browsers and should be avoided.
 
 Examples of incorrect code:
 
 ```css
 .foo {
 	color: red !important;
 }
+
+@keyframes fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1 !important; /* This is ignored by browsers */
+	}
+}
 ```
 
 Examples of correct code:
@@ -29,6 +38,15 @@ Examples of correct code:
 .foo {
 	color: red;
 }
+
+@keyframes fade {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
 ```
 
 ## When Not to Use It

tests/rules/no-important.test.js

@@ -44,6 +44,9 @@ ruleTester.run("no-important", rule, {
 				},
 			},
 		},
+		"@keyframes important { from { margin: 1px; } }",
+		"@-webkit-keyframes important { from { margin: 1px; } }",
+		"@-WEBKIT-KEYFRAMES important { from { margin: 1px; } }",
 	],
 	invalid: [
 		{
@@ -260,5 +263,89 @@ ruleTester.run("no-important", rule, {
 				},
 			],
 		},
+		{
+			code: "@keyframes important { from { margin: 1px !important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 43,
+					endLine: 1,
+					endColumn: 53,
+				},
+			],
+		},
+		{
+			code: "@-webkit-keyframes important { from { margin: 1px !important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 51,
+					endLine: 1,
+					endColumn: 61,
+				},
+			],
+		},
+		{
+			code: "@-WEBKIT-KEYFRAMES important { from { margin: 1px !important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 51,
+					endLine: 1,
+					endColumn: 61,
+				},
+			],
+		},
+		{
+			code: "@keyframes important { from { margin: 1px!important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 42,
+					endLine: 1,
+					endColumn: 52,
+				},
+			],
+		},
+		{
+			code: "@keyframes important { from { margin: 1px ! important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 43,
+					endLine: 1,
+					endColumn: 54,
+				},
+			],
+		},
+		{
+			code: "@kEyFrAmEs important { from { margin: 1px !important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 43,
+					endLine: 1,
+					endColumn: 53,
+				},
+			],
+		},
+		{
+			code: "@KEYFRAMES important { from { margin: 1px !important; } }",
+			errors: [
+				{
+					messageId: "unexpectedImportant",
+					line: 1,
+					column: 43,
+					endLine: 1,
+					endColumn: 53,
+				},
+			],
+		},
 	],
 });