Doesn't support `dark` prefix

[Torleif Berger]

The plugin doesn't seem to support/know about the dark: prefix used with dark mode.

To Reproduce

1. Write the following CSS:

@layer base {
  body {
    @apply text-gray-900 bg-gray-100 dark:text-gray-100 dark:bg-gray-900;
  }
}

2. Save it and have this plugin sort it, and you end up with this:

@layer base {
  body {
    @apply dark:text-gray-100 text-gray-900 bg-gray-100 dark:bg-gray-900;
  }
}

Expected behavior
Sorting should've taken dark: into account. Either put them together at the end, or after it's "sibling":

// Last
@apply text-gray-900 bg-gray-100 dark:text-gray-100 dark:bg-gray-900;

// Sibling
@apply text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-900;

Versions:

• prettier-plugin-tailwind version: 2.2.10

[Leon Salsiccia]

@Svish I've actually added support for this (along with nested group support e.g. md:(bg-black hover:(text-white bg-gray-900))) within my own personal fork of this plugin here.

I'm not sure I want to make another issue so I might just add some context here if that's fine 😊

@acidic9 Thank you for this amazing library, but I noticed a few things, such as what I mentioned above, were unsupported, so I decided it would be "fun" to try and make my own... (I'm not making a formatter ever again 😩).

I used your plugin as a base but rewrote the tailwind class sorter from scratch to support these features. Because of this, I felt opening a PR would be inconvenient since the approach was quite different (I opted for recursive sorting to sort nested groups). All the logic for my variation of the sorter can be found here under sortClasses in case you're curious.

Let me know if you have any questions. Thanks again for maintaining this plugin!

[Torleif Berger]

@LonJonn Is it possible to make use of your fork instead of this one in a project until this is fixed?

[Ari Seyhun]

If you've made a fix, feel free to submit a PR and I'll merge. I'm just short of time for Open Source work at this time.

[Leon Salsiccia]

@LonJonn Is it possible to make use of your fork instead of this one in a project until this is fixed?

I've published it to npm under prettier-plugin-tailsort for my own personal use, so you can use it from there if you'd like. However, I'm most likely not going to be maintaining it much since I don't have much free time, unfortunately.

If you've made a fix, feel free to submit a PR and I'll merge. I'm just short of time for Open Source work at this time.

I'm happy to, but the sorter I made doesn't support custom options for sort order, config location, etc. since I was mainly making this for myself. I'll most likely open a PR once I add support for these so that the features remain unchanged.

[LeoniePhiline]

@LonJonn If you fork and publish, please at least change the github links on npmjs.com. ;)

[Leon Salsiccia]

@LonJonn If you fork and publish, please at least change the github links on npmjs.com. ;)

Oh damn did I forget to? My bad I'll fix that now.