Skip to content

v4 #266

@schoero

Description

@schoero

Over the past few months, I've been working on a major overhaul of the eslint-plugin-better-tailwindcss plugin. This new version brings a lot of improvements, some new features, and some breaking changes to enhance the experience with TailwindCSS linting.
There is still a bit of work to be done, but my goal is to release the new version before the end of the year.


You can help by testing the beta version and provide feedback in this issue.


npm i eslint-plugin-better-tailwindcss@beta

You can also support my work via GitHub Sponsors. I truly appreciate everyone who has supported me so far!


Changes

All changes are listed in the CHANGELOG. Here are the most important ones:


Features:

  • New rule: enforce-canonical-classes (#232)
  • New options for enforce-consistent-class-order to sort "component classes" and "unknown classes" (#263)
    • detectComponentClasses: boolean
    • componentClassOrder: "asc" | "desc" | "preserve"
    • componentClassPosition: "start" | "end"
    • unknownClassOrder: "asc" | "desc" | "preserve"
    • unknownClassPosition: "start" | "end"
  • Better Performance

⚠️ Breaking Changes

First of all, the minimum required Node.js version is has changed to support v23.0.0, v22.12.0, v20.19.0 to support require(esm)

  • This allowed me to remove the CommonJS build (#264)

Some rules have been renamed to better reflect their intentions:

  • Renamed rule no-unregistered-classes to no-unknown-classes
  • Renamed rule sort-classes to enforce-consistent-class-order
  • Renamed rule multiline to enforce-consistent-line-wrapping

For some rules, the options have been renamed or changed:

  • Options for better-tailwindcss/enforce-consistent-variable-syntax have been renamed to shorthand and variable.
  • The default for enforce-consistent-important-position is now always recommended.
    If you are on tailwindcss v3 need to manually set it to legacy to keep it working for tailwindcss v3.
  • Renamed the improved sorting order for enforce-consistent-class-order to strict (#245)
    • improved is no longer the default option as most people expect the order to match the official order from tailwind.
    • the improved order got renamed to strict to better describe its intentions.
    • the logic of the strict order has changed:
      • Classes that share the same base variants get grouped together.
      • Classes with less variants come before classes with more variants.
      • Classes with arbitrary variants come last.
  • The enforce-consistent-line-wrapping rule now groups variants more strictly. Previously it only grouped classes by their first variant. Now all variants are ordered correctly.

The configs have been renamed and updated to match the recommended shape of ESLint.

  • Renamed configs (#244)
    • The following configs are now exposed:
      • recommended
      • recommended-warn
      • recommended-error
      • stylistic
      • stylistic-warn
      • stylistic-error
      • correctness
      • correctness-warn
      • correctness-error
      • legacy-recommended
      • legacy-recommended-warn
      • legacy-recommended-error
      • legacy-stylistic
      • legacy-stylistic-warn
      • legacy-stylistic-error
      • legacy-correctness
      • legacy-correctness-warn
      • legacy-correctness-error
    • Please check the updated Parser Documentation to see the recommended way to set up the plugin with your parser.

Other changes:

  • Function getDefaultIgnoredUnregisteredClasses() has been removed.
  • Removed rule regex matchers
  • Preserve normal quotes whenever possible (#246)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions