Stylelint rule for preventing the use of low performance animation and transition properties.
npm install 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).
``sh`
npm install stylelint-high-performance-animation --save-dev
or
`sh`
yarn add stylelint-high-performance-animation --dev
Add this config to your .stylelintrc or stylelint config inside package.json:
`json`
{
"plugins": ["stylelint-high-performance-animation"],
"rules": {
"plugin/no-low-performance-animation-properties": true
}
}
`css`
div {
transition: margin 350ms ease-in;
}
/** ^^^^^^
You should not use low performance animation properties /
`css`
@keyframes myAnimation {
50% {
top: 5px;
}
}
/** ^^^^^^
You should not use low performance animation properties /
For more information read article By Paul Lewis and Paul Irish
#### true
The following pattern is considered warning:
`css`
div {
transition: margin-left 350ms ease-in;
}
The following pattern is _not_ considered warning:
`css`
div {
transition: transform 350ms ease-in;
}
#### 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:
`css`
div {
transition-property: color, margin;
}
The following pattern is _not_ considered warning:
`css``
div {
transition-property: color, opacity, background-color;
}
This plugin has only stylelint as a dependency.
---
MIT