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

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

Closed
Ericlm opened this issue Feb 29, 2024 · 0 comments · Fixed by #359
Closed
Labels
bug Something isn't working

Comments

@Ericlm
Copy link
Contributor

Ericlm commented Feb 29, 2024

Describe the bug
Within a Vue project, the plugin detects the invalid tailwind classes in the following situations:

  • Static classes like <div class="text-yolo"/>
  • Dynamic class in list-style ternary : <div :class="[bool ? 'text-yulu' : 'text-red-50']" />
  • Dynamic class in object-style: <div :class="{'text-yepee': bool}" />

However, the plugin does not detect invalid classes in the "object within list" style, like:
<div :class="[{'text-yala': is}]"/> (see https://vuejs.org/guide/essentials/class-and-style.html#class-and-style-bindings)

To Reproduce
Steps to reproduce the behavior:

  1. Create a fresh new vue project
  2. Intall tailwindcss (https://tailwindcss.com/docs/guides/vite#vue)
  3. Install eslint-plugin-tailwindcss
  4. At this state, you should see the same issue as explained above

I made a repo with the issue at https://github.com/Ericlm/eslint-tailwind-issue. Just go to App.vue and you will see different examples of class binding as the ones above.

Expected behavior
The plugin should report an invalid tailwind class as in the other situations. I should also mention that the plugin reports correctly if the order of classnames is wrong, so it seems to work within this case, but to simply "ignore" the invalid classes.

Screenshots
You can see that the class "text-yala" is not reported as an invalid classname on the img tag.
image
PS: I didn't run the command in the terminal before the screenshot, so the "text-yepee" error doesn't appear in the CLI, but it is correctly reported by the plugin 😉.

Environment (please complete the following information):

  • OS: macOS 14.3.1 (23D60)
  • Softwares + version used:
    • VSCode Version: 1.87.0 (Universal)
    • npm 10.1.0
    • node v20.8.0

Additional context
I was trying to edit classes in a complexe component with an object within an array when I found out that I could put any class without any linting error.

Repo with repro
https://github.com/Ericlm/eslint-tailwind-issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant