Fix optional chaining for style attribute checks in ESLint rules

Author: utarwyn

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

@@ -37,7 +37,7 @@ module.exports = {
     return {
       JSXOpeningElement(node) {
         const styleAttribute = node.attributes.find(
-          (attribute) => attribute.name.name === "style",
+          (attribute) => attribute.name?.name === "style",
         );
 
         if (styleAttribute?.value.expression) {

eslint-plugin/lib/rules/prefer-shorthand-css-notations.js

@@ -84,7 +84,7 @@ module.exports = {
     return {
       JSXOpeningElement(node) {
         const styleAttribute = node.attributes.find(
-          (attr) => attr.name.name === "style",
+          (attr) => attr.name?.name === "style",
         );
         if (styleAttribute) {
           const nodePropertyNames =

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

@@ -53,6 +53,8 @@ ruleTester.run("avoid-css-animations", rule, {
     `,
     `<div style={{ width: '100px', height: '100px' }}>Hello world</div>`,
     `<div style="border: 2px solid red">My red element</div>`,
+    // spread attributes should not throw an error (#49)
+    "<input {...inputProps} className={styles.input} onChange={handleChange}/>",
   ],
 
   invalid: [

eslint-plugin/tests/lib/rules/prefer-shorthand-css-notations.js

@@ -73,6 +73,8 @@ ruleTester.run("prefer-shorthand-css-notations", rule, {
       code: "<div style={{ animationName: 'example', animationDuration: '5s' }}/>",
       options: [{ disableProperties: ["animation"] }],
     },
+    // spread attributes should not throw an error (#49)
+    "<input {...inputProps} className={styles.input} onChange={handleChange}/>",
   ],
   invalid: [
     {