ecoCode-javascript icon indicating copy to clipboard operation
ecoCode-javascript copied to clipboard

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

Open harumi030 opened this issue 1 year ago • 0 comments

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/[email protected]

SonarQube Version

No response

Additional Information

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

harumi030 avatar Aug 02 '24 15:08 harumi030