Fix optional chaining for style attribute checks in ESLint rules

green-code-initiative · Jan 19, 2025 · af1eeb2 · af1eeb2
1 parent f7b9173
commit af1eeb2
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   [#56](https://github.com/green-code-initiative/creedengo-javascript/issues/56) **BREAKING:** Rename plugin to creedengo-javascript
 -   [#44](https://github.com/green-code-initiative/creedengo-javascript/pull/44) Implement the rule GCI523 for React Native
 -   [#52](https://github.com/green-code-initiative/creedengo-javascript/pull/52) Remove trailing dots in Sonar rules descriptions
+-   [#62](https://github.com/green-code-initiative/creedengo-javascript/pull/62) Fix style attribute checks in GCI26 and GCI29
 -   Update Docker Compose configuration file to V2
 
 ### Deleted

diff --git a/eslint-plugin/lib/rules/avoid-css-animations.js b/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) {

diff --git a/eslint-plugin/lib/rules/prefer-shorthand-css-notations.js b/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 =

diff --git a/eslint-plugin/tests/lib/rules/avoid-css-animations.js b/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: [

diff --git a/eslint-plugin/tests/lib/rules/prefer-shorthand-css-notations.js b/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: [
     {