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

Add sorting for modifier classes (focus:, md:...) #180

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

phacks
Copy link

@phacks phacks commented Dec 31, 2021

Hey everyone! This PR adds sorting for Tailwind modifier classes: md:w-12,hover:bg-gray-500...

The sort is as follows:

  • Modifier classes are added after non-modifier classes, but before
    customClasses if those are appended
  • For a given modifier (e.g. md:), the sort is the same as sortOrder
  • Modifiers are sorted among one another in the order they appear in the
    Tailwind documentation.

This PR does not introduce all possible variations of all possible classes, but instead does the following:

  • Get all classes with any modifier
  • Split them out in one array per modifier
  • Sort those individual arrays using sortOrder
  • Flatten all the individual arrays

Example:

// Input:
"xl:mx-6 bg-gray-100 lg:mx-4 mt-1 sm:bg-gray-200 hover:bg-blue-100 lg:bg-gray-400 hover:text-blue-100 xl:bg-gray-600 sm:mx-2"

// Output:
"mt-1 bg-gray-100 hover:text-blue-100 hover:bg-blue-100 sm:mx-2 sm:bg-gray-200 lg:mx-4 lg:bg-gray-400 xl:mx-6 xl:bg-gray-600"

Closes #52, #104 and #142.

I’m not sure whether we should make the order of modifier classes, or modified vs. non-modified classes customizable. I’d suggest tackling this in a subsequent PR should we want to!

This commit adds sorting for Tailwind modifier classes: `md:w-12`,
`hover:bg-gray-500`...

The sort is as follows:
- Modifier classes are added after non-modifier classes, but before
  customClasses if those are appended
- For a given modifier (e.g. `md:`), the sort is the same as `sortOrder`
- Modifiers are sorted among one another in the order they appear in the
  Tailwind documentation

Example:

```javascript
// Input:
"xl:mx-6 bg-gray-100 lg:mx-4 mt-1 sm:bg-gray-200 hover:bg-blue-100 lg:bg-gray-400 hover:text-blue-100 xl:bg-gray-600 sm:mx-2"

// Output:
"mt-1 bg-gray-100 hover:text-blue-100 hover:bg-blue-100 sm:mx-2 sm:bg-gray-200 lg:mx-4 lg:bg-gray-400 xl:mx-6 xl:bg-gray-600"
```
@AmirHosseinKarimi
Copy link

Hi. How is it going? Looks like the test has been failed.
Can you guys fix it, please?

@phacks
Copy link
Author

phacks commented Jan 26, 2022

oops! Done!

@amritk
Copy link

amritk commented Jul 1, 2022

Any word on a merge for this?

Edit: actually I gave it a try and it doesn't seem to work:

<View className='lg:text-black sm:text-black xl:text-black dark:bg-black flex-1 text-black bg-white'>

We would want the modifiers after the base classes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Responsive- and Pseudo-Class Variants
3 participants