stylelint-high-performance-animation

Stylelint rule for preventing the use of low performance animation and transition properties.

This is a fork of stylelint-performance-animation stylelint plugin. It uses a blacklist for harmful properties instead of a whitelist, which makes it easy to avoid false positives and allows you to specify which type of properties to warn for (layout/paint).

Install

npm install stylelint-high-performance-animation --save-dev

or

yarn add stylelint-high-performance-animation --dev

Usage

Add this config to your .stylelintrc or stylelint config inside package.json:

{
  "plugins": ["stylelint-high-performance-animation"],
  "rules": {
    "plugin/no-low-performance-animation-properties": true
  }
}

Details

div {
  transition: margin 350ms ease-in;
}
/**           ^^^^^^
 * You should not use low performance animation properties */

@keyframes myAnimation {
  50% {
    top: 5px;
  }
}
/** ^^^^^^
 * You should not use low performance animation properties */

For more information read article By Paul Lewis and Paul Irish

Options

true

The following pattern is considered warning:

div {
  transition: margin-left 350ms ease-in;
}

The following pattern is not considered warning:

div {
  transition: transform 350ms ease-in;
}

Optional secondary options

ignore: "paint-properties"

Makes the rule not warn for properties that cause paint and only warn for properties that cause layout.

ignoreProperties: [string]

Given:

{ ignoreProperties: ['color', 'background-color'] }

The following pattern is considered warning:

div {
  transition-property: color, margin;
}

The following pattern is not considered warning:

div {
  transition-property: color, opacity, background-color;
}

License

MIT