Skip to content

Commit 02ab756

Browse files
authored
docs: add keyframe !important documentation (#150)
1 parent f200d11 commit 02ab756

File tree

2 files changed

+106
-1
lines changed

2 files changed

+106
-1
lines changed

docs/rules/no-important.md

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,23 @@ The `!important` flag is a CSS declaration modifier that overrides normal cascad
1313

1414
## Rule Details
1515

16-
This rule warns when it detects the `!important` flag in declarations.
16+
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.
1717

1818
Examples of incorrect code:
1919

2020
```css
2121
.foo {
2222
color: red !important;
2323
}
24+
25+
@keyframes fade {
26+
from {
27+
opacity: 0;
28+
}
29+
to {
30+
opacity: 1 !important; /* This is ignored by browsers */
31+
}
32+
}
2433
```
2534

2635
Examples of correct code:
@@ -29,6 +38,15 @@ Examples of correct code:
2938
.foo {
3039
color: red;
3140
}
41+
42+
@keyframes fade {
43+
from {
44+
opacity: 0;
45+
}
46+
to {
47+
opacity: 1;
48+
}
49+
}
3250
```
3351

3452
## When Not to Use It

tests/rules/no-important.test.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ ruleTester.run("no-important", rule, {
4444
},
4545
},
4646
},
47+
"@keyframes important { from { margin: 1px; } }",
48+
"@-webkit-keyframes important { from { margin: 1px; } }",
49+
"@-WEBKIT-KEYFRAMES important { from { margin: 1px; } }",
4750
],
4851
invalid: [
4952
{
@@ -260,5 +263,89 @@ ruleTester.run("no-important", rule, {
260263
},
261264
],
262265
},
266+
{
267+
code: "@keyframes important { from { margin: 1px !important; } }",
268+
errors: [
269+
{
270+
messageId: "unexpectedImportant",
271+
line: 1,
272+
column: 43,
273+
endLine: 1,
274+
endColumn: 53,
275+
},
276+
],
277+
},
278+
{
279+
code: "@-webkit-keyframes important { from { margin: 1px !important; } }",
280+
errors: [
281+
{
282+
messageId: "unexpectedImportant",
283+
line: 1,
284+
column: 51,
285+
endLine: 1,
286+
endColumn: 61,
287+
},
288+
],
289+
},
290+
{
291+
code: "@-WEBKIT-KEYFRAMES important { from { margin: 1px !important; } }",
292+
errors: [
293+
{
294+
messageId: "unexpectedImportant",
295+
line: 1,
296+
column: 51,
297+
endLine: 1,
298+
endColumn: 61,
299+
},
300+
],
301+
},
302+
{
303+
code: "@keyframes important { from { margin: 1px!important; } }",
304+
errors: [
305+
{
306+
messageId: "unexpectedImportant",
307+
line: 1,
308+
column: 42,
309+
endLine: 1,
310+
endColumn: 52,
311+
},
312+
],
313+
},
314+
{
315+
code: "@keyframes important { from { margin: 1px ! important; } }",
316+
errors: [
317+
{
318+
messageId: "unexpectedImportant",
319+
line: 1,
320+
column: 43,
321+
endLine: 1,
322+
endColumn: 54,
323+
},
324+
],
325+
},
326+
{
327+
code: "@kEyFrAmEs important { from { margin: 1px !important; } }",
328+
errors: [
329+
{
330+
messageId: "unexpectedImportant",
331+
line: 1,
332+
column: 43,
333+
endLine: 1,
334+
endColumn: 53,
335+
},
336+
],
337+
},
338+
{
339+
code: "@KEYFRAMES important { from { margin: 1px !important; } }",
340+
errors: [
341+
{
342+
messageId: "unexpectedImportant",
343+
line: 1,
344+
column: 43,
345+
endLine: 1,
346+
endColumn: 53,
347+
},
348+
],
349+
},
263350
],
264351
});

0 commit comments

Comments
 (0)