Skip to content

False positives in angular template #177

@LeoVie

Description

@LeoVie

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

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions