kristerkaristylelint-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;
}
Dependencies
This plugin has only stylelint as a dependency.
License
MIT