Skip to content

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.

3 participants