feat(biome_css_analyze): noImportantInKeyframe (#2542)

Co-authored-by: ty <[email protected]>
Co-authored-by: Emanuele Stoppa <[email protected]>

crates/biome_css_analyze/src/lint/nursery.rs

@@ -6,6 +6,7 @@ pub mod no_color_invalid_hex;
 pub mod no_css_empty_block;
 pub mod no_duplicate_font_names;
 pub mod no_duplicate_selectors_keyframe_block;
+pub mod no_important_in_keyframe;
 
 declare_group! {
     pub Nursery {
@@ -15,6 +16,7 @@ declare_group! {
             self :: no_css_empty_block :: NoCssEmptyBlock ,
             self :: no_duplicate_font_names :: NoDuplicateFontNames ,
             self :: no_duplicate_selectors_keyframe_block :: NoDuplicateSelectorsKeyframeBlock ,
+            self :: no_important_in_keyframe :: NoImportantInKeyframe ,
         ]
      }
 }

crates/biome_css_analyze/src/lint/nursery/no_important_in_keyframe.rs

@@ -0,0 +1,90 @@
+use biome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic, RuleSource};
+use biome_console::markup;
+use biome_css_syntax::{
+    AnyCssDeclarationBlock, AnyCssKeyframesItem, CssDeclarationImportant, CssKeyframesBlock,
+};
+use biome_rowan::AstNode;
+
+declare_rule! {
+    /// Disallow invalid `!important` within keyframe declarations
+    ///
+    /// Using `!important` within keyframes declarations is completely ignored in some browsers.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// @keyframes foo {
+    ///     from {
+    ///       opacity: 0;
+    ///     }
+    ///     to {
+    ///       opacity: 1 !important;
+    ///     }
+    /// }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// @keyframes foo {
+    ///     from {
+    ///       opacity: 0;
+    ///     }
+    ///     to {
+    ///       opacity: 1;
+    ///     }
+    /// }
+    /// ```
+    ///
+    pub NoImportantInKeyframe {
+        version: "next",
+        name: "noImportantInKeyframe",
+        recommended: true,
+        sources:&[RuleSource::Stylelint("keyframe-declaration-no-important")],
+    }
+}
+
+impl Rule for NoImportantInKeyframe {
+    type Query = Ast<CssKeyframesBlock>;
+    type State = CssDeclarationImportant;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let node = ctx.query();
+        for item in node.items() {
+            let AnyCssKeyframesItem::CssKeyframesItem(keyframe_item) = item else {
+                return None;
+            };
+            let AnyCssDeclarationBlock::CssDeclarationBlock(block_declaration) =
+                keyframe_item.block().ok()?
+            else {
+                return None;
+            };
+            for colon_declaration in block_declaration.declarations() {
+                if let Some(important) = colon_declaration.declaration().ok()?.important() {
+                    return Some(important);
+                }
+            }
+        }
+        None
+    }
+
+    fn diagnostic(_ctx: &RuleContext<Self>, node: &Self::State) -> Option<RuleDiagnostic> {
+        let span = node.range();
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                span,
+                markup! {
+                    "Using "<Emphasis>"!important"</Emphasis>" within keyframes declaration is completely ignored in some browsers."
+                },
+            )
+            .note(markup! {
+                    "Consider removing useless "<Emphasis>"!important"</Emphasis>" declaration."
+            }),
+        )
+    }
+}

crates/biome_css_analyze/src/options.rs

@@ -9,3 +9,4 @@ pub type NoCssEmptyBlock =
 pub type NoDuplicateFontNames =
     <lint::nursery::no_duplicate_font_names::NoDuplicateFontNames as biome_analyze::Rule>::Options;
 pub type NoDuplicateSelectorsKeyframeBlock = < lint :: nursery :: no_duplicate_selectors_keyframe_block :: NoDuplicateSelectorsKeyframeBlock as biome_analyze :: Rule > :: Options ;
+pub type NoImportantInKeyframe = < lint :: nursery :: no_important_in_keyframe :: NoImportantInKeyframe as biome_analyze :: Rule > :: Options ;

crates/biome_css_analyze/tests/specs/nursery/noImportantInKeyframe/invalid.css

@@ -0,0 +1,8 @@
+@keyframes foo {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1 !important;
+  }
+}

crates/biome_css_analyze/tests/specs/nursery/noImportantInKeyframe/invalid.css.snap

@@ -0,0 +1,33 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: invalid.css
+---
+# Input
+```css
+@keyframes foo {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1 !important;
+  }
+}
+```
+
+# Diagnostics
+```
+invalid.css:6:16 lint/nursery/noImportantInKeyframe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Using !important within keyframes declaration is completely ignored in some browsers.
+  
+    4 │   }
+    5 │   to {
+  > 6 │     opacity: 1 !important;
+      │                ^^^^^^^^^^
+    7 │   }
+    8 │ }
+  
+  i Consider removing useless !important declaration.
+  
+
+```

crates/biome_css_analyze/tests/specs/nursery/noImportantInKeyframe/valid.css

@@ -0,0 +1,10 @@
+@keyframes foo {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+a { color: pink !important; }

crates/biome_css_analyze/tests/specs/nursery/noImportantInKeyframe/valid.css.snap

@@ -0,0 +1,17 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+expression: valid.css
+---
+# Input
+```css
+@keyframes foo {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+a { color: pink !important; }
+```

crates/biome_diagnostics_categories/src/categories.rs

@@ -121,6 +121,7 @@ define_categories! {
     "lint/nursery/noDuplicateSelectorsKeyframeBlock": "https://biomejs.dev/linter/rules/no-duplicate-selectors-keyframe-block",
     "lint/nursery/noEvolvingAny": "https://biomejs.dev/linter/rules/no-evolving-any",
     "lint/nursery/noFlatMapIdentity": "https://biomejs.dev/linter/rules/no-flat-map-identity",
+    "lint/nursery/noImportantInKeyframe": "https://biomejs.dev/linter/rules/no-important-in-keyframe",
     "lint/nursery/noMisplacedAssertion": "https://biomejs.dev/linter/rules/no-misplaced-assertion",
     "lint/nursery/noNodejsModules": "https://biomejs.dev/linter/rules/no-nodejs-modules",
     "lint/nursery/noReactSpecificProps": "https://biomejs.dev/linter/rules/no-react-specific-props",