francoismassart / eslint-plugin-tailwindcss

ESLint plugin for Tailwind CSS usage
https://www.npmjs.com/package/eslint-plugin-tailwindcss
MIT License
1.47k stars 70 forks source link

[BUG] before:content with variant breaks autofix in vue #328

Open illeb opened 6 months ago

illeb commented 6 months ago

Describe the bug It seems that having a before:content with an arbitrary variant (for example, before:content-[\'\']) breaks the autofixer (launched via eslint --ext .js,.vue,.ts . --fix) with the following error:

TypeError: Cannot read properties of null (reading 'type')
Occurred while linting /home/projects/nuxt-starter-t1gumu/app.vue:1
Rule: "tailwindcss/classnames-order"
    at isArrayExpression (file:///home/projects/nuxt-starter-t1gumu/node_modules/eslint-plugin-tailwindcss/lib/util/ast.js:91:92)
    at isVueValidAttributeValue (file:///home/projects/nuxt-starter-t1gumu/node_modules/eslint-plugin-tailwindcss/lib/util/ast.js:113:10)
    at Object.isValidVueAttribute (file:///home/projects/nuxt-starter-t1gumu/node_modules/eslint-plugin-tailwindcss/lib/util/ast.js:176:8)
    at EventEmitter.VAttribute (file:///home/projects/nuxt-starter-t1gumu/node_modules/eslint-plugin-tailwindcss/lib/rules/classnames-order.js:253:25)

The issue seems to be present only if a :class is used in a SFC vue file with a condition, for example: <h1 :class="{ 'before:content-[\'\'] before:absolute': true }"> In fact, <h1 class="before:content-[\'\'] before:absolute"> does not cause errors

To Reproduce Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/autofix-broken
  2. run a yarn lint --fix in console

Expected behavior The autofixer should work with no errors

Screenshots N/A

Environment (please complete the following information):

eslint config file or live demo I managed to ricreate the issue with https://stackblitz.com/edit/autofix-broken