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 text wrapping utilities with typography utilities #14787

Merged
merged 3 commits into from
Oct 24, 2024

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Oct 24, 2024

This PR implements some changes to the way we sort typography utilities, inspired by #14715.

Prior to this PR, utilities like text-balance, break-words, and text-center were sorted very early, even before things like border utilities:

<div class="text-balance break-words border-2 border-blue-500 text-center indent-5 text-2xl font-medium capitalize leading-6 tracking-tight text-red-500 underline"></div>

This PR changes the sort order to co-locate these with other typography utilities which feels a lot more natural:

<div class="border-2 border-blue-500 text-center indent-5 text-2xl leading-6 font-medium tracking-tight text-balance break-words text-red-500 capitalize underline"></div>

I've also made some small adjustments to how other typography properties are sorted based on pairing with @reinink and just deciding what felt the most intuitive to us and matched the order we'd likely type things in manually.

To test this change I temporarily added a new test to sort.test.ts to make sure the classes were sorted in the expected order:

  [
    // Input
    'text-red-500 text-center capitalize text-2xl break-words text-balance underline font-medium tracking-tight leading-6 indent-5',

    // Expected
    'text-center indent-5 text-2xl leading-6 font-medium tracking-tight text-balance break-words text-red-500 capitalize underline',
  ],

Didn't keep the test around because there's no real logic to test here (it just matches the order in the property-order.ts file) and we don't have any other tests like this.

I've also made some minor unrelated changes here like deleting legacy properties from property-order.ts that are never used, and fixing a typo where we wrote work-break instead of word-break.

@adamwathan adamwathan requested a review from a team as a code owner October 24, 2024 19:58
@adamwathan adamwathan mentioned this pull request Oct 24, 2024
@adamwathan adamwathan merged commit 1eab49d into next Oct 24, 2024
1 check passed
@adamwathan adamwathan deleted the change/change-typography-property-sorting branch October 24, 2024 20:10
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.

2 participants