Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
harumi030 opened this issue Aug 2, 2024 · 0 comments
Labels
💉 bug: unconfirmed Potential bugs that need replicating to verify.

Comments

@harumi030
Copy link

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 harumi030 added the 💉 bug: unconfirmed Potential bugs that need replicating to verify. label Aug 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💉 bug: unconfirmed Potential bugs that need replicating to verify.
Projects
None yet
Development

No branches or pull requests

1 participant