PR #21 feedbacks

Author: utarwyn

eslint-plugin/docs/rules/avoid-css-animations.md

@@ -6,19 +6,26 @@
 
 ## Rule Details
 
-This rule aims to limit the usage of all types of CSS animations which can be very costly in terms of CPU and memory. 
-They must only be used when they are indispensable and should be limited to the CSS properties `opacity` and `transform` with it's associated functions : `translate`, `rotate` and `scale`.
-You can also inform the navigator of upcoming changes with the `will-change` instruction for more optimization.
+This rule aims to limit the usage of all types of CSS animations which can be very costly in terms of CPU and memory.
+They must only be used when they are indispensable and should be limited to the CSS properties `opacity` and `transform`
+with it's associated functions : `translate`, `rotate` and `scale`. You can also inform the navigator of upcoming
+changes with the `will-change` instruction for more optimization.
 
 ## Examples
+
 Examples of **non compliant** code for this rule:
 
 ```js
-<div style={{borderWidth:1, borderStyle: 'solid', borderColor: '#000000', transform:'translate(20px)'}}/>
+<div style={{ border: "1px solid black", transition: "border 2s ease" }}/>
 ```
 
 Examples of **compliant** code for this rule:
 
 ```js
-<div style={{borderWidth:1, borderStyle: 'solid', borderColor: '#000000'}}/>
+<div style={{ border: "1px solid black" }}/>
 ```
+
+## Further details
+
+This recommendation is made by the
+CNUMR: [Avoid JavaScript / CSS animations](https://github.com/cnumr/best-practices/blob/main/chapters/BP_039_en.md)

eslint-plugin/lib/rules/avoid-css-animations.js

@@ -30,27 +30,28 @@ module.exports = {
     },
     schema: [],
   },
-
   create(context) {
+    const forbiddenProperties = ["transition", "animation"];
     return {
       JSXOpeningElement(node) {
-        if (node.attributes.find((attr) => attr.name.name === "style")) {
-          const styleProp = node.attributes.find(
-            (attr) => attr.name.name === "style",
-          );
+        const styleAttribute = node.attributes.find(
+          (attribute) => attribute.name.name === "style",
+        );
 
-          // To prevent (for example) <div style={{ transform: rotate(30deg) }}>
-          const transformValue = styleProp.value.expression.properties.find(
+        if (styleAttribute != null) {
+          // To prevent (for example) <div style={{ animate: 'width 2s' }}>
+          const property = styleAttribute.value.expression.properties.find(
             (prop) =>
-              prop.key.name.includes("transition") ||
-              prop.key.name.includes("animation"),
+              forbiddenProperties.some((forbidProp) =>
+                prop.key.name.includes(forbidProp),
+              ),
           );
-          if (transformValue && transformValue.value) {
+          if (property != null) {
             context.report({
-              node: transformValue,
+              node: property,
               messageId: "AvoidCSSAnimations",
               data: {
-                attribute: transformValue.key.name,
+                attribute: property.key.name,
               },
             });
           }

eslint-plugin/package.json

@@ -54,4 +54,4 @@
     "eslint": ">=7"
   },
   "packageManager": "[email protected]"
-}
+}

eslint-plugin/tests/lib/rules/avoid-css-animations.js

@@ -49,6 +49,7 @@ ruleTester.run("avoid-css-animations", rule, {
 
     export default MyComponent;
     `,
+    `<div style={{ width: '100px', height: '100px' }}>Hello world</div>`,
   ],
 
   invalid: [