Is it possible to support a custom class order setting?

[rik-iso]

Hi!

We have some custom tailwind classes for our typography styles all prefixed typo-. In my ideal world they'd be sorted after the existing text- and font- ones, but this seems to ignore them right now (I'd also be fine if they were consistently sorted after all the built-in ones, which may be easier).

Would it be possible to expose an "additional sort order" setting which would support this?
Happy to contribute.

Thanks.

[rik-iso]

Oh ahh I see the issue. Tailwind getClassOrder is returning null for these:

[
  [ 'typo-body-small-strong', null ],
  [ 'cursor-pointer', 3n ],
  [ 'rounded-lg', 4n ],
  [ 'border-0.5', 5n ],
  [ 'border-transparent', 6n ],
  [ 'px-3', 7n ],
  [ 'py-1', 8n ],
  [ 'text-2xl', 9n ],
  [ 'font-bold', 10n ],
  [ 'text-light-text-secondary', 11n ],
  [ 'active:typo-body-medium-strong', null ],
  [ 'active:text-light-text-secondary', 18n ],
  [ 'dark:text-dark-text-secondary', 19n ],
  [ 'dark:data-selected:border-dark-dashboard-divider', 20n ],
  [ 'dark:data-selected:text-dark-text-primary', 21n ],
  [ 'dark:active:text-dark-text-secondary', 23n ],
  [ 'data-selected:cursor-default', 12n ],
  [ 'data-selected:border-light-dashboard-divider', 13n ],
  [ 'data-selected:text-light-text-primary', 14n ],
  [ 'data-selected:shadow-floating', 15n ],
  [ 'hover:border-light-dashboard-divider', 16n ],
  [ 'hover:text-light-text-primary', 17n ],
  [ 'hover:dark:text-dark-text-primary', 22n ]
] 

and this plugin sorts on that. The interesting thing though is that it is roughly placed in the right place (see the active: variant).

This horrible hack tries to assign a sort-order value based on siblings which actually sort of works:

diff --git a/lib/esm/rules/tailwind-sort-classes.js b/lib/esm/rules/tailwind-sort-classes.js
index 8e384850424c948844c1c4a6db406aa720be645c..33119ae0417ff8b772c43e929db4295f4904f6fa 100644
--- a/lib/esm/rules/tailwind-sort-classes.js
+++ b/lib/esm/rules/tailwind-sort-classes.js
@@ -190,7 +190,8 @@ function sortClasses(ctx, tailwindContext, classes) {
     if (order === "desc") {
         return [...classes].sort((a, b) => b.localeCompare(a));
     }
-    const officialClassOrder = tailwindContext.getClassOrder(classes);
+    const ogClassOrder = tailwindContext.getClassOrder(classes)
+    const officialClassOrder = ogClassOrder.map(([k,v], idx) => [k, v ?? ogClassOrder[idx+1][1] ?? ogClassOrder[idx-1][1] ?? null]);
     const officiallySortedClasses = [...officialClassOrder]
         .sort(([, a], [, z]) => {
         if (a === z) {
@@ -205,6 +206,7 @@ function sortClasses(ctx, tailwindContext, classes) {
         return +(a - z > 0n) - +(a - z < 0n);
     })
         .map(([className]) => className);
+    console.log(officialClassOrder, officiallySortedClasses);
     if (order === "official") {
         return officiallySortedClasses;
     }

but probably isn't the right thing to do. This feels like it's a feature request for Tailwind itself, I think?

[schoero]

I don't think tailwind would implement such a feature, as they followed prettiers approach of zero configurability:

We think Prettier gets it right when it comes to being opinionated and offering little in terms of customizability

I am open to add such a feature to this ESLint plugin, but I can't see how the configuration for this could look like.

The weights returned from the official sorting order vary depending of the available classes, so I'm not sure if it is even possible to reliably sort them in between builtin tailwind classes.

Just sorting them to the end (before the variants) would certainly be easier and wouldn't require any configuration.

I will try this out when I have some time. If you'd like to contribute, I'd be happy to accept a pull request.