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

Fix custom classnames rule with VueJS objects within list. #359

Merged
merged 3 commits into from
Oct 9, 2024

Conversation

Ericlm
Copy link
Contributor

@Ericlm Ericlm commented Sep 19, 2024

Fix custom classnames rule with VueJS objects within list syntax.

Description

This PR fixes an issue occurring with the no-custom-classname rule, where it did not detect custom classes inside object in list patterns:
<div :class="[{'custom-not-detected': true}]"/>.

Fixes #319

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • Breaking change => existing will work, but more warnings will be issued

How Has This Been Tested?

New tests have been added. They're all using vue-eslint-parser in a .vue file.

  • Testing for invalid/valid classes when using object within list
  • Testing with a mix of valid/invalid within the object, and with classes written directly in the array.
  • Testing with multiple objects and classes between them, in an array.

Test Configuration:

  • OS + version: macOS Sequoia 15.0 (24A335)
  • NPM version: 10.8.3
  • Node version: 22.6.0

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas => should probably comment in ast as it's an important part of the plugin?
  • I have made corresponding changes to the documentation => no need as it's a fix
  • My changes generate no new warnings => it probably will as it can detect new classes
  • I have added tests that prove my fix is effective or that my feature works
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

  • VSCode with TS automatically removed some unreachable code.
  • I added a check in the ast util, it's working well as all tests passed, but I don't know if it is the cleanest way to do that.

@@ -302,7 +299,7 @@ function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, is
return;
case 'ObjectExpression':
childNode.properties.forEach((prop) => {
const isUsedByClassNamesPlugin = rootNode.callee && rootNode.callee.name === 'classnames';
const isUsedByClassNamesPlugin = (rootNode.callee && rootNode.callee.name === 'classnames') || rootNode.type === 'VAttribute';
Copy link
Contributor Author

@Ericlm Ericlm Sep 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the change that make it works. As there is no callee for this type of rootNode, I directly checked the type here.

I ensured it works with other possible props, dynamics or not.

@Ericlm Ericlm marked this pull request as ready for review September 19, 2024 20:30
@Ericlm
Copy link
Contributor Author

Ericlm commented Oct 9, 2024

@francoismassart it would be great if this was merged, especially as it can leads to subtle bugs 🙂

@francoismassart
Copy link
Owner

Hi @Ericlm,
I'll take a look at it

@francoismassart francoismassart merged commit 99332c1 into francoismassart:master Oct 9, 2024
@Ericlm
Copy link
Contributor Author

Ericlm commented Oct 9, 2024

Thank you very much ! 🙏😊

@francoismassart
Copy link
Owner

Publié avec la v3.17.5, merci pour ta participation!

@Ericlm
Copy link
Contributor Author

Ericlm commented Oct 9, 2024

De rien, merci encore pour ce plugin très utile 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Plugin does not seem to detect invalid classes with specific class syntax in Vue
2 participants