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

feat: matchers #28

Closed schoero closed 1 month ago

schoero commented 1 month ago

Introduces a new concept called matchers. Matchers allow finer control than regular expressions as they operate directly on the abstract syntax tree. This allows additional filtering, such as literals in conditions or logical expressions.


<img class={`
  these classes will get linted
  ${someVariable === "this string will NOT get linted" ? "but this will" : "and this will too"}
  ${someVariable && "this string will get linted"}
`} />


There are currently 3 types of matchers:



It is possible to provide a pathPattern to the objectKeys and objectValues matchers, to only match keys/values that match the pathPattern. This allows for more fine-grained control for common utilities like Class Variance Authority.
The pathPattern is a regular expression that is matched against the object path.

For example, the following matcher will only match object values for the compoundVariants.class key:


{
  "match": "objectValues",
  "pathPattern": "^compoundVariants\\[\\d+\\]\\.(?:className|class)$"
}
<img class={
  cva("this will get linted", {
    compoundVariants: [
      {
        class: "and this will get linted",
        myVariant: "but this will not get linted"
      }
    ]
  })
} />;

closes #17