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

License: MIT License

JavaScript 100.00%

stylelint css performance animations transitions animation transition linter-plugin

stylelint-high-performance-animation's Introduction

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

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

stylelint-high-performance-animation's People

Contributors

Stargazers

Watchers

Forkers

nemo64 authorityfx evalon ybiquitous bryanjtc wimhendrikx strawberry-choco

stylelint-high-performance-animation's Issues

Update to stylelint 13.x

Missing dependency when using this package

Using this package with stylelint and yarn pnp, throws this error

stylelint 12.x as peer dependency

Hi,

stylelint 12.0.0 was released but do you have a plan to update the peer dependency?

stylelint-high-performance-animation/package.json

Line 47 in 8a1227d

"stylelint": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"

I get the following error when installing stylelint@12 and stylelint-high-performance-animation. 😢

npm ERR! peer dep missing: stylelint@^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0, required by [email protected]

It would be great if you could consider it.
Thanks.

background-color cause layout

background-color is in the list of properties that cause layout while background is in the list of paint properties.

Can I assume that is a mistake? I think background-color is a paint property too. Or if it isn't, than the background shorthand probably isn't either.

Should suppress complaint about `transition` when `transition-property` is overridden

Currently on

.widget {
  transition: 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  transition-property: transform, opacity, visibility;
}

this rule complains on the transition line:

  2:15  ✖  Unexpected use of low performance transition property (all).  plugin/no-low-performance-animation-properties

But the shorthand transition is immediately overridden with an explicit transition-property, so this is a false positive that should be suppressed.

Otherwise we’re forced to write something more verbose, e.g.

.widget {
  transition:
    transform 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    opacity 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95),
    visibility 0.5s;
}

.widget {
  transition-property: transform, opacity, visibility;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

npm-warning for "stylelint" peer dependency

Right now, npm throws a warning:

[email protected] requires a peer of stylelint@^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 but none is installed. You must install peer dependencies yourself.

Currently, stylelint 13.0.0 is the latest version.

I'm using:

"stylelint": "13.0.0",
"stylelint-high-performance-animation": "1.4.0",

Stylelint v14 compatibility

Will there be an update which supports Stylelint v14?

transition: 0.2s; not detected

transition: 0.2s is not detected as what it is: transition: all 0.2s.
That is the most common problem I see in my projects.

TypeError: Cannot read property 'unprefixed' of undefined

After updating PostCSS to version 8, the following error occurs in my code:

(node:1600) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'unprefixed' of undefined
    at P:\HexEd.it\src\scss\bootstrap.scss:132:3
    at P:\HexEd.it\src\scss\bootstrap.scss:134:5
    at P:\HexEd.it\node_modules\stylelint-high-performance-animation\index.js:218:36
    at P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:190:18
    at P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:135:18
    at Rule.each (P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:101:16)
    at Rule.walk (P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:131:17)
    at P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:148:24
    at AtRule.each (P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:101:16)
    at AtRule.walk (P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:131:17)
    at AtRule.walkDecls (P:\HexEd.it\node_modules\postcss-scss\node_modules\postcss\lib\container.js:188:19)
    at P:\HexEd.it\node_modules\stylelint-high-performance-animation\index.js:217:23

I'm using:
postcss 8.0.5
stylelint 13.7.1
stylelint-high-performance-animation 1.5.1
NodeJS: 14.10.1

There are two issues:

In your plugin PostCSS is used without to specify the supported version as peerDependency.
postcss.vendor has been removed in PostCSS 8, see postcss/postcss#1372
Like described in this ticket the fix would be to copy the unprefixed function into your code (See https://github.com/postcss/postcss/blob/be01ca14ba92d02ed6b90941755aa9c7e7ad234b/lib/vendor.js)
There are multiple places in your code using this function - replacing them all fixes the issue (I've tested that locally).

Crashes when a transition contains a CSS variable

The problem

The plugin crashes on the following CSS fragment:

:root {
  --sidebar-transition: all 0.3s ease;
}

.example {
  transition: var(--sidebar-transition);
}

with the following error:

TypeError: Cannot read property 'index' of undefined
    at crash.css:6:3
    at cssRoot.walkDecls.decl (node_modules/stylelint-high-performance-animation/index.js:192:59)
    at node_modules/postcss/lib/container.js:205:16
    at node_modules/postcss/lib/container.js:135:18
    at Rule.each (node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (node_modules/postcss/lib/container.js:131:17)
    at node_modules/postcss/lib/container.js:148:24
    at Root.each (node_modules/postcss/lib/container.js:101:16)
    at Root.walk (node_modules/postcss/lib/container.js:131:17)
    at Root.walkDecls (node_modules/postcss/lib/container.js:203:17)
    at node_modules/stylelint-high-performance-animation/index.js:164:13

Versions

package	version
node	11.15.0
yarn	1.15.2
stylelint	10.0.1
stylelint-high-performance-animation	1.2.0

How to reproduce

git clone https://github.com/ivan-aksamentov/repro-stylelint-hpa-crash
cd repro-stylelint-hpa-crash
yarn install
stylelint crash.css

Relevant code

stylelint-high-performance-animation/index.js

Lines 186 to 195 in a515986

 if (nodes && transitionProp.length === 0) { 

 stylelint.utils.report({ 

 ruleName, 

 result, 

 node: decl, 

 message: messages.rejected("transition", "all"), 

 index: declarationValueIndex(decl) + nodes[0].index 

 }); 

 return; 

 }

add support to stylelint 16.0.0

Please support stylelint 16.0.0, the big one

Now the code is in ESM instead of CommonJS

Very good

Stylelint team published docs to know how to migrate with ease.

No need to keep support to commons from now on.

Style lint 16 is not allowed in your package.json. remove this restriction to

Not getting warnings for logical properties

Would you kindly update your stylelint plugin so that we also get warnings when typing logical properties? For example:
transition: margin-block-start .25s ease-out; which is a logical version of transition: margin-top .25s ease-out;.

You can find a full list of logical properties here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

	if (nodes && transitionProp.length === 0) {
	stylelint.utils.report({
	ruleName,
	result,
	node: decl,
	message: messages.rejected("transition", "all"),
	index: declarationValueIndex(decl) + nodes[0].index
	});
	return;
	}

kristerkari / stylelint-high-performance-animation Goto Github PK