Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't support dark prefix #27

Open
Svish opened this issue Mar 23, 2021 · 6 comments
Open

Doesn't support dark prefix #27

Svish opened this issue Mar 23, 2021 · 6 comments
Assignees
Labels
bug Something isn't working

Comments

@Svish
Copy link

Svish commented Mar 23, 2021

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;
  }
}
  1. 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
@Svish Svish added the bug Something isn't working label Mar 23, 2021
@LonJonn
Copy link

LonJonn commented Mar 24, 2021

@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!

@Svish
Copy link
Author

Svish commented Mar 24, 2021

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

@tqwewe
Copy link
Owner

tqwewe commented Mar 24, 2021

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.

@LonJonn
Copy link

LonJonn commented Mar 24, 2021

@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
Copy link

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

@LonJonn
Copy link

LonJonn commented May 20, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants