Stylelint rule for preventing the use of low performance animation and transition properties.
Switch branches/tags
Nothing to show
Clone or download
Latest commit a0b4ab7 Sep 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Add a test that uses cubic-bezier Jun 28, 2018
.editorconfig Initial commit Apr 26, 2018
.gitignore Initial commit Apr 26, 2018
.prettierignore Initial commit Apr 26, 2018
.travis.yml Initial commit Apr 26, 2018
CHANGELOG.md Prepare version 1.1.1 Sep 5, 2018
LICENSE Initial commit Apr 26, 2018
README.md Add downloads badge Sep 22, 2018
appveyor.yml Initial commit Apr 26, 2018
index.js move color properties to paint (related #3) Sep 2, 2018
jest-setup.js Initial commit Apr 26, 2018
package-lock.json Prepare version 1.1.1 Sep 5, 2018
package.json Prepare version 1.1.1 Sep 5, 2018
yarn.lock Initial commit Apr 26, 2018

README.md

stylelint-high-performance-animation

NPM version Build Status Build status Downloads per month PRs Welcome

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