Fix spread style attributes in ESLint rules

Author: utarwyn

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

@@ -44,6 +44,7 @@ module.exports = {
           // To prevent (for example) <div style={{ animate: 'width 2s' }}>
           const property = styleAttribute.value.expression.properties.find(
             (prop) =>
+              prop.key != null &&
               forbiddenProperties.some((forbidProp) =>
                 prop.key.name.includes(forbidProp),
               ),

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

@@ -93,10 +93,9 @@ module.exports = {
           (attr) => attr.name?.name === "style",
         );
         if (styleAttribute?.value.expression?.properties) {
-          const nodePropertyNames =
-            styleAttribute.value.expression.properties.map(
-              (property) => property.key.name,
-            );
+          const nodePropertyNames = styleAttribute.value.expression.properties
+            .filter((property) => property.key != null)
+            .map((property) => property.key.name);
 
           for (const [shorthandProp, matchProperties] of Object.entries(
             shorthandProperties,

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

@@ -57,6 +57,8 @@ ruleTester.run("avoid-css-animations", rule, {
     `<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}/>",
+    // spread style attributes should not throw an error (#100)
+    "<input style={{ ...inputProps.style, color: 'red' }} onChange={handleChange}/>",
   ],
 
   invalid: [

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

@@ -77,6 +77,8 @@ ruleTester.run("prefer-shorthand-css-notations", rule, {
     },
     // spread attributes should not throw an error (#49)
     "<input {...inputProps} className={styles.input} onChange={handleChange}/>",
+    // spread style attributes should not throw an error (#100)
+    "<input style={{ ...inputProps.style, color: 'red' }} onChange={handleChange}/>",
   ],
   invalid: [
     {

test-project/yarn.lock

@@ -20,11 +20,11 @@ __metadata:
   linkType: hard
 
 "@creedengo/eslint-plugin@file:../eslint-plugin::locator=creedengo-javascript-test-project%40workspace%3A.":
-  version: 2.2.0
-  resolution: "@creedengo/eslint-plugin@file:../eslint-plugin#../eslint-plugin::hash=18baa3&locator=creedengo-javascript-test-project%40workspace%3A."
+  version: 3.0.0
+  resolution: "@creedengo/eslint-plugin@file:../eslint-plugin#../eslint-plugin::hash=2b5b53&locator=creedengo-javascript-test-project%40workspace%3A."
   peerDependencies:
     eslint: ^9.0.0
-  checksum: 10c0/93b16bd19046035eefc37d51b52015310472a5f6ff711d8ffd70c7856c20c9bffea5f90efd7c1309d87d939362dae998fd283edfc9e0e62e1f6f0165ea66cce0
+  checksum: 10c0/d5385c705fcc8dcaba9a394051338d462b2b22ce5aeac6bcf7b4a679b8a9959bf0bdcf7210d23dadb343e36f915652983c33729a11b74e8760434f7d8951b7f9
   languageName: node
   linkType: hard