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] TypeError on Latest Version 3.14.2 #317

Closed coltonhurst closed 6 months ago

coltonhurst commented 7 months ago

Describe the bug

Hello! Thank you for all of the great work on this plugin.

When running npm run lint on version 3.14.2, I receive the following TypeError:

TypeError: Cannot convert undefined or null to object
Occurred while linting /Users/coltonhurst/github/bitwarden/clients/apps/browser/src/auth/popup/account-switching/account-switcher.component.html:5
Rule: "tailwindcss/enforces-shorthand"
    at Function.keys (<anonymous>)
    at /Users/coltonhurst/github/bitwarden/clients/node_modules/eslint-plugin-tailwindcss/lib/rules/enforces-shorthand.js:248:37
    at Array.filter (<anonymous>)
    at parseForShorthandCandidates (/Users/coltonhurst/github/bitwarden/clients/node_modules/eslint-plugin-tailwindcss/lib/rules/enforces-shorthand.js:239:52)
    at attributeVisitor (/Users/coltonhurst/github/bitwarden/clients/node_modules/eslint-plugin-tailwindcss/lib/rules/enforces-shorthand.js:479:9)
    at ruleErrorHandler (/Users/coltonhurst/github/bitwarden/clients/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/coltonhurst/github/bitwarden/clients/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/coltonhurst/github/bitwarden/clients/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/coltonhurst/github/bitwarden/clients/node_modules/eslint/lib/linter/node-event-generator.js:297:26)

This was discovered and is visible through this PR.

To Reproduce Steps to reproduce the behavior:

  1. Clone the Bitwarden clients repository here
  2. Run npm install
  3. Run npm ci
  4. Run npm run lint
    • Note: In our package.json we have lint defined as so: "lint": "eslint . --cache --cache-strategy content && prettier --check .",

Expected behavior

That npm run lint runs successfully.

Screenshots

image

Environment (please complete the following information):

Thank you!

francoismassart commented 6 months ago

Hi @coltonhurst I think it was due to the fact that I was always expecting to get a value from theme.size which may not exists depending on your version of Tailwind CSS... Your old MR code is not available however, I did:

  1. clone the latest version of the repo
  2. install dependencies
  3. npm run lint
  4. npm i eslint-plugin-tailwindcss@3.15.0
  5. npm run lint

Maybe it was fixed by the update of Tailwind CSS but I'll patch v3.15.1 to address the issue.

I would be curious to investigate more on this. Do you still have your old PR somewhere.

francoismassart commented 6 months ago

If you still get the runtime error try this patched version

npm i eslint-plugin-tailwindcss@3.15.1-beta.0

andriibyk commented 6 months ago

Hi @francoismassart

The same type of issue is for tailwindcss/no-unnecessary-arbitrary-value" rule for patched version "eslint-plugin-tailwindcss@3.15.1-beta.0"

image

index.tsx:41

- <span className="!absolute !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span>
+ <span className="!absolute !whitespace-nowrap !border-0 !p-0  [clip:rect(0,0,0,0)]">Loading...</span>

Once removed ! for ![clip:rect(0,0,0,0)] value - it does not cause an error

francoismassart commented 6 months ago

Thanks for the infos, I'll take a look at it

francoismassart commented 6 months ago

@coltonhurst please try with npm i eslint-plugin-tailwindcss@3.15.1-beta.1

francoismassart commented 6 months ago

fixed in eslint-plugin-tailwindcss@3.15.1

francoismassart commented 6 months ago

@coltonhurst please re-open the issue if eslint-plugin-tailwindcss@3.15.1 does not fix your issue

coltonhurst commented 6 months ago

@francoismassart apologies for the late reply. Thank you so much! This is fixed, I've tested 3.15.1 on this PR. Thank you for the support!