-
-
Notifications
You must be signed in to change notification settings - Fork 12
Open
Labels
bugSomething isn't workingSomething isn't working
Description
Using the config from https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/parsers/angular.md, eslint reports some false positives in this template:
<div [class]="{
'hidden': renderMode() === 'popover',
}"></div>
<div [class]="{
'lg:rounded-r-lg': renderMode() === 'modal',
'rounded-r-lg': renderMode() === 'popover',
}"></div>
In line 2, it's reporting
Unregistered class detected: popover (better-tailwindcss/no-unregistered-classes
and in line 5, it's reporting
Incorrect class order. Expected
:rounded-r-lg'
to be
rounded-r-lg'
(better-tailwindcss/enforce-consistent-class-order)
ESLint:
Unnecessary whitespace. Expected
:rounded-r-lg'
to be
rounded-r-lg'
(better-tailwindcss/no-unnecessary-whitespace)
Switching the classes in line 5 and 6 makes the second error disappear. So I think, the detection of wrong order is correct, but applying the automatic fix is destroying the template to
...
<div [class]="{
'lgrounded-r-lg': renderMode() === 'modal',
'rounded-r-lg': renderMode() === 'popover',
}"></div>
It's possible to workaround that false positives by moving the equality check into the typescript part of the component and ordering the classes manually
<div [class]="{
'hidden': isPopover(),
}"></div>
<div [class]="{
'rounded-r-lg': isPopover(),
'lg:rounded-r-lg': isModal(),
}"></div>
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working