Custom classes are sorted incorrectly

[francoism90]

What version of prettier-plugin-tailwindcss are you using?

v0.3.0

What version of Tailwind CSS are you using?

v3.0.22

What version of Node.js are you using?

20.4.0-r0

What package manager are you using?

npm

What operating system are you using?

Linux (Docker)

Reproduction URL

saadeghi/daisyui#2124 (reply in thread)

I can provide a public Reproduction URL, however the maintainer of DaisyUI @saadeghi confirms the same issue.
If it's still required, I'm happy to provide one. :)

Describe your issue

The problem is the invalid sorting of DaisyUI (or any other framework I tried) custom classes.

Result:

<div class="card-compact card rounded-none p-3"/>
<div class="menu-compact menu m-1"/>
<button type="button" class="btn-secondary btn h-6 w-6" />

Expected:

<div class="card card-compact rounded-none p-3"/>
<div class="menu menu-compact m-1"/>
<button type="button" class="btn btn-secondary h-6 w-6" />

I cannot find any configuration options to solve this. I've tried multiple packages, including https://github.com/francoismassart/eslint-plugin-tailwindcss, also different options, but it all results incorrect ordering of classes.

I do understand this package is used to sort Tailwind classes, however it would be nice if it could understand sub classes, e.g. menu-* after menu. Or sort Tailwind classes, and leave unknown classes in the provided order. :)

Please let me know if you need more info.

Thanks.

[adamwathan]

Reproduction would be helpful — we don't need it as proof of the issue, we need it as a starting point for trying to troubleshoot and fix the problem. Without one we have to spend a lot more time getting a project set up ourselves and it's not always easy to find that time, so it will take much longer before we have a chance to look at and try and solve the problem if it exists.

[adamwathan]

Made this quick reproduction:

https://play.tailwindcss.com/segOaiMJFD

The reason menu-compact is sorted to the beginning is because it doesn't exist in Daisy UI.

There does seem to be some surprising behavior here though because when I add it as a custom class in the components layer, it's still sorted before .menu which I wouldn't expect:

https://play.tailwindcss.com/HZ7vexhzaU

The sorting logic is supposed to be:

1. Unknown classes, then...
2. Custom classes not generated by Tailwind (either default or via plugin), then...
3. Classes generated by Tailwind

...and within each group the order is supposed to match the order in your CSS file.

So we'll look into it and see if there's a good explanation for why it's changing the order of menu menu-compact 👍

[adamwathan]

I guess this makes sense actually, too early haven’t had my coffee 😄 but menu is generated by Tailwind (because Daisy UI is a plugin) and menu-compact is custom CSS, so it comes first.

I sort of think menu-compact should be treated like a plugin though if it’s in a layer, so will still play with it a bit.

[francoism90]

Thanks for looking into this, sorry not providing a repo. :)

The class menu-compact is indeed a custom class. However button.css (https://github.com/saadeghi/daisyui/blob/master/src/components/styled/button.css) does provide additional classes like btn-primary, btn-secondary, etc.

I agree with @adamwathan about the order. The problem is that you cannot always use default Tailwind classes, sometimes you extend them or use custom css logic.

[thecrypticace]

@francoism90 Hey! So the prettier plugin doesn't know about @layer-defined classes. It would need a list of CSS files to read, parse, and use to figure out class sorting. And, unfortunately, this would get quite complicated when using preprocessors, Vue SFCs, Svelte style blocks, or other similar situations when the file containing styles isn't just CSS.

As a result, we do not know the class menu-compact exists. You can work around this by instead adding it to your config using a plugin: https://play.tailwindcss.com/gI1boRFsii

It's not ideal but it's the solution we have today. Sorry — hopefully that helps tho! ✨

[francoism90]

@thecrypticace Could you please be more specific? :)

Also, would it be possible for projects, like DaisyUI, to provide this out-of-the box?
I would be happy to contribute to the project, but I don't know what would be the best solution.

It's a bit weird this ticket gets closed so soon, as I thought other members were taking a look at possible solutions.

---

Edit:

I found this https://tailwindcss.com/docs/plugins#adding-components

However DaisyUI already provides CSS files (they use @apply), how would this work? Do you have to register styles as well?

[thecrypticace]

Yeah, as you found you call addComponents in a function with a JS object that describes the CSS you want to output. You can still use @apply in a component by doing something like this in a plugin:

function ({ addComponents }) {
  addComponents({
    '.menu-compact': {
      '@apply bg-red-300 pt-8': {},
    },
  })
}

But I'd recommend using the theme function and reading from the theme instead:

function ({ addComponents, theme }) {
  addComponents({
    '.menu-compact': {
      backgroundColor: theme('colors.red.300'),
      paddingTop: theme('spacing.8'),
    },
  })
}

Regarding Daisy UI, yes they do use CSS files. However, they pre-process those at build-time which are then turned into JS files. Those JS files are then loaded and Daisy UI calls addComponents with the JS-objects that are generated from those files.

Here you can see that they:

1. At build time, combine a bunch of the CSS files into different groups:
   https://github.com/saadeghi/daisyui/blob/master/package.json#L80

2. At build time, use prejss-cli which converts the CSS files into JS files:
   https://github.com/saadeghi/daisyui/blob/master/package.json#L77

3. At run time, load those built + published files when requiring the plugin:
   https://github.com/saadeghi/daisyui/blob/master/src/index.js#L10-L13
   https://github.com/saadeghi/daisyui/blob/master/src/index.js#L40-L49

4. At run time, call addComponents with the object(s) from the just loaded/required files (which were built from the CSS files):
   https://github.com/saadeghi/daisyui/blob/master/src/index.js#L66

If you want to see one of the files that they build which ultimately gets passed to addComponents() you can look at the published package:
https://unpkg.com/browse/daisyui@3.2.1/dist/styled.js

So ultimately, what's happening with Daisy UI, is the same as I described by using addComponents, just with a few more steps that happen when publishing to NPM.

You could absolutely wire up something like this yourself, that also runs when developing, but chances are it'll slow down your build a decent amount and will not work with hot reloading at all. So there are tradeoffs to doing so.

[francoism90]

@thecrypticace But if DaisyUI is already using addComponents, it doesn't solve the incorrect class ordering, right?

Like said before, it does the same for btn classes: btn-primary btn, instead of btn btn-primary (both are valid DaisyUI classes) and not custom.

[thecrypticace]

@francoism90 That is actually a separate issue in Tailwind CSS itself related to the fact that Daisy UI uses the same class in multiple selectors and has already been fixed in the insiders build of Tailwind CSS. It's an unrelated problem. (and sorry for the confusion)

[thecrypticace]

See the issue for it (#174) and the PR fixing it (tailwindlabs/tailwindcss#11504).

[francoism90]

@thecrypticace Thanks for the detailed answers, and pointing me to the PR.

Think @saadeghi should take a look at this, I'm not a DaisyUI developer and expert on this topic. :)
Will however try the insider build, to validate if it has been solved.