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

Sort arbitrary properties alphabetically across multiple class lists #12911

Merged
merged 2 commits into from
Feb 13, 2024

Conversation

thecrypticace
Copy link
Contributor

Fixes tailwindlabs/prettier-plugin-tailwindcss#246

In Tailwind we sort classes alphabetically before processing to produce a deterministic order. And, when we encounter an arbitrary property we register it at that time so that's the order it'll take when sorting. In most cases this is fine because we sort up front, however, in the Prettier plugin we don't know all classes up front — each individual class list is sorted separately but uses the same internal context for performance reasons. This means that we need to do some extra bookkeeping to ensure they're sorted consistently regardless of the order of individual class lists or files scanned.

This PR does this bookkeeping and will sort classes to ensure that the arbitrary properties are always alphabetical when handled by the prettier plugin even scross separate class lists or files.

Now given these two files, a.jsx and b.jsx:

// a.jsx
export default function ComponentA() {
  return <div className="[--fg:#fff]" />
}
// b.jsx
export default function ComponentB() {
  return <div className="[--bg:#111] [--bg_hover:#000] [--fg:#fff]" />
}

If you format each individual one with prettier or format all of them at one time the order of the properties will no longer flip-flop between these two lists:

[--bg:#111] [--bg_hover:#000] [--fg:#fff]
[--fg:#fff] [--bg:#111] [--bg_hover:#000]

@thecrypticace thecrypticace changed the title Fix/arbitrary property ordering Sort arbitrary properties alphabetically across multiple files Feb 9, 2024
@thecrypticace thecrypticace changed the title Sort arbitrary properties alphabetically across multiple files Sort arbitrary properties alphabetically across multiple class lists Feb 9, 2024
Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we have to worry about this in v4? I think we handle this scenario already the way we built it. 🤔

@thecrypticace
Copy link
Contributor Author

I think we may but it entirely depends on how the APIs end up working with tools like the prettier plugin. As for right now it is already handled.

@thecrypticace thecrypticace merged commit 801a998 into master Feb 13, 2024
10 checks passed
@thecrypticace thecrypticace deleted the fix/arbitrary-property-ordering branch February 13, 2024 19:08
thecrypticace added a commit that referenced this pull request Feb 13, 2024
…12911)

* Sort arbitrary properties alphabetically across multiple files

* Update test
KrisBraun pushed a commit that referenced this pull request Feb 21, 2024
…12911)

* Sort arbitrary properties alphabetically across multiple files

* Update test
KrisBraun pushed a commit that referenced this pull request Feb 23, 2024
…12911)

* Sort arbitrary properties alphabetically across multiple files

* Update test
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.

Inconsistent sorting between formatting all files and a single file
2 participants