Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kristerkari/stylelint-high-performance-animation
Stylelint rule for preventing the use of low performance animation and transition properties.
https://github.com/kristerkari/stylelint-high-performance-animation
animation animations css linter-plugin performance stylelint transition transitions
Last synced: 2 months ago
JSON representation
Stylelint rule for preventing the use of low performance animation and transition properties.
- Host: GitHub
- URL: https://github.com/kristerkari/stylelint-high-performance-animation
- Owner: kristerkari
- License: mit
- Created: 2018-04-26T20:01:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-09T21:02:27.000Z (4 months ago)
- Last Synced: 2024-03-09T22:20:33.988Z (4 months ago)
- Topics: animation, animations, css, linter-plugin, performance, stylelint, transition, transitions
- Language: JavaScript
- Size: 1.2 MB
- Stars: 79
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stylelint - stylelint-high-performance-animation - Disallow low-performance animation and transition properties. (Plugins)
- awesome-stars - stylelint-high-performance-animation - Stylelint rule for preventing the use of low performance animation and transition properties. (JavaScript)
README
# stylelint-high-performance-animation
[](https://www.npmjs.com/package/stylelint-high-performance-animation)
[](https://github.com/kristerkari/stylelint-high-performance-animation/actions?workflow=Tests)
[](http://npmcharts.com/compare/stylelint-high-performance-animation?periodLength=30)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Stylelint rule for preventing the use of low performance animation and transition properties.
This is a fork of [stylelint-performance-animation](https://github.com/konstantin24121/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
```sh
npm install stylelint-high-performance-animation --save-dev
```
or
```sh
yarn add stylelint-high-performance-animation --dev
```
## Usage
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
}
}
```
## Details
```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](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/) By Paul Lewis and Paul Irish
### Options
#### `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;
}
```
### 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:
```css
div {
transition-property: color, margin;
}
```
The following pattern is _not_ considered warning:
```css
div {
transition-property: color, opacity, background-color;
}
```
## Dependencies
This plugin has only [stylelint](https://github.com/stylelint/stylelint) as a dependency.
---
## License
MIT