noImportantInKeyframe

CSS

Summary

• Rule available since: v1.8.0
• Diagnostic Category: lint/suspicious/noImportantInKeyframe
• This rule is recommended, which means is enabled by default.
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• Sources:
  • Same as stylelint/keyframe-declaration-no-important

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noImportantInKeyframe": "error"
      }
    }
  }
}

Description

Disallow invalid !important within keyframe declarations

Using !important within keyframes declarations is completely ignored in some browsers.

Examples

Invalid

@keyframes foo {
    from {
      opacity: 0;
    }
    to {
      opacity: 1 !important;
    }
}

code-block.css:6:18 lint/suspicious/noImportantInKeyframe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Using !important within keyframes declaration is completely ignored in some browsers.
  
    4 │     }
    5 │     to {
  > 6 │       opacity: 1 !important;
      │                  ^^^^^^^^^^
    7 │     }
    8 │ }
  
  ℹ Consider removing useless !important declaration.
  

Valid

@keyframes foo {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases