schoero / eslint-plugin-readable-tailwind

ESLint plugin to automatically break up long tailwind class strings into multiple lines for better readability.
MIT License
63 stars 3 forks source link

Not really an issue but would be nice #17

Closed The-Code-Monkey closed 1 month ago

The-Code-Monkey commented 3 months ago

So i came across this today

className={cn(
  'flex h-10 w-full border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
  className,
)}

It would be nice if this was prettified too. not a major issue though.

schoero commented 3 months ago

This is already possible, but you have to add "cn" to the list of callees in the rule options:

"readable-tailwind/multiline": ["warn", { "callees": ["clsx", "cva", "ctl", "twMerge", "cn"] }],
"readable-tailwind/no-unnecessary-whitespace": ["warn", { "callees": ["clsx", "cva", "ctl", "twMerge", "cn"] }],
"readable-tailwind/sort-classes": ["warn", { "callees": ["clsx", "cva", "ctl", "twMerge", "cn"] }]

I'm thinking about adding it to the defaults in the next release though.

Pab450 commented 2 months ago

I've had the same experience! I'm glad to see that the solution is straightforward. Adding "cn" to the list of callees in the rule options does the trick. I would also recommend considering adding it to the defaults in the next release, as it could be a helpful improvement for many users.

schoero commented 2 months ago

The next bigger release will include a new concept called matchers, that will enable more fine grained control which strings will get linted. This allows much better defaults and no false positives.

The matchers feature is almost complete, but it needs more testing prior to the release. If anybody wants to try it out I'd be happy to get some feedback.

It can be installed using

npm i eslint-plugin-readable-tailwind@beta
Pab450 commented 2 months ago

The next bigger release will include a new concept called matchers, that will enable more fine grained control which strings will get linted. This allows much better defaults and no false positives.

The matchers feature is almost complete, but it needs more testing prior to the release. If anybody wants to try it out I'd be happy to get some feedback.

It can be installed using

Thanks for the update on the 'matchers' concept! I'm excited to try it out on my personal project right away. With two weeks of vacation ahead, this seems like the perfect time to test it out. I'll provide you with feedback on how it works. Thanks for your hard work, and I'm looking forward to using the new feature!

Pab450 commented 1 month ago

The next bigger release will include a new concept called matchers, that will enable more fine grained control which strings will get linted. This allows much better defaults and no false positives. The matchers feature is almost complete, but it needs more testing prior to the release. If anybody wants to try it out I'd be happy to get some feedback. It can be installed using

Thanks for the update on the 'matchers' concept! I'm excited to try it out on my personal project right away. With two weeks of vacation ahead, this seems like the perfect time to test it out. I'll provide you with feedback on how it works. Thanks for your hard work, and I'm looking forward to using the new feature!

I tested the beta for 2 weeks and it worked great! No issues, and no false positives!! Thanks for the awesome feature and your hard work!