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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Ericlm
Copy link

@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
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
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
1 participant