no-restricted-declarations

This rule reports a utility that produces a CSS declaration that your project forbids. It checks the generated declarations, so it also catches other utilities and arbitrary values that produce the same declaration. The rule is off until you list declarations.

Configuration

{
  "lint": {
    "rules": {
      "no-restricted-declarations": {
        "severity": "warn",
        "rules": [
          {
            "properties": ["transition-property"],
            "values": ["all"]
          }
        ]
      }
    }
  }
}

Reported

style("transition-all");no-restricted-declarations: declaration `transition-property: all` is forbidden

Fixed

style("transition-colors");

How to fix

Name the properties that the component actually animates. The example assumes that only colors change, so transition-colors keeps those transitions. If opacity or transforms also change, include them, for example with transition-[color,opacity,transform]. Do not replace all with a list that leaves out an intended transition.

Options

rules lists the restrictions. Each entry has properties and values patterns, and an optional message that explains what to use instead. Patterns accept * and ? and ignore case. Every matching entry applies.

Rule settings