green-code-initiative / ecoCode-javascript

Reduce the environmental footprint of your JS/TS software programs
https://ecocode.io
GNU General Public License v3.0
18 stars 17 forks source link

@ecocode/avoid-css-animations rule fails with the attribute type "JSXSpreadAttribute" #49

Open harumi030 opened 1 month ago

harumi030 commented 1 month ago

Current Behavior

I have a custom Input react component that inherits the native HTML input attributes. In JSX, it looks something like this.

// This is within the CustomInput functional component.
 <input
            {...inputProps}
            className={styles.input}
            onChange={handleChange}
 />

When I run the eslint, I get the following error. TypeError: Cannot read properties of undefined (reading 'name')

This is where it is failing: node_modules/@ecocode/eslint-plugin/lib/rules/avoid-css-animations.js:43:28

It checks the attributes of the node and looks for the 'style' attributes.

When I log the attributes, the the attributes that are using spread operator log like this:

    {
      type: 'JSXSpreadAttribute',
      argument: [Object],
      range: [Array],
      loc: [Object],
      parent: [Circular *1]
    }

As you can see, there is no name property.

Other attributes look like this:

    {
      type: 'JSXAttribute',
      name: [Object],
      value: [Object],
      range: [Array],
      loc: [Object],
      parent: [Circular *1]
    },

Is there any workaround for this?

Expected Behavior

It would recognize the spread attributes in JSX elements, and skips the attribute.name check. I'm not sure then where and how you would check for the style attribute if it is included in the spread operator.

Steps to Reproduce

  1. Create a component with an element with attributes using spread operator. (Example in the description)
  2. Run the eslint with ecocode eslint-plugin

Failure Logs

Oops! Something went wrong! :(

ESLint: 8.54.0

TypeError: Cannot read properties of undefined (reading 'name')
Occurred while linting src/components/Input/Input.tsx:43
Rule: "@ecocode/avoid-css-animations"
    at **/node_modules/@ecocode/eslint-plugin/lib/rules/avoid-css-animations.js:40:41
    at Array.find (<anonymous>)
    at JSXOpeningElement (**/node_modules/@ecocode/eslint-plugin/lib/rules/avoid-css-animations.js:39:48)
    at ruleErrorHandler (**/node_modules/eslint/lib/linter/linter.js:1091:28)
    at **/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (**/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (**/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (**/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (**/node_modules/eslint/lib/linter/node-event-generator.js:340:14)

Process finished with exit code 2

ecoCode-javascript Version

@ecocode/eslint-plugin@1.5.0

SonarQube Version

No response

Additional Information

There was also a same error with prefer-shorthand-css-notation.js